반응형
Vue를 이미 알고 있다면 Nuxt 3는 마치 “Vue의 확장팩”처럼 느껴질 거예요.
하지만 단순한 확장을 넘어, SSR 기반 SEO 최적화, 파일 기반 라우팅, 정적 사이트 생성(SSG) 같은 고급 기능들을 거의 설정 없이 제공하는 프레임워크랍니다.
✅ Nuxt 3는 왜 쓰나요?
기존 Vue 프로젝트에서는 직접 설정해야 했던 부분들을 Nuxt는 자동으로 해줘요. 예를 들어:
기능VueNuxt
| 라우팅 | vue-router 직접 설정 | 파일 기반 자동 라우팅 |
| SEO 설정 | <head> 직접 구성 | useHead() 제공 |
| SSR 구성 | webpack, express 등 따로 구성 | 기본 내장 |
| 정적 사이트 생성 | 별도 플러그인 필요 | nuxt generate 한 줄이면 끝 |
🧪 Nuxt 3 설치 및 프로젝트 생성
bash
복사편집
npx nuxi init nuxt3-blog cd nuxt3-blog npm install npm run dev
nuxi는 Nuxt 3 전용 CLI 도구예요. create-nuxt-app과는 달라요!
🗂 Nuxt 프로젝트 폴더 구조
Nuxt는 특별한 폴더 구조를 인식해서 동작해요. 가장 핵심적인 폴더는 다음과 같아요:
폴더명설명
| pages/ | 라우팅을 자동으로 생성해주는 Vue 파일들 |
| layouts/ | 전체 페이지에 공통 적용되는 레이아웃들 |
| components/ | 일반 Vue 컴포넌트들 |
| plugins/ | 전역으로 사용할 플러그인 등록 |
| composables/ | 커스텀 훅 (useXXX) 정의 폴더 |
| middleware/ | 라우팅 중간에 동작하는 로직 등록 |
| app.vue | 앱의 최상위 레이아웃 |
| nuxt.config.ts | 설정 파일 (빌드, 라우팅, 모듈 등) |
🧩 Nuxt는 Vite를 씁니다
Nuxt 3는 Vite를 기본 빌드 도구로 사용해요. 덕분에 빠른 핫 리로드, 모듈 기반 빌드, 빠른 개발 환경을 경험할 수 있어요.
별도로 설정하지 않아도 Vite가 기본 적용돼 있습니다.
⚙️ nuxt.config.ts 기본 구조
Nuxt 설정은 nuxt.config.ts 파일에서 Typescript로 설정할 수 있어요. 예시:
ts
복사편집
export default defineNuxtConfig({ ssr: true, modules: [], css: [], runtimeConfig: { public: { apiBase: '/api', }, }, });
🏁 개발 서버 실행
bash
복사편집
npm run dev
localhost:3000으로 접속하면 Nuxt 앱이 동작합니다! 🎉
✍️ 마무리
이제 Nuxt 3 프로젝트가 준비되었어요.
다음 글에서는 라우팅 시스템을 다루면서, Nuxt 3의 자동 라우팅이 얼마나 강력한지 알려드릴게요.
SEO 최적화도 함께 챙겨가요! 😉
반응형
댓글