Nuxt.js 설정 가이드: 웹 애플리케이션을 세밀하게 제어하자 #3

by

Nuxt.js는 Vue.js를 기반으로 한 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하는 강력한 도구입니다. Nuxt.js를 사용하여 웹 애플리케이션을 개발하려면 애플리케이션의 동작과 외형을 설정할 수 있어야 합니다. 이를 위한 주요 도구가 바로 nuxt.config.js 파일입니다. 이 파일을 통해 웹 애플리케이션을 세밀하게 제어하고 원하는 대로 커스터마이즈할 수 있습니다. 이 블로그 포스팅에서는 nuxt.config.js 파일을 활용하여 Nuxt.js 애플리케이션을 설정하는 방법을 상세히 설명합니다.

Nuxt.js 설정 가이드

nuxt.config.js 파일이란?

nuxt.config.js 파일은 Nuxt.js 애플리케이션의 설정 파일로, 애플리케이션의 동작과 외형을 정의합니다. 이 파일을 편집하여 다음과 같은 다양한 측면을 설정할 수 있습니다.

1. 실행 모드 설정

Nuxt.js 애플리케이션은 실행 모드에 따라 동작이 달라집니다. 두 가지 주요 모드는 다음과 같습니다.

  • Universal Mode (SSR 모드): mode를 ‘universal’로 설정하면 서버 사이드 렌더링 (SSR) 모드로 애플리케이션이 실행됩니다. 서버에서 초기 HTML 렌더링을 수행하므로 SEO 최적화와 더 빠른 페이지 로딩을 지원합니다.
  • SPA Mode (싱글 페이지 애플리케이션): mode를 ‘spa’로 설정하면 싱글 페이지 애플리케이션 (SPA) 모드로 애플리케이션이 실행됩니다. 클라이언트 측에서 라우팅과 컴포넌트 렌더링을 처리합니다.

예제:

// nuxt.config.js

export default {
  mode: 'universal', // SSR 모드
}

2. 소스 코드 디렉토리 지정

Nuxt.js는 소스 코드를 어디에서 찾아야 하는지 알아야 합니다. 기본적으로 ‘src’ 디렉토리에 소스 코드가 위치합니다. 디렉토리를 변경하려면 srcDir 설정을 사용합니다.

예제:

// nuxt.config.js

export default {
  srcDir: 'my-source', // 'my-source' 디렉토리에서 소스 코드 찾기
}

3. 웹 페이지 헤드 설정

head 설정을 사용하여 웹 페이지의 <head> 섹션을 정의할 수 있습니다. 페이지 타이틀, 메타 태그, 스타일시트, 스크립트 등을 설정할 수 있습니다.

예제:

// nuxt.config.js

export default {
  head: {
    title: 'My Nuxt App', // 페이지 타이틀
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ],
  },
}

4. 모듈 추가

Nuxt.js 모듈을 사용하여 애플리케이션에 기능을 추가할 수 있습니다. 예를 들어, Axios 모듈을 추가하여 HTTP 요청을 보낼 수 있습니다.

npm install --save @nuxt/http

// nuxt.config.js

export default {
  modules: [
    '@nuxt/http', // Axios 모듈 추가
  ],
}

5. 웹팩 빌드 설정

build 설정을 사용하여 웹팩 빌드 관련 옵션을 수정할 수 있습니다. 웹팩 설정을 커스터마이즈하여 애플리케이션의 빌드 프로세스를 조절할 수 있습니다.

// nuxt.config.js

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 웹팩 설정 확장
    },
  },
}

6. 라우터 설정

라우터를 설정하여 페이지의 경로와 동작을 제어할 수 있습니다. router 설정을 사용하여 기본 URL 경로, 미들웨어, 사용자 정의 라우트를 설정할 수 있습니다.

// nuxt.config.js

export default {
  router: {
    base: '/my-app/', // 기본 URL 경로 설정
    middleware: 'auth', // 미들웨어 추가
    extendRoutes(routes, resolve) {
      // 사용자 정의 라우트 추가
      routes.push({
        name: 'custom',
        path: '/custom-route',
        component: resolve(__dirname, 'pages/custom.vue'),
      });
    },
  },
}

7. 플러그인 추가

플러그인을 추가하여 글로벌 컴포넌트, 메소드, 라이브러리를 애플리케이션에 쉽게 통합할 수 있습니다.

// nuxt.config.js

export default {
  plugins: [
    '~/plugins/my-plugin.js', // 플러그인 추가
  ],
}

8. 환경 변수 설정

환경 변수를 설정하여 서버 및 클라이언트 측 코드에서 사용할 수 있습니다.

// nuxt.config.js

export default {
  env: {
    API_URL: process.env.API_URL || 'http://localhost:3000/api',
  },
}

9. 페이지 로딩 설정

페이지 로딩 인디케이터의 색상, 높이 등을 설정할 수 있습니다.

// nuxt.config.js

export default {
  loading: {
    color: 'blue', // 로딩 색상
    height: '5px', // 로딩 바 높이
  },
}

커스터마이즈로 더 강력한 Nuxt.js 애플리케이션

이제 nuxt.config.js 파일을 활용하여 Nuxt.js 애플리케이션을 원하는 대로 커스터마이즈할 수 있는 기본적인 방법을 알아보았습니다. nuxt.config.js 파일은 애플리케이션의 동작을 더욱 세밀하게 제어하고 원하는 형태로 만들기 위한 강력한 도구입니다. Nuxt.js를 사용하면 빠르게 웹 애플리케이션을 개발하고 관리할 수 있으며, nuxt.config.js 파일을 통해 애플리케이션의 설정을 관리하는 방법을 숙지하면 보다 강력한 웹 애플리케이션을 개발할 수 있습니다. 더 많은 설정 옵션과 사용 사례를 탐구하여 Nuxt.js 애플리케이션을 더욱 향상시켜보세요.

Leave a Comment