Jae Front-end Study

Nitro with Nuxt 3 — Course part 12

https://www.youtube.com/watch?v=1J-ywLgs--s&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=12

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

Nitro란

Nitro는 초고속 웹 서버를 구축하기 위한 오픈 소스 타입스크립트 프레임워크이다.

Nuxt3는 Nitro를 서버 엔진으로 사용한다.

• Node.js, 브라우저, service-workers 등을 위한 크로스 플랫폼 지원
• 즉시 사용 가능한 서버리스(serverless, 개발자가 서버를 관리할 필요 없이 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델) 지원
• API 경로 지원
• 자동 코드 분할 및 비동기 로드 
• 정적 + 서버리스 사이트를 위한 하이브리드 모드
• 핫 모듈을 다시 로드하는 개발 서버

• useNitro : Nitro 인스턴스를 반환한다.
• addServerHandler : 서버 핸들러를 추가한다. 서버 미들웨어나 커스텀 라우터를 생성하고 싶을 때 사용한다.
• addDevServerHandler : 개발 모드에서만 사용할 서버 핸들러를 추가한다. 프로덕션 빌드에서 제외된다.
• addServerPlugin : Nitro의 런타임 동작을 확장하기 위한 플러그인을 추가한다.
• addPrerenderRoutes : Nitro에서 사전 렌더링할 경로를 추가한다.

https://nuxt.com/docs/api/kit/nitro

Nitro 메서드에 대한 자세한 설명은 공식 문서를 참고한다.

API 레이어

서버 API 엔드포인트와 미들웨어는 Nitro에 의해 추가된다.

• 핸들러는 자동으로 처리되는 JSON 응답에 대해 객체/베열을 직접 반환할 수 있다.
• 핸들러는 Promise를 반환할 수 있다. (res.end(), next() 지원 가능)
• 본문 구문 분석, 쿠키 처리, 리디렉션, 헤더 등을 위한 기능이 있다.

Server with Nuxt 3 — Course part 11

https://www.youtube.com/watch?v=RQhWvHz3I5I&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=11

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

Server란

Nuxt Server 디렉토리는 데이터베이스나 다른 서버에서 데이터를 가져오고, API를 생성하고, 사이트맵이나 RSS 피드와 같은 정적 서버 측 컨텐츠를 생성하는 작업까지 모두 단일 코드베이스에서 수행할 수 있다. 또한 디렉토리 내의 파일을 자동으로 스캔하여 HMR(Hot Module Replacement) 지원으로 API 및 서버 핸들러를 등록할 수 있다.

1. /server/api

• server/api/hello.ts

export default defineEventHandler((event) => {
  return {
    api: 'hello world'
  }
})

• pages/index.vue

useFetch를 통해서 API를 호출할 수 있다.

<script setup lang="ts">
const { data } = await useFetch('/api/hello')
console.log(data)
</script>

<template>
  <h1>{{ data }}</h1>
</template>

2. /server/routes

• server/routes/hello.ts

/api 접두사 없이 서버 경로를 추가하려면 /server/routes/ 디렉터리를 사용한다.

export default defineEventHandler(() => 'Hello World!')

3. HTTP 메서드

server/api 디렉터리의 파일에는 HTTP 메서드를 붙일 수 있다.

• GET /api/users - 등록된 모든 사용자를 가져온다.
• POST /api/users - 새로운 사용자를 생성한다.
• PUT /api/users/{id} - 사용자의 상태를 변경한다.
• DELETE /api/users/{id} - 사용자를 삭제한다.

• server/api/test.get.ts

export default defineEventHandler(() => 'Test get handler')

• server/api/test.post.ts

export default defineEventHandler(() => 'Test post handler')

State management with Nuxt 3 — Course part 10

https://www.youtube.com/watch?v=IkpoAKS1s-k&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=10

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

State Management란

상태 관리(State Management)에서 상태(State)란, 앱 구동에 필요한 기본 데이터 소스이다.

이 상태를 변경시킬 때 사용하는 것이 상태 관리이다. 

쉽게 말해 컴포넌트 간의 데이터 전달이나 데이터 변경을 효율적으로 하는 방법이다.

1. 일반 변수

• pages/index.vue

