Nuxt 3로 블로그 만들기 #1 – Nuxt는 도대체 뭘까?

Vue는 알겠는데... Nuxt는 뭔가요?

Vue로 웹앱을 만들다 보면 어느 순간 이런 생각이 들어요.

"라우팅을 자동으로 해주면 좋겠는데..."
"서버도 같이 다룰 수 있으면 좋겠는데..."
"정적 사이트로도, SSR도 하고 싶고..."

이런 고민을 해결해주는 게 바로 Nuxt.js입니다.
Nuxt는 Vue를 기반으로 한 프레임워크로, Vue를 더 편하고 더 강력하게 쓸 수 있도록 도와줍니다.

---

💡 Nuxt 3는 뭐가 다른가요?

Nuxt는 현재 Nuxt 3로 진화했고, 내부적으로 많은 변화가 있었습니다.
Vue 3, Vite, Nitro 등 최신 기술을 품고 훨씬 가벼워지고 빨라졌죠.

Nuxt 2Nuxt 3

Vue 2 기반	Vue 3 기반
Webpack 사용	Vite 사용
서버 기능 제한	API, Middleware 등 백엔드 내장
Composition API 불안정	완전 지원 (setup 기반 개발 가능)

---

📦 Nuxt 3 설치하기 (진짜 5분 컷)

bash

복사편집

npx nuxi init my-blog cd my-blog npm install npm run dev

nuxi는 Nuxt 3의 전용 CLI 도구입니다.

브라우저에서 http://localhost:3000으로 접속하면
"Welcome to Nuxt 3"라는 화면이 반겨줄 거예요!

---

📂 Nuxt 3의 기본 폴더 구조

Nuxt는 폴더 자체가 설계도입니다.
디렉토리만 잘 알아도 개발 흐름이 머리에 들어옵니다.

 

---

🔍 Nuxt 3로 가능한 것들

✅ 일반 Vue 앱 (SPA)
✅ SSR 기반 SEO 최적화
✅ 정적 사이트 생성 (SSG)
✅ 서버리스 API (예: /api/posts)
✅ 서버 미들웨어 (Auth 등)

즉, Nuxt 하나만으로 프론트 + 백엔드 + 배포까지 모두 할 수 있다는 얘기입니다.

---

⚙️ 개발 환경도 같이 세팅해요

• VSCode 확장 추천:
  • Volar (Vue 3용)
  • ESLint
  • Prettier
• Node.js는 18버전 이상 권장
• Git 초기화 + .gitignore 추가
• 패키지 설치 (선택)

bash

복사편집

npm install -D eslint prettier @nuxtjs/eslint-config

---

🧠 마무리 – Nuxt는 시작이 반입니다

오늘은 Nuxt 3의 개념과 기본 구조, 설치까지 한 번에 살펴봤습니다.

👀 요약하자면:

• Nuxt는 Vue를 확장해주는 프레임워크다.
• Nuxt 3는 Vue 3 기반으로 더 빠르고 강력해졌다.
• nuxi init만으로 바로 프로젝트를 만들 수 있다.
• 프론트 + 백엔드 개발을 한 번에 처리할 수 있다.