Nuxt3이란?

작년 11월 Nuxt 3 stable 버전이 출시되었다 (Reference)

Announcing 3.0 · Nuxt

 

한글로 된 관련 문서가 없는 것 같아 요것 먼저 작성해볼까 한다

 

우선 가장 큰 변화점은 Vue3를 지원해 준다는 점이다.

사실 typescript를 애용하는 입장에서 이것만 나와도 대박이다..

아래에서 짧게 소개하겠지만 Composition API는 정말 vue 코드를 typescript로 작성하는데 큰 도움을 주기 때문이다..!

 

Nuxt란? (짧게)

우선 Nuxt를 짧게나마 소개하는 게 좋을 것 같아서 간단하게 소개하자면

 

Nuxt는 Vue.js를 사용하는 프론트엔드 프레임워크이다. 

큰 특징으로는 SSR 지원을 도와준다는 점이다.

 

평소에 알던 SPA의 장점은 페이지 간의 이동 시 새로 데이터를 불러오지 않고 스크립트를 통해 화면을 다시 렌더링 한다.

하지만 빈 html위에 그리기 때문에 SEO에 어려움이 있을 수 있다.

그래서 SEO를 위해 SSR을 사용하는 데 SSR을 사용하면 페이지 이동 시 html을 새로 파싱하고 그리기 때문에 이동이 부자연스럽다.

 

하지만 nuxt를 사용하게 되면 첫 페이지는 서버사이드 렌더링을 해주고 이후 nuxt-link라는 태그를 통해 이동하게 되면 평소에 알던 SPA처럼 동작하게 된다..! (심지어 여기에는 프리패칭도 동작하기 때문에 라우팅이 매우 효율적이다.)

 

첫 로딩과 라우팅 시에 다르게 동작하는 라이프사이클까지 함께 소개하고 싶지만......

이 글은 Nuxt3에 대해 적는 글이기 때문에 이건 나중에 적도록 하겠습니다..

---

Nuxt3 특징

Vue3(Composition API)

역시나 가장 큰 특징은 Vue3를 활용할 수 있다는 점이다.

 

Vue3에는 Composition API를 사용할 수 있다.

Composition API는 아래와 같은 문법을 사용한다.

<script setup lang="ts">
const count = ref<number>(1)
const double = computed<string>(() => count.value * 2 + '개')
const readonlyCount = readonly(count)

const increaseCount = () => {
  count.value++
}

const decreseCount = () => {
  count.value--
}

watch(count, (count, prevCount) => {
    console.log(count, prevCount)
})
</script>

ref

const count = ref<number>(1)

하나씩 소개하자면 ref는 렌더링을 트리거 해주는 반응형 데이터로 value라는 요소를 가지게 된다. 

이 요소는 인수를 초기값으로 가지고 수정될 때마다 리렌더링을 일으킨다.

(리액트에서 많이 본듯한..?)

 

computed

const double = computed<string>(() => count.value * 2 + '개')

이 함수은 원래 vue처럼 의존하는 값이 수정되면 업데이트되는 반응형 데이터로 ref객체를 반환함.

 

readonly

const readonlyCount = readonly(count)

이 함수은 매개변수로 ref객체를 받아 readonly를 반환해 이 값을 수정하려고 하면 에러를 뱉어낸다.

 

watch(key, handler)

watch(count, (count, prevCount) => {
    console.log(count, prevCount)
})

key가 바뀌며 key의 현재 값, 이전 값을 인수로 handler를 callback 한다

 

몇 가지 더 있지만 우선 핵심적인 내용들은 위와 같다.

nuxt3도 마찬가지로 위에서 지원하는 훅들을 사용하고 Nuxt에만 있는 생명주기인 asyncData, fetch가 추가되어 쓰이게 된다

const { data, pending, error, refresh } = await useAsyncData(
  'mountains', // key
  () => $fetch('https://api.nuxtjs.dev/mountains')
)

const param1 = ref('value1')
// fetch는 생명주기 상 created 이후기 때문에 created에서 만들어진 값들을 사용 가능하다..!
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
    query: { param1, param2: 'value2' }
})

---

Auto-imports

우선 Nuxt3은 Auto-imports가 적용되어 있다

Vue3에서 쓰이는 refs, computed, watch는 Auto-imports가 적용되어 아래 코드만 적어도 동작을 한다.

<script setup>
  /* ref() and computed() are auto-imported */
  const count = ref(1)
  const double = computed(() => count.value * 2)
</script>

마찬가지로 Nuxt3에서 지원해 주는 새로운 훅들도 적용되어 있다 (useAsyncData와 같은)

 

자주 쓰이는 아래 폴더 아래에 있는 컴포넌트, 훅들도 적용된다.

• /components
• /composables
• /utils

 

하지만 회사에 따라 혹은 사람에 따라 Import가 됐다는 걸 보여주는 쪽을 더 선호할 수도 있다 그럴 경우에는 아래 두 가지 방법을 사용할 수 있다.

 

1. 명시적 Import

import { ref, computed } from '#imports'

2. config 파일 수정

// nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

 

---

기타

Nitro Engine

서버 사이드 엔진을 h3 기반인 Nitro로 변경했다고 한다.

 

$fetch()

Nuxt3에는 nuxt/axios, nuxt/http가 아닌 ofetch로 만들어진 $fetch를 사용하는 걸 기대하고 있다

---

Template 공유

https://github.com/bysxx/nuxt3-ts-template

GitHub - bysxx/nuxt3-ts-template: Nuxt3 + TypeScript + Composition API



위 사진 처럼 Use this template을 사용해 본인의 레포에서 사용할 수 있음.

 

Nuxt3 + TypeScript Template으로 Component, Page 예시 및 eslint 세팅 등이 되어있음.

추후 다양한 예시(비동기 컴포넌트 등)을 추가할 예정이고 테스트 코드도 추가할 예정이다!