일반 변수를 선언하듯이 counter 변수를 만들면 클릭 이벤트를 만들어도 화면에는 반영되지 않는다.

콘솔창에서만 counter 변수가 증가, 감소한다.

<script setup lang="ts">
let counter = 0

function increment() {
  counter++
  console.log('증가', counter)
}

function decrease() {
  counter--
  console.log('감소', counter)
}
</script>

<template>
  <section>
    <h2>counter 변수</h2>

    <p>{{ counter }}</p>

    <button @click="increment">+</button>
    <button @click="decrease">-</button>
  </section>
</template>

2. useState 변수

• composables/state.ts

useState에 counter 변수를 만든다.

export const useCounter = () => useState<number>('counter', () => 0)

• pages/index.vue

useState를 통해 변수를 만들면 데이터가 변하는 즉시, 화면에서도 변경된다.

<script setup lang="ts">
import { useCounter } from '@/composables/state';

const stateCounter = useCounter()
</script>

<template>
  <section>
    <h2>useState 변수</h2>

    <p>{{ stateCounter }}</p>

    <button @click="stateCounter++">+</button>
    <button @click="stateCounter--">-</button>
  </section>
</template>

3. Pinia store 라이브러리

https://pinia.vuejs.org/

Pinia store에 대한 자세한 설명은 위의 링크를 참고한다.

• stores/counter.ts

1. 터미널에서 yarn add pinia 또는 npm install pinia 명령어를 입력해 pinia 패키기를 설치한다.
2. pinia를 import 한다.
3. useCounterStore를 만들고, state에 초기값을 선언한다.
4. actions에 이벤트를 만든다.

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => {
    return { count: 0 }
  },

  actions: {
    increment() {
      this.count++
    },

    decrement() {
      this.count--
    }
  }
})

• pages/index.vue

pinia를 통해 변수를 만들면 데이터가 변하는 즉시, 화면에서도 변경된다.

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter';

const piniaCounter = useCounterStore()
</script>

<template>
  <section>
    <h2>Pinia 변수</h2>

    <p>{{ piniaCounter.counter }}</p>

    <button @click="piniaCounter.increment">+</button>
    <button @click="piniaCounter.decrement">-</button>
  </section>
</template>

useState vs Pinia

Nuxt을 사용해 개발을 하기 위해서는 상태 관리를 어떻게 할지 정해야 한다.

간단한 앱에서는 useState를 사용하고, 복잡한 앱에서는 Pinia를 사용한다는 의견이 많다.

Pinia는 Vue.js용 스토어 라이브러리 및 상태 관리 프레임워크이다. 

Pinia에서 제공하는 많은 기능들이 있고, 개발자는 그 기능들을 직접 만들 필요가 없다.

DevTools를 통합할 수 있고, getter와 actions 기능을 통해 상태를 변경할 수 있는 구체적인 방법을 정의할 수 있다.

따라서 앱의 얼마나 복잡한지 파악한 다음에 어떤 수준의 도구를 선택할지 결정하면 된다.

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>

결과 화면

Middlewares with Nuxt 3 — Course part 8

https://www.youtube.com/watch?v=PhuJE0ayD6A&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=8

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

Middleware란

Nuxt에서 미들웨어(Middleware)는 페이지나 레이아웃이 렌더링 되기 전에 호출되는 커스텀 훅(Hook)이다.

store, route, params, query, redirect 등에 접근할 수 있기 때문에 내비게이션 가드 형태로 미들웨어 제작이 가능하다.

쉽게 말해 특정 경로로 이동하기 전에 실행하려는 코드를 만들 때 이상적이다.

1. middleware 폴더 만들기

• middleware/auth.global.ts

middleware 폴더 안에 파일을 만들 때 파일명 뒤에 .global을 붙이면 별도의 import 없이 전역에서 사용할 수 있는 미들웨어가 된다.

export default defineNuxtRouteMiddleware((to, from) => {
  console.log(to)
  console.log(from)
})

2. auth.global.ts (글로벌 미들웨어)

• middleware/auth.global.ts

글로벌로 만든 미들웨어에서 navigateTo를 이용해 리다이렉트를 할 경우, isLoggedIn이 계속 false이기 때문에 무한 리다이렉트에 빠져 주의해야 한다.

