Nuxt 4 소개 및 핵심 아키텍처
Nuxt는 Vue.js를 기반으로 웹 애플리케이션을 직관적이고 강력하게 만들 수 있도록 도와주는 풀스택 프레임워크입니다. 특히 Nuxt 4 버전부터는 더욱 진보된 아키텍처와 새로운 폴더 구조를 도입하여 개발자 경험(DX)을 극대화했습니다.
Vue.js 단독으로 사용할 때 겪는 초기 로딩 지연(SPA의 단점)과 검색엔진 최적화(SEO) 문제를 서버 사이드 렌더링(SSR)을 통해 완벽하게 해결해 줍니다.
💡 알아두세요: Nuxt 4는 설정 파일 조작 없이(Zero-config) TypeScript를 즉시 지원하며, 컴포넌트나 내장 함수들을 파일 상단에
import 할 필요 없이 자동 임포트(Auto-imports)하여 개발 생산성을 비약적으로 높여줍니다.
<!-- ==========================================
// 📂 nuxt.config.ts (Nuxt 4 환경 설정 파일)
// ⚠️ 주의: 실제 .ts 파일에서는 <script> 태그를 작성하지 않습니다.
// ========================================== -->
<script>
// Nuxt 4의 루트 디렉토리에 위치하는 핵심 설정 파일입니다.
export default defineNuxtConfig({
// 1. Nuxt 4의 핵심! 새로운 폴더 구조 호환성을 위한 설정
// 향후 기본값이 될 예정이나 명시적으로 지정할 수 있습니다.
future: {
compatibilityVersion: 4,
},
// 2. 개발 도구 활성화 (브라우저 하단에 강력한 DevTools가 생성됨)
devtools: { enabled: true },
// 3. 환경 변수 관리 (프라이빗 토큰과 퍼블릭 설정 분리)
runtimeConfig: {
// 여기 적힌 값은 서버(SSR) 환경에서만 접근 가능합니다. (보안 유지)
apiSecretKey: process.env.NUXT_API_SECRET_KEY || 'default-secret',
// public 안에 적힌 값은 클라이언트(브라우저)에서도 접근 가능합니다.
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
}
}
})
</script>