🛠️ Nuxt 앱 실행 및 디버깅: 개발 서버와 nuxt.config.ts 이해

프로젝트 파일을 만들고 컴포넌트를 구성했다면, 이제 앱을 구동하고 문제가 발생했을 때 효과적으로 디버깅하는 방법을 알아야 합니다. Nuxt는 개발자 경험(DX)을 극대화하는 강력한 개발 서버와 도구를 제공합니다.

---

1. 💻 개발 서버(Dev Server) 명령어 이해하기

Nuxt 프로젝트를 초기화하면 package.json 파일에 몇 가지 스크립트가 자동 등록됩니다. 이 중 개발에 가장 핵심적인 것은 dev 명령어입니다.

1.1. Nuxt 개발 서버 실행

개발 중 실시간으로 변경 사항을 확인하고 싶다면 이 명령어를 사용합니다.

npm run dev

• 기능: **Hot Module Replacement (HMR)**을 지원하여 코드를 저장하는 즉시 브라우저에 반영합니다. 서버와 클라이언트 코드를 동시에 컴파일하고 실행합니다.
• 기본 포트: 별도 설정이 없으면 **http://localhost:3000**에서 실행됩니다.
• 팁: 만약 3000번 포트가 이미 사용 중이라면, package.json 파일의 dev 명령어에 --port 옵션을 추가하여 다른 포트로 실행할 수 있습니다. (예: nuxt dev --port 4000)

1.2. 앱 빌드 및 실행 명령어 (참고)

개발이 완료된 후 앱을 실제 서비스 환경에 배포하기 위해 사용되는 명령어들입니다.

명령어	목적	결과물
npm run build	앱을 프로덕션 환경에 맞게 최적화하여 빌드	.output/ 폴더에 배포 파일 생성
npm run start	빌드된 앱을 실행 (프로덕션 환경 테스트)	서버에서 앱을 구동
npm run generate	모든 페이지를 정적 HTML 파일로 생성	dist/ 폴더에 SSG 결과물 생성

---

2. ⚙️ Nuxt의 심장: nuxt.config.ts 기본 설정

nuxt.config.ts 파일은 Nuxt 앱의 모든 것을 제어하는 단일 설정 파일입니다. 모듈 등록, 환경 변수 설정, 빌드 최적화 등 모든 구성이 여기서 이루어집니다.

2.1. 기본 구조

파일은 다음과 같이 defineNuxtConfig 헬퍼 함수를 사용하여 객체를 반환합니다.

// nuxt.config.ts

export default defineNuxtConfig({
  // 여기에 설정을 추가합니다.
  modules: [
    // 모듈 등록 예시
  ],
  css: [
    // 전역 CSS 파일 등록 예시
  ]
})

2.2. 실습: Nuxt DevTools 활성화

Nuxt 3/4의 가장 유용한 디버깅 도구 중 하나는 Nuxt DevTools입니다. 이를 활성화하여 개발 경험을 극대화해봅시다.

1. nuxt.config.ts 파일을 엽니다.
2. devtools: { enabled: true } 설정을 추가합니다.

   // nuxt.config.ts
   
   export default defineNuxtConfig({
     // --- Nuxt DevTools 활성화 ---
     devtools: {
       enabled: true 
     }
     // ----------------------------
   })
   

3. 개발 서버를 재시작합니다. (터미널에서 Ctrl + C 후, npm run dev 재실행)

2.3. Nuxt DevTools 사용하기

DevTools가 활성화되면, 브라우저 화면 하단에 **작은 Nuxt 아이콘(⚡️)**이 나타납니다.

• 클릭하여 열기: 아이콘을 클릭하면 전체 화면 디버깅 창이 열립니다.
• 주요 기능:
  • Pages: 현재 라우팅 구조와 각 페이지에 걸린 미들웨어를 시각적으로 보여줍니다.
  • Components: 현재 페이지를 구성하는 모든 컴포넌트의 계층 구조를 보여줍니다.
  • Payload: 서버에서 전달된 데이터와 클라이언트의 상태를 확인하여 Hydration 문제를 디버깅하는 데 유용합니다.

---

3. ✅ 실습 요약 및 다음 단계

명령어/파일	기능	실습 결과
npm run dev	개발 서버 실행 (HMR 지원)	http://localhost:3000에서 실시간 반영 확인
nuxt.config.ts	Nuxt 앱 전역 설정 파일	DevTools 활성화 설정 추가
DevTools	강력한 시각적 디버깅 도구	브라우저 하단 아이콘으로 컴포넌트 및 라우팅 확인

이제 Nuxt 앱을 실행하고 제어할 준비가 완벽하게 되었습니다.