ssr (Server-Side Rendering)
Nuxt.js 애플리케이션이 페이지를 렌더링 하는 방식을 제어한다. 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR) 중에서 선택할 수 있다.
ssr: true: 서버 사이드 렌더링을 활성화하여 페이지를 서버에서 렌더링 한다. 이 경우, 사용자가 페이지를 요청할 때 서버가 HTML을 생성하여 클라이언트에 전송한다. 이 방식은 초기 로딩 속도가 빠르고 SEO(검색 엔진 최적화)와 페이지 로딩 성능이 향상될 수 있다. Nuxt.js의 기본값이다.ssr: false: 클라이언트 사이드 렌더링만 수행하여 서버에서 렌더링하지 않는다. 이 경우, 페이지는 클라이언트 브라우저에서 JavaScript를 통해 렌더링 된다. 초기 페이지 로딩 시 HTML이 클라이언트에 전달되지 않으며, JavaScript가 로드된 후 클라이언트에서 페이지가 렌더링 된다. 서버 리소스를 절약할 수 있지만, SEO와 초기 로딩 성능에 영향을 미칠 수 있다.
target (Deployment Target)
Nuxt.js 애플리케이션을 배포할 때의 방식을 결정한다. 서버와 정적 사이트 생성 중에서 선택할 수 있다.
target: 'server': 서버 사이드 렌더링을 사용하여 서버에서 페이지를 렌더링한다. 이 설정은 애플리케이션이 서버에서 실행되며, 요청에 따라 서버가 페이지를 렌더링 하고 클라이언트에 전달한다. 이 방법은 동적인 페이지와 서버에서의 데이터 처리가 필요할 때 유용하다. Nuxt.js의 기본값이다.target: 'static': 정적 사이트 생성을 사용하여 애플리케이션의 모든 페이지를 빌드 시 정적으로 생성한다. 이 설정을 사용하면 Nuxt.js는 빌드 과정에서 모든 페이지를 HTML 파일로 생성하고, 최종 결과물은 정적 파일로 배포된다. 이 방법은 서버 없이 호스팅 할 수 있으며, CDN을 통해 빠르게 전달할 수 있다.
generate (Static Site Generation)
Nuxt.js 애플리케이션을 정적 사이트로 생성할 때 사용된다. 정적 사이트 생성(Site Generation)은 서버 사이드 렌더링과 달리 빌드 시 모든 페이지를 HTML 파일로 미리 생성하여 배포하는 방법이다.
generate.dir
- 정적 파일이 생성될 디렉토리의 경로를 설정한다. 이 디렉토리는 Nuxt.js가 생성한 정적 파일을 저장하는 위치이다.
- 기본값:
dist
generate.routes
- 생성할 페이지의 경로를 배열로 지정한다. 이 옵션을 통해 특정 경로를 명시적으로 정의하여 정적으로 생성할 수 있다. 예를 들어, 동적 라우팅을 사용하는 페이지가 있다면, 이 배열에 동적 페이지의 경로를 추가하여 미리 생성할 수 있다.
- 기본값: 빈 배열 (모든 페이지가 기본적으로 생성됨)
generate.cache
- 페이지 생성 시 캐싱을 활성화하거나 비활성화한다. 캐싱을 활성화하면 Nuxt.js는 이미 생성된 페이지를 재사용하여 성능을 향상시킬 수 있다. 캐싱은 동일한 페이지를 여러 번 생성하는 과정을 피하고, 빌드 시간을 단축시킬 수 있다.
- 기본값:
true - 활성화의 의미: 캐싱이 활성화되면, 이미 생성된 페이지를 재사용하여 빌드 시간을 줄이고 서버의 부하를 감소시킬 수 있다. 예를 들어, 페이지를 처음 생성한 후에 동일한 페이지를 다시 생성할 필요가 없기 때문에, 서버의 자원을 효율적으로 사용할 수 있다.
- 비활성화의 의미: 캐싱이 비활성화되면, 매번 페이지를 새로 생성하게 되어 빌드 시간이 늘어날 수 있으며, 서버의 부하가 증가할 수 있다.
generate.crawler
- 사이트 링크를 크롤링하여 자동으로 페이지를 생성한다. 이 설정을 활성화하면 Nuxt.js는 애플리케이션의 모든 링크를 크롤링하여 모든 페이지를 자동으로 찾아내고 생성한다. 크롤링을 통해 페이지가 누락되지 않고 생성되도록 할 수 있다.
- 기본값:
true - 활성화의 의미: 크롤링이 활성화되면 Nuxt.js는 애플리케이션의 링크를 자동으로 따라가며 모든 페이지를 생성한다. 이를 통해 페이지가 동적으로 생성되는 경우에도 모든 경로가 정적으로 생성될 수 있도록 보장한다.
- 비활성화의 의미: 크롤링이 비활성화되면 명시적으로
generate.routes에서 지정한 경로만 생성되며, 다른 경로는 자동으로 생성되지 않는다. 이 경우, 모든 페이지가 자동으로 생성되지 않을 수 있다.
head (Global Page Headers)
head 설정은 애플리케이션의 전역 페이지 헤더를 정의한다. 페이지의 제목, 메타 태그, 링크 및 스크립트 태그를 설정할 수 있다.
head.title: 페이지의 기본 제목을 설정한다.head.htmlAttrs: HTML 태그에 추가할 속성을 설정한다.head.meta: 메타 태그를 배열로 정의한다. SEO 및 기타 메타 정보를 설정하는 데 사용된다.head.link: 링크 태그를 배열로 정의한다. 파비콘이나 외부 스타일 시트를 포함할 때 사용된다.head.script: 스크립트 태그를 배열로 정의한다. 외부 JavaScript 파일을 포함할 때 사용된다.
export default {
head: {
title: 'My Nuxt App',
htmlAttrs: {
lang: 'en'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
],
script: [
{ src: 'https://example.com/script.js', defer: true }
]
}
}
css (Global CSS)
css 설정은 애플리케이션의 모든 페이지에 적용할 전역 CSS 파일을 설정한다. 여러 CSS 파일을 배열로 포함할 수 있다.
export default {
css: [
'~/assets/styles/main.css',
'bootstrap/dist/css/bootstrap.css'
]
}
plugins (Plugins)
plugins 설정은 애플리케이션에서 사용할 플러그인 파일을 등록한다. 플러그인은 애플리케이션의 전역 메서드나 컴포넌트를 추가하는 데 사용된다.
export default {
plugins: [
'~/plugins/axios.js',
'~/plugins/vue-lodash.js'
]
}
components (Automatic Component Import)
Vue 컴포넌트를 자동으로 임포트할지 여부이다.
components: true: 모든 Vue 컴포넌트를 자동으로 임포트한다. 이 설정은 자동으로 컴포넌트를 등록하여 사용할 수 있도록 한다.components: false: 자동 컴포넌트 임포트를 비활성화한다.components: 자동 임포트할 컴포넌트 경로를 배열로 정의한다.
export default {
components: true // 또는 false
}
loading (Loading Indicator)
loading 설정은 페이지 로딩 시 표시할 로딩 바를 설정한다. 로딩 컴포넌트를 커스터마이징 할 수 있다.
export default {
loading: '~/components/Loading.vue'
}
buildModules (Build Modules)
buildModules는 개발 및 빌드 시에만 필요한 모듈을 정의한다. 이 설정은 Nuxt.js 애플리케이션의 빌드 과정에서만 작동하며, 프로덕션 빌드에는 영향을 미치지 않는다. 일반적으로 이곳에는 코드 품질 관리, 스타일 린트, 빌드 도구와 관련된 모듈이 포함된다.
export default {
buildModules: [
'@nuxtjs/eslint-module',
'@nuxtjs/stylelint-module'
]
}
modules (Modules)
modules 설정은 Nuxt.js 애플리케이션에서 사용할 Nuxt 모듈을 등록한다. 이 모듈들은 런타임 시 애플리케이션의 기능을 확장하는 데 사용되며, 비즈니스 로직과 관련된 기능을 추가하거나 애플리케이션의 동작을 조정할 수 있다.
export default {
modules: [
'@nuxtjs/axios',
'@nuxtjs/auth'
]
}
build (Build Configuration)
build 설정은 애플리케이션의 빌드 과정을 구성한다. 다양한 최적화 및 설정을 정의할 수 있다.
export default {
build: {
postcss: {
preset: {
features: {
'custom-properties': false
}
}
},
html: {
minify: {
minifyCSS: process.env.ENV_TYPE === 'product',
minifyJS: process.env.ENV_TYPE === 'product'
}
},
optimization: {
minimize: process.env.ENV_TYPE === 'product'
},
cssSourceMap: process.env.ENV_TYPE === 'development'
}
}
webpackOptimisations (Webpack Optimizations)
웹팩의 최적화 기능을 설정한다.
export default {
webpackOptimisations: {
features: {
imageFileLoader: false
}
}
}
server (Server Configuration)
서버의 호스트 및 포트를 구성한다.
export default {
server: {
host: '0.0.0.0',
port: 3000
}
}
alias (Path Aliases)
코드에서 모듈을 쉽게 가져올 수 있도록 경로 별칭을 설정한다.
import { resolve } from 'path';
export default {
alias: {
'@components': resolve(__dirname, 'components'),
'@assets': resolve(__dirname, 'assets')
}
}
svgSprite (SVG Sprite)
svgSprite 설정은 SVG 아이콘을 스프라이트로 변환하는 데 사용된다. SVG 스프라이트는 여러 SVG 파일을 하나의 파일로 결합하여, 웹 애플리케이션에서 아이콘을 효율적으로 로드하고 관리할 수 있도록 한다. 이 설정을 사용하면 SVG 아이콘을 하나의 스프라이트 파일로 생성하여 페이지 로딩 성능을 개선할 수 있다.
import { resolve } from 'path';
export default {
svgSprite: {
input: resolve(__dirname, 'assets/svg-icons')
}
}
axios (Axios Configuration)
axios.baseURL: Axios의 기본 URL을 설정한다. API 호출 시 기본적으로 사용할 URL을 지정한다.axios.credentials: 쿠키를 포함할지 여부를 설정한다.true로 설정하면 자격 증명(쿠키, HTTP 인증)을 포함한다.axios.progress: Axios 요청 시 프로그레스 바를 표시할지 여부를 설정한다. 기본값은true이다.
export default {
axios: {
baseURL: 'https://api.example.com',
credentials: true,
progress: false
}
}
i18n (Internationalization)
i18n.locales: 지원할 언어와 해당 언어의 파일을 설정한다.i18n.defaultLocale: 기본 언어를 설정한다.i18n.vueI18n: Vue I18n의 설정을 정의한다.fallbackLocale: 언어 파일이 없는 경우 사용할 기본 언어를 설정한다.
i18n.langDir: 언어 파일이 위치한 디렉토리를 설정한다.i18n.vueI18nLoader: Vue I18n의 로더를 사용할지 여부를 설정한다.
export default {
i18n: {
locales: [
{ code: 'en', iso: 'en-US', file: 'en.json' },
{ code: 'fr', iso: 'fr-FR', file: 'fr.json' }
],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en'
},
langDir: 'locales/',
vueI18nLoader: true
}
}
router (Router Configuration)
router 설정은 Nuxt.js 애플리케이션의 라우팅 동작을 커스터마이즈하는 데 사용된다. Nuxt.js는 기본적으로 파일 기반 라우팅 시스템을 제공하지만, router 설정을 통해 추가적인 라우터 기능을 구현하거나 기존 라우팅 설정을 수정할 수 있다.
router.middleware: 라우터에서 사용할 미들웨어를 설정한다.router.base: 애플리케이션의 기본 URL 경로를 설정한다.router.extendRoutes: 라우트 구성을 커스터마이즈한다. 기존 라우트를 수정하거나 추가할 수 있다.
export default {
router: {
middleware: ['auth'],
base: '/app/',
extendRoutes(routes) {
routes.push({
name: 'custom',
path: '/custom',
component: '~/pages/custom.vue'
});
}
}
}
styleResources (Global Style Resources)
styleResources 설정은 Nuxt.js 애플리케이션에서 SCSS와 같은 전역 스타일 리소스를 구성하는 데 사용된다. 이 설정을 통해 모든 Vue 파일에서 공통적으로 사용하는 스타일 변수를, 믹스인, 함수 등을 정의할 수 있다.
export default {
styleResources: {
scss: ['~/assets/styles/variables.scss']
}
}
fontawesome (FontAwesome Configuration)
FontAwesome은 인기 있는 아이콘 세트로, 다양한 아이콘을 애플리케이션에서 사용할 수 있게 해 준다. 이 설정을 통해 FontAwesome 아이콘을 Vue 컴포넌트로 사용하거나, 필요한 아이콘의 종류를 선택할 수 있다.
fontawesome.component: FontAwesome 아이콘을 사용할 Vue 컴포넌트의 이름을 설정한다. 이 컴포넌트를 통해 FontAwesome 아이콘을 Vue 템플릿에서 직접 사용할 수 있다.fontawesome.icons: 사용할 FontAwesome 아이콘의 종류를 설정한다. 이 옵션을 통해 필요한 아이콘 세트를 활성화하거나 비활성화할 수 있다.
설정 예시:
export default {
fontawesome: {
component: 'fa',
icons: {
solid: true,
brands: true
}
}
}
사용 예시:
<template>
<div>
<fa icon="coffee" />
<fa icon="facebook" />
</div>
</template>
<script>
export default {
// 컴포넌트 로직
}
</script>
env (Environment Variables)
애플리케이션에서 사용할 환경 변수를 설정한다. 이 변수들은 애플리케이션에서 process.env를 통해 접근할 수 있다.
export default {
env: {
BASE_URL: 'https://api.example.com'
}
}
proxy (Proxy Configuration)
Nuxt.js 애플리케이션에서 API 호출 시 프록시를 설정하여 외부 API와의 통신을 관리하거나 API 요청 경로를 재작성하는 데 사용된다. 프록시를 설정하면, 클라이언트와 서버 간의 요청을 중개하여 CORS 문제를 해결하거나 API 호출 경로를 단순화할 수 있다.
- 기본 프록시 설정:
- 애플리케이션에서
/api로 시작하는 모든 요청을https://api.example.com으로 전달하고,/api경로를 제거한다.
export default { proxy: [ ['/api', { target: 'https://api.example.com', pathRewrite: { '^/api': '' } }] ] } - 애플리케이션에서
- 다수의 프록시 규칙:
export default { proxy: [ ['/api/v1', { target: 'https://api-v1.example.com', pathRewrite: { '^/api/v1': '' } }], ['/api/v2', { target: 'https://api-v2.example.com', pathRewrite: { '^/api/v2': '' } }] ] }
'Javascript > NuxtJS' 카테고리의 다른 글
| [NuxtJS] Plugin (0) | 2024.08.25 |
|---|---|
| [NuxtJS] 전역 객체 (0) | 2024.08.25 |