💬
목차
< 뒤로가기
인쇄

app.vue

Nuxt 3에서 app.vue는 애플리케이션의 루트 컴포넌트입니다. 이것은 전체 애플리케이션을 감싸는 최상위 레벨의 컴포넌트로서 작동하며, 앱의 글로벌 레이아웃이나 스타일을 정의하는데 사용됩니다. app.vue는 모든 페이지 뷰들에 공통적으로 적용되는 레이아웃, 스타일, 스크립트 등을 포함할 수 있습니다.

app.vue의 주요 기능들:

  1. 글로벌 레이아웃: 공통 헤더, 푸터, 사이드바 등과 같이 여러 페이지에 걸쳐 사용되는 UI 요소를 정의할 수 있습니다.

  2. 스타일 정의: 전역 CSS 또는 SCSS 등의 스타일을 정의하여 앱 전체에 적용할 수 있습니다.

  3. 글로벌 컴포넌트 등록: 모든 페이지에서 사용될 수 있는 글로벌 컴포넌트를 등록할 수 있습니다.

  4. 커스텀 로직: Vue 인스턴스 라이프사이클 훅을 사용하여 앱 전체에 적용되는 커스텀 로직을 추가할 수 있습니다.

app.vue는 기본적으로 다음과 같은 구조를 가질 수 있습니다:

<template>
  <div>
    <!-- 글로벌로 사용되는 헤더 컴포넌트 -->
    <Header />

    <!-- 페이지 뷰들이 렌더링될 <NuxtPage/> 컴포넌트 -->
    <NuxtPage />

    <!-- 글로벌로 사용되는 푸터 컴포넌트 -->
    <Footer />
  </div>
</template>

<script setup>
// 글로벌 컴포넌트 등록 또는 글로벌 로직을 작성할 수 있습니다.
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
</script>

<style>
/* 글로벌 스타일 */
html, body {
  margin: 0;
  padding: 0;
  /* 기타 스타일... */
}
</style>

위의 예시에서 <NuxtPage/>는 현재 활성화된 페이지 컴포넌트가 렌더링되는 곳입니다. Nuxt는 이곳에 자동으로 페이지 컴포넌트를 삽입합니다.

nuxt.config.ts

Nuxt 3에서 nuxt.config.ts 파일은 애플리케이션 전반에 대한 설정을 정의하는 곳입니다. TypeScript를 사용하는 Nuxt 3 프로젝트에서는 nuxt.config.js 대신 nuxt.config.ts를 사용하여 타입 검사와 자동완성 같은 TypeScript의 이점을 활용할 수 있습니다.

이 설정 파일에서 다음과 같은 다양한 구성 옵션을 지정할 수 있습니다:

  • Global CSS: 애플리케이션에서 사용할 전역 CSS 파일을 정의합니다.
  • Plugins: Vue 인스턴스에 플러그인을 연결합니다.
  • Modules: Nuxt 모듈을 포함하여 기능을 확장합니다.
  • Build Modules: 빌드 시에만 사용되는 모듈을 정의합니다.
  • Env Variables: 서버 사이드와 클라이언트 사이드에서 사용할 환경 변수를 설정합니다.
  • Head Elements: 모든 페이지의 <head> 태그에 기본적으로 포함될 요소를 정의합니다(예: 메타 태그, 링크 등).
  • Router Configuration: Vue Router의 기본 설정을 수정합니다.
  • Server Middleware: 서버 사이드에서 동작하는 미들웨어를 추가합니다.
  • Build Configuration: Webpack 빌드 프로세스를 사용자 정의합니다.

nuxt.config.ts 파일의 예시 구성은 다음과 같습니다:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  // Global CSS
  css: ['~/assets/css/main.css'],

  // Plugins to run before rendering page
  plugins: ['~/plugins/my-plugin.ts'],

  // Nuxt.js modules
  modules: ['@nuxtjs/axios'],

  // Build configuration
  build: {
    postcss: {
      // postcss options
    },
    // extend webpack config here
    extend(config, ctx) {}
  },

  // Environment variables
  publicRuntimeConfig: {
    apiKey: process.env.API_KEY
  },

  // Customize the progress-bar color
  loading: { color: '#39b982' },

  // Headers of the page
  head: {
    title: 'my-nuxt-app',
    meta: [
      // ... meta tags
    ]
  },

  // Router configuration
  router: {
    middleware: ['my-middleware']
  },

  // TypeScript configuration
  typescript: {
    strict: true
  }
})