export default defineNuxtRouteMiddleware((to, from) => {
  let isLoggedIn = false

  if(isLoggedIn) {
    return navigateTo(to.fullPath)
  } else {
    return navigateTo('/auth')
  }
})

3. auth.ts (페이지 정의 미들웨어)

• pages/index.vue

1. auth.global.ts 미들웨어에서 .global을 지운다.
2. auth.ts 미들웨어를 사용할 페이지에 import 한다.
3. / 루트 페이지에 접속하면 바로 /auth 페이지로 이동됨을 볼 수 있다.

<template>
  <h1>Main page</h1>
</template>

<script setup lang="ts">
definePageMeta({
  middleware: 'auth'
})
</script>

Plugins with Nuxt 3 — Course part 7

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

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

Plugins이란

Nuxt에는 Vue 애플리케이션 생성 시 Vue 플러그인을 사용할 수 있는 플러그인 시스템이 있다.

Nuxt는 자동으로 plugins 디렉터리 파일을 읽고, Vue 애플리케이션 생성 시 이를 로드한다.

1. plugins 폴더 만들기

• plugins/myPlugins.ts

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      hello: (msg: string) => console.log(`Hello ${msg}`)
    }
  }
})

2. 플러그인 import 하기

plugins 디렉터리 최상위에 있는 파일(또는 하위 디렉터리 내의 index 파일)은 별로의 import 없이 자동으로 플러그인으로 등록된다.

• pages/index.vue

<script setup lang="ts">
console.log(useNuxtApp())
</script>

3. 플러그인 사용하기

• pages/index.vue

<script setup lang="ts">
const { $hello } = useNuxtApp()

$hello('world')
</script>

Composables with Nuxt 3 — Course part 6

https://www.youtube.com/watch?v=cWX4b2qD6sg&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=6

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

Composables이란

Vue 애플리케이션에서 composable(컴포저블)이란, Vue의 Composition API를 활용하여 상태 저장 논리를 캡슐화하고 재사용하는 함수를 의미한다.

함수의 이름은 'use'로 시작하고, 카멜 케이스 형식으로 지정한다.

1. composables 폴더 만들기

• composables/useUtils.ts

export const useUtils = () => {
  const sayHello = () => console.log('Hello from useHello')

  return {
    sayHello
  }
}

2. useUtils 함수 불러오기

• pages/index.vue

<script setup lang="ts">
import { useUtils } from "~/composables/ussUtils";

const { sayHello } = useUtils()

sayHello()
</script>

결과 화면

VueUse란

VueUse 모듈은 Vue Composition(컴포지션, import 한 함수를 사용해서 Vue 컴포넌트를 작성할 수 있는 API) 유틸리티 모음이다.

VueUse에 대한 자세한 설명을 아래 공식 문서를 참고한다.

https://vueuse.org/

https://nuxt.com/modules/vueuse

VueUse 설치하기

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

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

npm i -D @vueuse/nuxt @vueuse/core

• nuxt.config.ts

모듈 부분에 @vueuse/nuxt를 import 한다.

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

1. useMouse

• pages/index.vue

<template>
  <div>Mouse position: {{ x }}, {{ y }}</div>
</template>

<script setup lang="ts">
import { useMouse } from '@vueuse/core'

const { x, y } = useMouse()
</script>

2. useLocalStorage

• pages/index.vue

<script setup lang="ts">
import { useLocalStorage } from '@vueuse/core'

const store = useLocalStorage(
    'my-storage',
    {
      name: 'Apple',
      color: 'red'
    }
)
</script>

3. usePreferredDark

• pages/index.vue

<script setup lang="ts">
import { usePreferredDark } from '@vueuse/core'

const isDark = usePreferredDark()

console.log(isDark)

if(isDark.value) {
  console.log('다크모드 true')
} else {
  console.log('다크모드 false')
}
</script>

4. useTitle

• pages/index.vue

<template>
  <h1>{{ themeTitle }}</h1>
</template>

<script setup lang="ts">
import { usePreferredDark, useTitle } from '@vueuse/core'

const isDark = usePreferredDark()

const themeTitle = useTitle(() => isDark.value ? '다크모드 true' : '다크모드 false')
</script>

