Ch 04. nuxi CLI 활용법

매번 폴더를 찾아 파일을 직접 만드는 것은 번거롭습니다. nuxi CLI를 사용하면 명령어 한 줄로 필요한 파일을 올바른 위치에 바로 생성할 수 있습니다. 자주 쓰는 명령어를 익혀두면 개발 속도가 눈에 띄게 빨라집니다.

파일 생성 명령어

# pages/about.vue 생성npx nuxi add page about# components/TheHeader.vue 생성npx nuxi add component TheHeader# composables/useCounter.ts 생성npx nuxi add composable useCounter

nuxi add 뒤에 타입과 이름을 지정하면 해당 위치에 파일이 자동으로 생성됩니다. 하위 경로도 지원합니다. npx nuxi add page blog/index를 실행하면 pages/blog/index.vue가 만들어집니다.

개발 및 빌드 명령어

# 개발 서버 실행 (package.json 스크립트)npm run dev# 프로덕션 빌드npm run build# 빌드 결과 미리보기 (빌드 후 사용)npm run preview

npm run build를 실행하면 .output/ 폴더에 Nitro 기반의 서버 번들이 생성됩니다. npm run preview는 이 번들을 로컬에서 실행해 실제 배포 환경과 동일한 조건으로 확인할 수 있게 해줍니다.

nuxt.config.ts 기본 구조

프로젝트 루트의 nuxt.config.ts는 Nuxt 전체 동작을 제어하는 설정 파일입니다.

// 수정: nuxt.config.tsexport default defineNuxtConfig({  // 개발 도구 활성화  devtools: { enabled: true },  // 전역 CSS 파일 등록  css: ['~/assets/css/main.css'],  // 런타임 환경 변수  runtimeConfig: {    // 서버에서만 접근 가능    databaseUrl: process.env.DATABASE_URL,    // 클라이언트에서도 접근 가능    public: {      apiBase: process.env.API_BASE ?? '/api',    },  },})

runtimeConfig에서 public 아래에 정의한 값은 클라이언트 코드에서도 useRuntimeConfig()로 접근할 수 있습니다. 비밀 키나 데이터베이스 접속 정보는 반드시 public 바깥에 두어야 서버에서만 읽힙니다.

nuxt.config.ts는 앞으로 모듈을 추가하거나, 빌드 최적화를 설정하거나, Nitro 서버 옵션을 조정할 때 계속 사용하게 됩니다. 지금은 구조를 눈에 익혀두는 것으로 충분합니다.