Jae Front-end Study

Modules with Nuxt 3 — Course part 9

https://www.youtube.com/watch?v=JQLH9MDtRQk&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=9

유튜브 강의를 참고하고 있습니다.

Modules이란

Nuxt를 사용하여 프로덕션급 애플리케이션을 개발할 때 프레임워크의 핵심 기능이 충분하지 않다는 것을 알 수 있다.

이때 Nuxt 모듈을 이용해서 프레임워크 코어를 확장하고 통합을 단순화할 수 있다.

Nuxt 모듈 공식문서에서 다양한 모듈 리스트들을 확인할 수 있다.

https://nuxt.com/modules

Nuxt Content

Nuxt Content는 프로젝트의 content 디렉터리를 읽고 .md, .yml, .csv 또는 .json 파일을 구문 분석하고 애플리케이션을 위한 강력한 데이터 계층을 생성한다.

Nuxt Content에 자세한 설명은 아래 공식 문서를 참고한다.

https://content.nuxt.com/

1. Nuxt Content 설치하기

터미널에서 아래 명령어를 실행한다.

package.json 파일에서 설치된 버전을 확인할 수 있다.

yarn add @nuxt/content

또는

npm install @nuxt/content

2. nuxt.config.ts에 모듈 추가하기

modules 배열 부분에 사용할 모듈 리스트들을 추가한다.

export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@vueuse/nuxt',
    '@nuxt/content'
  ],
  css: ['@/assets/scss/main.scss'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {}
    }
  }
})

3. content 폴더 만들기

• content/index.md

# content에서 작성한 hello world

4. ContentDoc 컴포넌트 사용하기

• pages/index.vue

<template>
  <ContentDoc/>
</template>

결과 화면

Auto Animate

Auto Animate는 웹 앱에 부드러운 전환을 추가하는 드롭인 애니메이션 유틸리티이다.

Vue, Nuxt 뿐만 아니라 React, Solid, Svelte 또는 자바스크립트 애플리케이션에서도 사용 가능하다.

Auto Animate에 자세한 설명은 아래 공식 문서를 참고한다.

https://auto-animate.formkit.com/

1. auto-animate 설치하기

터미널에서 아래 명령어를 실행한다.

package.json 파일에서 설치된 버전을 확인할 수 있다.

yarn add @formkit/auto-animate

또는

npm install @formkit/auto-animate

2. 정렬 애니메이션 만들기

• pages/index.vue

1. auto-aminate를 import 한다.
2. [sortList] 변수를 만든다.
3. <ul> 태그에 ref를 이용해 [sortList] 변수를 참조한다.
4. 정렬 버튼을 누를 때 마다 <li> 태그들이 animation이 추가되어 움직이는 것을 확인할 수 있다.

<script setup>
import { ref } from 'vue'
import { useAutoAnimate } from '@formkit/auto-animate/vue'

const [sortList] = useAutoAnimate()
const items = ref(["React", "Vue", "Svelte", "Angular"])

function sortAsc() {
  items.value.sort()
}
function sortDesc() {
  items.value.sort().reverse()
}
</script>

<template>
  <div class="mb-5">
    <button
        class="me-5 px-4 py-2 bg-slate-500 rounded"
        @click="sortAsc">
      Sort A-Z ↑
    </button>
    <button
        class="px-4 py-2 bg-slate-500 rounded"
        @click="sortDesc">
      Sort Z-A ↓
    </button>
  </div>

  <ul ref="sortList">
    <li
        v-for="item in items"
        :key="item">
      {{ item }}
    </li>
  </ul>
</template>

결과 화면