ChamomileGuides 3.0.4 Help

Nuxt 소개 가이드

Nuxt 개요

Nuxt.js는 Vue.js 애플리케이션을 구축하기 위한 인기 있는 프레임워크입니다. Nuxt 3는 Nuxt.js의 최신 주요 버전으로, Vue.js 3를 기반으로 하며 많은 새로운 기능과 개선 사항을 포함하고 있습니다.

Nuxt 3의 핵심 특징들

  1. Vue 3 지원: Nuxt 3는 Vue 3의 전체 기능 세트를 지원합니다. 이것은 Composition API, Teleport, Fragments 등의 새로운 기능을 포함합니다.

  2. 개선된 성능: 초기 로딩 시간과 빌드 시간이 단축되었으며, 더 효율적인 서버 사이드 렌더링을 제공합니다.

  3. Vite 기반 개발 환경: Webpack 대신 Vite를 사용한 빠르고 모던한 개발 환경을 제공합니다.

  4. 서버 사이드 렌더링 (SSR)과 정적 사이트 생성 (SSG): Nuxt 3는 유연한 렌더링 옵션을 제공하여, 서버 사이드 렌더링 또는 정적 사이트 생성을 선택할 수 있게 합니다.

  5. Nitro Engine: Nuxt 3의 새로운 서버 엔진인 Nitro는 다양한 환경에서 배포할 수 있도록 설계되었으며, 빠른 cold start와 더 나은 최적화를 제공합니다.

  6. 모듈 시스템: Nuxt 모듈을 사용하면 애플리케이션을 쉽게 확장하고, Nuxt 생태계에서 다양한 기능을 추가할 수 있습니다.

  7. 자동 가져오기: 컴포넌트, 스토어, 플러그인 등을 수동으로 가져올 필요 없이 자동으로 가져옵니다.

  8. Improved TypeScript Support: TypeScript 사용이 더욱 용이해졌으며, out-of-the-box로 제공됩니다.

  9. Routing Improvements: 파일 기반 라우팅이 강화되었고, 동적 라우팅이 개선되었습니다.

  10. Composition API Helpers: Nuxt 3는 특별한 Composition API 헬퍼를 제공하여, 서버 상태 관리, 비동기 데이터 로딩 등이 간소화됩니다.

Nuxt 3의 빌드 및 배포

  • Universal Application: Nuxt 3를 사용하면 클라이언트 사이드와 서버 사이드 모두에서 애플리케이션을 렌더링할 수 있습니다.

  • 배포 옵션: Nuxt 3 애플리케이션은 서버리스 함수로 배포할 수 있으며, Node.js 서버, 정적 호스팅 사이트, 또는 모던 호스팅 플랫폼에서 실행할 수 있습니다.

개발 경험

  • Fast HMR (Hot Module Replacement): Vite를 통해 개발 시 변경 사항이 즉시 반영되는 빠른 HMR을 경험할 수 있습니다.

  • 디버깅과 개발 도구: 개발 중 오류 추적과 상태 관리를 돕는 강력한 도구를 제공합니다.

Nuxt3 설정

Nuxt 3는 Vue 3에 기반을 둔 최신 버전의 Nuxt 프레임워크로, 많은 업데이트와 개선사항이 포함되어 있습니다. Nuxt 3의 구성은 이전 버전과 비슷하지만, 몇 가지 주요한 변화와 새로운 기능이 추가되었습니다.

Nuxt 3의 주요 구성 파일은 여전히 nuxt.config.js 또는 nuxt.config.ts (TypeScript를 사용하는 경우) 입니다. 여기에서 프로젝트 설정을 진행합니다.

다음은 Nuxt 3에서 자주 사용되는 구성 옵션들입니다:

  1. Imports: Nuxt 3는 자동으로 composables, components, layouts 등을 가져올 수 있습니다. 이를 위한 특별한 설정은 필요하지 않습니다.

  2. CSS: 전역 CSS 파일이나 라이브러리를 추가합니다.

export default defineNuxtConfig({ css: ['~/assets/css/main.css'] })

  1. Public Runtime Config: 클라이언트와 서버 양쪽에서 사용할 수 있는 환경변수를 설정합니다. 이전에는 env를 사용했으나, Nuxt 3에서는 publicRuntimeConfig를 사용합니다.