error.vue

Nuxt 3에서 error.vue 파일은 애플리케이션의 에러 페이지를 정의하는 데 사용됩니다. 이 파일은 사용자에게 에러 메시지를 표시하거나, 렌더링 중에 발생한 예외를 처리하는 커스텀 로직을 구현하는 데 필요합니다. 일반적으로 이 파일은 layouts 폴더 내부에 위치하며, 렌더링 과정에서 오류가 발생했을 때 자동으로 사용됩니다.

error.vue 컴포넌트는 다음과 같은 특징을 가질 수 있습니다:

  • 예외 처리: 서버 사이드 또는 클라이언트 사이드에서 발생한 예외를 적절히 처리합니다.
  • 사용자 친화적인 UI: 에러 상황에서도 사용자에게 안내 메시지나 다음 단계에 대한 안내를 제공하여 사용자 경험을 개선합니다.
  • 에러 로깅: 발생한 에러를 콘솔, 서버 로그, 또는 에러 트래킹 서비스로 전송하여 개발자가 문제를 추적하고 해결할 수 있도록 합니다.

기본적으로 error.vue 파일은 에러 객체를 속성으로 받아서 이를 활용할 수 있습니다. 예를 들어, 서버로부터의 응답 에러 코드를 기반으로 특정 에러 메시지를 표시할 수 있습니다.

error.vue의 예시 코드는 다음과 같습니다:

<template>
  <div>
    <h1 v-if="error.statusCode === 404">페이지를 찾을 수 없습니다.</h1>
    <h1 v-else>에러가 발생했습니다.</h1>
    <p>{{ error.message }}</p>
  </div>
</template>

<script setup>
// 에러 객체와 상태 코드를 받아옵니다.
const props = defineProps({
  error: {
    type: Object,
    required: true
  }
});
</script>

위 예시에서 error 객체는 오류 정보를 담고 있으며, 이를 통해 적절한 에러 메시지를 사용자에게 표시할 수 있습니다.

.env

Nuxt 3는 환경 변수를 사용하여 여러 환경에서 애플리케이션의 설정을 관리할 수 있도록 도와줍니다. .env 파일을 사용하여 개발, 테스트, 프로덕션 환경에서 다른 설정을 적용할 수 있습니다.

.env 파일을 설정하는 방법은 다음과 같습니다:

  1. .env 파일 생성: 프로젝트의 루트 디렉토리에 .env 파일을 생성합니다.

  2. 환경 변수 추가: 해당 파일에 환경 변수를 추가합니다. 예를 들어:

    NUXT_API_SECRET=api_secret_token
NUXT_PUBLIC_API_BASE=https://nuxtjs.org

  3. Nuxt 3의 런타임 설정 이용: Nuxt 3는 런타임 설정을 통해 서버와 클라이언트 사이드 코드에서 환경 변수를 다룰 수 있게 합니다. publicRuntimeConfig와 privateRuntimeConfig 객체를 nuxt.config.js에 추가하여 환경 변수를 설정할 수 있습니다.

    export default defineNuxtConfig({
runtimeConfig: {
    // 서버 사이드에서만 접근 가능
    apiSecret: '123', // NUXT_API_SECRET 환경 변수에 의해 재정의될 수 있습니다
    // 클라이언트 사이드에서도 접근 가능
    public: {
        apiBase: '/api' // NUXT_PUBLIC_API_BASE 환경 변수에 의해 재정의될 수 있음
    }
}
})

  4. 개발과 프로덕션에서 .env 파일 관리: 개발 환경에서는 .env.local 같은 파일을 사용하고, 이 파일을 .gitignore에 추가하여 버전 관리 시스템에 포함되지 않도록 합니다. 프로덕션 환경의 변수는 배포 환경에서 별도로 관리합니다.

이전 Nuxt 소개 가이드
다음 프로젝트 디렉토리 구성 가이드