5. onClickOutside

• pages/index.vue

<template>
  <div ref="el">
    Click Outside of Me
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

const el = ref()

function close () {
  alert('영역의 바깥을 클릭했습니다.')
}

onClickOutside(el, close)
</script>

Images, assets & public folder with Nuxt 3 — Course part 5

https://www.youtube.com/watch?v=tWQ2LWplmDc&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=5

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

1. assets 폴더에 이미지 올리기

assets 폴더에 images 폴더를 만들고 이미지를 올린다.

• pages/index.vue

~ 또는 @를 이용해서 루트 경로를 설정하면 된다.

<template>
  <img src="~/assets/images/1.jpg" alt="이미지1">
  <img src="@/assets/images/2.jpg" alt="이미지2">
</template>

assets 폴더에 넣은 이미지는 빌드돼서 이미지가 업로드되기 때문에 직접적인 접근이 불가능하다.

2. public 폴더에 이미지 올리기

public 폴더에 images 폴더를 만들고 이미지를 올린다.

public 폴더에 넣은 이미지는 서버 루트에서 그대로 제공되기 때문에 직접적인 접근이 가능하다.

단, public 폴더는 모두가 접근할 수 있기 때문에 안전 이슈가 발생할 수 있어 주의해서 사용해야 한다.

Layouts with Nuxt 3 — Course part 4

https://www.youtube.com/watch?v=GQjU4FfM3II&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=4

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

1. DefaultLayout 만들기

1. layouts 폴더를 만들고, 그 안에 default.vue 파일을 만든다.
2. <slot>을 사용해 pages/~.vue 파일의 내용을 <slot> 부분으로 대체한다.

• layouts/default.vue

layouts 폴더 안에 defalut.vue 파일을 만들면 별도의 import 없이 자동으로 DefalutLayout이 된다.

<template>
  <div class="h-screen p-5 bg-slate-700 text-base text-white">
    <Header/>

    <slot/>
  </div>
</template>

• pages/index.vue

<template>
  <h1>index page</h1>
</template>

• app.vue

<template>
  <NuxtLayout>
    <NuxtPage/>
  </NuxtLayout>
</template>

2. CustomLayout 만들기

1. DefaultLayout 말고, 다른 레이아웃을 만들고 싶을 때 layout 폴더 안에 custom.vue 파일을 만든다.
2. CustomLayout은 기본 레이아웃이 아니기 때문에 <script> 태그 안에 정의를 해야 한다.

• layouts/custom.vue

<template>
  <div class="h-screen p-5 bg-slate-500 text-base text-white">
    <h1 class="text-lg font-bold">Custom layout</h1>

    <slot/>
  </div>
</template>

• pages/custom.vue

<template>
  <h1>Custom page</h1>
</template>

<script setup lang="ts">
definePageMeta({
  layout: "custom"
})
</script>

결과 화면

Components with Nuxt 3 — Course part 3

https://www.youtube.com/watch?v=o4SkcTupZBo&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=3

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

1. components 폴더 만들기

components 폴더를 만들고, 그 안에 vue 파일을 만든다.

컴포넌트로 사용할 vue 파일의 첫 글자 이름은 반드시 대문자로 한다.

• components/Alert.vue

<template>
  <div class="p-2 bg-slate-500 rounded text-white text-lg font-bold">
    This is an alert component.
  </div>
</template>

• components/Profile/Header/Avatar.vue

<template>
  <div class="p-2 bg-slate-700 rounded text-white text-lg font-bold">
    This is a Profile/Header/Avatar component.
  </div>
</template>

2. 컴포넌트 import 하기

nuxt3에는 auto-importing 기능이 있어 별도의 import문 없이 바로 컴포넌트를 사용할 수 있다.

파일명이 컴포넌트의 이름이 되고, 뎁스 안에 있는 컴포넌트는 '폴더명 폴더명 ... 파일명' 으로 이름을 지으면 된다.

'components/Profile/Header/Avatar.vue' 의 경우 <ProfileHeaderAvatar>가 컴포넌트의 이름이 된다.

• pages/index.vue

<template>
  <Alert/>

  <ProfileHeaderAvatar/>
</template>

결과 화면