export default defineNuxtConfig({ publicRuntimeConfig: { apiBase: process.env.API_BASE } })

  1. Private Runtime Config: 서버 측에서만 사용할 수 있는 환경변수를 설정합니다. 이는 서버 측의 비밀번호나 API 키 같은 정보를 안전하게 보관할 때 유용합니다.

export default defineNuxtConfig({ privateRuntimeConfig: { apiSecret: process.env.API_SECRET } })

  1. Modules: Nuxt 모듈을 추가합니다. Nuxt 3에서는 buildModules 구분이 없어지고 모든 모듈이 modules 섹션에서 설정됩니다.

export default defineNuxtConfig({ modules: ['@nuxtjs/tailwindcss'] })

  1. Vite: Nuxt 3는 기본적으로 Vite를 사용합니다. Vite 설정을 커스터마이즈할 수 있습니다.

export default defineNuxtConfig({ vite: { // Vite 설정 } })

  1. Build: 빌드 과정을 사용자 정의합니다.

export default defineNuxtConfig({ build: { // 빌드 설정 } })

  1. Nitro: Nuxt 3는 Nitro를 서버 엔진으로 사용합니다. Nitro에 대한 설정을 정의할 수 있습니다.

export default defineNuxtConfig({ nitro: { // Nitro 설정 } })

Nuxt 3는 설정 파일을 정의할 때 defineNuxtConfig 함수를 사용하여 타입 안전성을 제공합니다. 이 함수는 타입스크립트를 사용하는 프로젝트에서 자동 완성과 타입 검사를 지원합니다.

이 설정들은 Nuxt 3 애플리케이션의 다양한 측면을 구성할 수 있는 기본적인 부분들입니다. Nuxt 3의 모든 기능과 설정에 대해 더 자세히 알아보려면 공식 Nuxt 3 문서를 참조하는 것이 좋습니다.

LifeCycle & Hook

Nuxt3 LifeCycle & Hook 에 대해 설명 한다.

Nuxt2 와 비교

Nuxt 3는 Nuxt 2와 비슷한 생명 주기(lifecycle)와 훅(hook) 시스템을 가지고 있지만, 몇 가지 주요한 차이점과 새로운 기능이 있습니다. Nuxt 3의 생명 주기와 훅을 이해하는 것은 애플리케이션의 다양한 단계에서 코드를 실행하는 데 도움이 됩니다.

  1. Nuxt 3의 주요 생명 주기 단계

    • setup: Vue 3의 Composition API에 있는 setup 함수와 유사합니다. 컴포넌트가 생성될 때 실행되며, props와 context를 인자로 받습니다.

    • fetch: 서버 사이드 렌더링(SSR) 또는 정적 사이트 생성(SSG)에서 사용됩니다. 데이터를 가져오고 컴포넌트의 상태를 설정하는 데 사용됩니다.

    • asyncData: 서버 사이드에서 데이터를 가져오는 데 사용됩니다. fetch와 유사하지만, asyncData는 반환된 객체를 컴포넌트 데이터로 자동으로 병합합니다.

  2. Nuxt 3의 주요 훅

    • useAsyncData: 비동기 데이터를 관리하는 Composition API 함수입니다. 데이터를 가져오고 로컬 상태로 설정하는 데 사용됩니다.

    • useFetch: useAsyncData와 유사하지만, SSR과 클라이언트 사이드 모두에서 작동합니다.

    • onBeforeMount, onMounted, 등: Vue 3의 생명 주기 훅을 사용할 수 있습니다.

  3. Nuxt 특정 훅

    • nuxtServerInit: 서버 사이드에서 한 번만 실행되며, 보통 서버 사이드 렌더링을 할 때 초기 상태를 설정하는 데 사용됩니다.

    • fetch와 asyncData 훅: 데이터를 가져오고 컴포넌트의 상태를 설정합니다.

    • render:route: 라우트가 렌더링되기 전에 실행됩니다.

    • build:before와 build:done: 빌드 프로세스의 전/후에 실행됩니다.

참고 사이트

Last modified: 10 1월 2025
배치 운영 가이드프로젝트 구성 가이드