NuxtConfiguration을 Nuxt.js 프로젝트의 전반적인 설정을 관리하는 객체입니다. nuxt.config.js 파일을 통해 관리됩니다. 아래에서 주요 설정 항목들이 무엇이 있는지 정리해 보겠습니다.
주요 설정 항목
target
애플리케이션의 배포 방식을 설정합니다. 애플리케이션 배포 방식은 아래 두 가지가 있습니다.
- server: 디폴트 설정으로, 서버에서 SSR을 지원합니다.
- static: 정적 사이트 생성(SSG)을 위한 설정입니다.
ssr
서버사이드 렌더링 여부를 true/false로 결정합니다.
head
SEO 및 HTML 헤드를 설정합니다. head 옵션을 사용하면 meta 태그, title, 외부 스크립트 및 스타일시트 등을 설정할 수 있습니다.
export default {
head: {
title: 'My Nuxt App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'My awesome Nuxt.js app' }
],
link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
}
}위와 같이 설정하면 아래와 같이 head 태그가 작성됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="My awesome Nuxt.js app">
<title>My Nuxt App</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico">
</head>
<body>
<!-- 본문 내용 -->
</body>
</html>css
css 파일을 전역적으로 적용하는 설정입니다. 아래와 같이 설정할 수 있습니다.
export default {
css: [
'~/assets/css/main.css',
'bulma/css/bulma.css'
]
}plugin
플러그인을 통해 Vue 애플리케이션에 추가 기능을 제공할 수 있습니다. 예를 들어, 전역으로 사용하는 라이브러리나 플러그인을 설정할 수 있습니다.
plugins: [
viteCompression({
threshold: 1400
}),
VueTypeImports() as Plugin
],위처럼, 1440 파이트 이상의 파일만 압축된다는 vite 설정이나, 타입스크립트 지원을 강화하기 위한 설정도 가능합니다.
modules
Nuxt는 다양한 모듈을 지원하며, 모듈은 기본 기능을 확장하거나 통합하는 데 사용됩니다. 예를 들어, Axios, PWA, SEO 모듈 등을 설치해 프로젝트에서 사용할 수 있습니다.
build
Webpack과 관련된 다양한 빌드 옵션을 설정할 수 있습니다. 여기서 성능 최적화, 플러그인 추가, 로더 설정 등을 제어할 수 있습니다.
build: {
target: ['es2015', 'chrome56', 'safari12']
}위와 같이 작성하면,
- 자바스크립트의 ECMAScript 2015(ES6) 버전을 타겟으로 지정
- Google Chrome 브라우저의 버전 56을 타겟으로 지정
- Safari 브라우저의 버전 12를 타겟으로 지정
이런 의미가 있습니다.
loading
페이지 전환 시 노출될 로딩 바를 설정합니다. loading 옵션은 Nuxt.js 애플리케이션에서 페이지 전환 시 표시되는 로딩 바 또는 로딩 컴포넌트를 제어합니다. 이 설정은 페이지가 전환될 때만 적용되며, SPA(싱글 페이지 애플리케이션) 초기 로딩과는 관계가 없습니다.
spa 초기 로딩과 관련된 설정은 spaLoadingTemplate을 통해 지정할 수 있으며, 최초로 애플리케이션이 로드되는 동안 사용자에게 보여줄 HTML 템플릿을 지정하는 옵션입니다.
router
기본 라우팅 설정 외에도 미들웨어 추가, 링크 활성화 클래스 설정 등과 같은 고급 라우터 설정을 할 수 있습니다.
export default {
router: {
middleware: ['auth'], // 모든 라우트에 미들웨어 적용
linkActiveClass: 'active-link', // 활성화된 링크의 클래스 이름
}
}env
Nuxt.js는 환경 변수를 사용할 수 있도록 지원합니다. 이를 통해 환경에 따라 다른 값을 제공할 수 있습니다.
export default {
env: {
baseUrl: process.env.BASE_URL || 'http://localhost:3000'
}
}runtimeconfig
실무 코드에 runtimeconfig 설정이 있어, runtimeconfig도 무엇인지 정리하겠습니다.
export default {
runtimeConfig: {
// 서버에서만 사용할 수 있는 비공개 변수
apiSecret: 'my-secret-token',
// 공개적으로 클라이언트에서도 사용할 수 있는 변수
public: {
apiBaseUrl: 'https://api.example.com'
}
}
}-
비공개 설정 (apiSecret)
runtimeConfig의 최상위 속성은 서버에서만 사용할 수 있습니다. 예를 들어, API 시크릿 토큰과 같은 민감한 정보를 설정할 때 사용합니다. 이 값들은 클라이언트 측으로는 절대 전달되지 않습니다. -
공개 설정 (public)
public 섹션에 설정된 값은 서버와 클라이언트 모두에서 접근할 수 있습니다. 클라이언트 쪽에서 API 호출 등에 사용할 URL이나, 클라이언트에서 사용하는 다른 환경 변수를 설정할 수 있습니다.
