Nuxt.js의 기초부터 심화 내용까지 차근차근 알아보겠습니다. 오늘은 Nuxt.js가 무엇인지, 왜 사용해야 하는지, 그리고 개발 환경을 어떻게 설정하는지에 대해 포스팅합니다.
Nuxt 최신 버전은 4입니다. (2025.07 기준) ver3과 ver4에 대해서 함께 다루겠습니다만, 가급적 최신 버전에 맞춰 설명하도록 하겠습니다.
Nuxt.js란 무엇인가?
Nuxt.js는 Vue.js 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 프레임워크입니다. Vue.js의 장점을 그대로 가져오면서 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 자동 라우팅, 코드 분할 등 다양한 기능을 제공합니다.
간단히 말해, Nuxt.js는 Vue.js 개발자들이 더 생산적으로 일할 수 있도록 도와주는 도구라고 생각하시면 됩니다.
Nuxt.js의 주요 장점
- 서버 사이드 렌더링(SSR): 초기 페이지 로딩 속도 향상 및 SEO 최적화
- 정적 사이트 생성(SSG): 빌드 시점에 HTML 파일 생성으로 빠른 페이지 제공
- 자동 라우팅: 파일 구조 기반의 직관적인 라우팅 시스템
- 코드 분할: 페이지별 자동 코드 분할로 성능 최적화
- 개발 경험 향상: Hot Module Replacement, 에러 처리 등 개발자 친화적 기능
- 모듈 시스템: 다양한 기능을 쉽게 추가할 수 있는 모듈 생태계
렌더링 모드 이해하기
Nuxt.js를 사용하기 전에 웹 애플리케이션의 다양한 렌더링 방식을 이해하는 것이 중요합니다.
1. 서버 사이드 렌더링(SSR)
서버 사이드 렌더링은 사용자가 페이지를 요청할 때마다 서버에서 HTML을 생성하여 전달하는 방식입니다.
- 장점: 초기 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리합니다.
- 단점: 서버 부하가 있을 수 있고, 모든 요청마다 HTML을 생성해야 합니다.
- 적합한 경우: 콘텐츠가 자주 변경되는 동적 웹사이트, SEO가 중요한 사이트
2. 정적 사이트 생성(SSG)
정적 사이트 생성은 빌드 시점에 모든 페이지의 HTML을 미리 생성하는 방식입니다.
- 장점: 매우 빠른 페이지 로딩 속도, 서버 부하 없음, 높은 보안성
- 단점: 콘텐츠 업데이트 시 재빌드 필요
- 적합한 경우: 블로그, 문서 사이트, 마케팅 페이지 등 자주 변경되지 않는 콘텐츠
3. 클라이언트 사이드 렌더링(CSR)
클라이언트 사이드 렌더링은 브라우저에서 JavaScript를 실행하여 페이지를 렌더링하는 방식입니다.
- 장점: 서버 부하가 적고, SPA(Single Page Application) 경험 제공
- 단점: 초기 로딩 시간이 길고, SEO에 불리할 수 있음
- 적합한 경우: 대시보드, 관리자 패널 등 SEO가 중요하지 않은 내부 애플리케이션
Nuxt.js의 강점은 이 모든 렌더링 방식을 하나의 프레임워크에서 지원한다는 점입니다. 프로젝트의 요구사항에 따라 적절한 렌더링 모드를 선택할 수 있습니다.
SSR 과 CSR에 대한 좀더 상세한 비교는 아래 블로그 포스트가 정리가 잘 되어있어 공유합니다. 참고바랍니다.
참고 링크: https://inblog.ai/ko/blog/ssr-vs-csr
개발 환경 설정하기
이제 Nuxt.js 개발을 위한 환경을 설정해 보겠습니다.
1. Node.js 설치
Nuxt.js는 Node.js 환경에서 실행되므로, 먼저 Node.js를 설치해야 합니다. Node.js 공식 웹사이트에서 LTS(Long Term Support) 버전을 다운로드하여 설치하세요.
설치가 완료되면 터미널에서 다음 명령어로 Node.js와 npm이 제대로 설치되었는지 확인합니다.
node -v
npm -v
2. 패키지 매니저 선택
Nuxt.js 프로젝트를 관리하기 위해 npm, yarn, pnpm 중 하나를 선택할 수 있습니다. 각각의 특징을 간략히 살펴보겠습니다.
- npm: Node.js와 함께 기본으로 설치되는 패키지 매니저
- yarn: Facebook에서 개발한 패키지 매니저로, 속도와 안정성 측면에서 개선됨
- pnpm: 디스크 공간을 효율적으로 사용하고 설치 속도가 빠른 패키지 매니저
yarn이나 pnpm을 사용하고 싶다면 다음 명령어로 설치할 수 있습니다.
# yarn 설치
npm install -g yarn
# pnpm 설치
npm install -g pnpm
3. Nuxt.js 프로젝트 생성하기
이제 첫 번째 Nuxt.js 프로젝트를 생성해 보겠습니다. 터미널에서 다음 명령어를 실행합니다.
cli를 통한 프로젝트 생성 중에 최신은 다음과 같이 진행합니다.
#최신 버전의 Nuxt 프로젝트 생성
npm create nuxt@latest
설치 버전을 표시하고, 진행을 묻습니다.
프로젝트 명을 입력합니다.
package 매니저를 무엇으로 선택할지 묻습니다.
프로젝트에서 발생된 로그를 사용할 수 있도록 허용하는 프로그램을 허락할지 선택합니다.
git을 이용한 관리를 할 것인지 묻습니다.
공식 모듈에 대한 추가 설치를 묻습니다. 처음에 모든 모듈을 다 설치할 필요는 없습니다만, eslint, prettier 정도는 필요하다고 생각됩니다. 코드 품질을 유지하고 일관된 코딩 스타일을 적용하는 데 도움을 줍니다. 설치할 모듈을 스페이스바로 선택합니다.
@nuxt별 추가 모듈에 대해서는 다음 기회에 포스팅하여 설명하도록 하겠습니다.
완료되었습니다. 생성한 프로젝트 폴더로 진입하여 npm run dev로 실행하라는 안내를 보여줍니다.
이 순서 이외에
# npm 사용
npm create nuxt@latest
# yarn 사용
yarn create nuxt@latest
# pnpm 사용
pnpm create nuxt@latest
#bun 사용
bun create nuxt@latest
#deno 사용
deno -A npm:create-nuxt@latest
위 명령어를 실행하면 과정에서 설정한 ‘project-name’의 디렉토리가 생성되고, 기본적인 Nuxt.js 프로젝트 구조가 설정됩니다.
4. 의존성 패키지 설치 (선택)
프로젝트 디렉토리 내에서 관련 패키지를 사용되었다면, 패키지 설치를 다시 한번 설치해야 할 때가 있습니다. 이때는 아래와 같은 방식으로 패키지들을 설치할 수 있습니다.
#생성한 프로젝트 디렉토리로 이동 합니다.
cd my-nuxt-app
# npm 사용
npm install
# yarn 사용
yarn install
# pnpm 사용
pnpm install
5. 개발 서버 실행
모든 설치가 완료되면 개발 서버를 실행할 수 있습니다.
# npm 사용
npm run dev
# yarn 사용
yarn dev
# pnpm 사용
pnpm dev
개발 서버가 성공적으로 실행되면 터미널에 로컬 URL(일반적으로 http://localhost:3000)이 표시됩니다. 브라우저에서 이 URL을 열어 Nuxt.js 애플리케이션이 실행되는 것을 확인할 수 있습니다.
Nuxt.js 프로젝트 구조 살펴보기
일반적으로 Nuxt.js Ver4.x 프로젝트를 생성하면 다음과 같은 기본 디렉토리 구조가 만들어집니다.
my-nuxt-app/
├── .nuxt/ # 빌드된 파일들 (자동 생성)
├── app/app.vue # 앱의 진입점
├── app/assets/ # 컴파일이 필요한 자원 (SCSS, JS 등)
├── app/components/ # Vue 컴포넌트
├── app/composables/ # 컴포저블 함수
├── app/layouts/ # 레이아웃 컴포넌트
├── app/middleware/ # 미들웨어 함수
├── app/pages/ # 라우팅을 위한 페이지 컴포넌트
├── app/plugins/ # Vue 플러그인
├── content/ # 콘텐츠 파일 (Markdown, JSON 등)
├── server/ # 서버 API 엔드포인트
├── public/ # 정적 파일 (로봇, 파비콘 등)
├── nuxt.config.ts # Nuxt 구성 파일
├── package.json # 프로젝트 의존성 및 스크립트
└── tsconfig.json # TypeScript 구성 (선택적)
각 디렉토리의 역할을 간략히 살펴보겠습니다.
- app.vue: 애플리케이션의 주요 진입점입니다. 기본적으로
<NuxtPage />컴포넌트를 포함하여 페이지를 렌더링합니다. - app/pages/: 이 디렉토리에 있는 Vue 파일들은 자동으로 라우트로 변환됩니다. 파일 기반 라우팅 시스템의 핵심입니다.
- app/components/: 재사용 가능한 Vue 컴포넌트를 저장하는 곳입니다. Nuxt는 자동으로 이 디렉토리의 컴포넌트를 임포트합니다.
- app/assets/: SCSS, 이미지 등 컴파일이 필요한 자원을 저장합니다.
- public/: 로봇, 파비콘 등 정적 파일을 저장합니다. 이 디렉토리의 파일은 그대로 서버 루트에 제공됩니다.
- nuxt.config.ts: Nuxt.js의 설정 파일로, 전역 설정을 정의할 수 있습니다.
간단한 Nuxt.js 애플리케이션 만들기
이제 기본적인 Nuxt.js 애플리케이션을 만들어 보겠습니다. 먼저 app.vue 파일을 다음과 같이 수정해 보세요.
<template>
<div>
<h1>Welcome to My Nuxt App!</h1>
<NuxtPage />
</div>
</template>
그리고 pages 디렉토리에 index.vue 파일을 생성하고 다음 내용을 추가합니다.
<template>
<div>
<h2>Home Page</h2>
<p>This is my first Nuxt.js application!</p>
</div>
</template>이제 개발 서버를 실행하면 간단한 Nuxt.js 어플리케이션을 볼 수 있습니다.
마무리 및 다음 포스트 소개
오늘은 Nuxt.js의 기본 개념과 개발 환경 설정 방법에 대해 알아보았습니다. Nuxt.js가 제공하는 다양한 렌더링 모드와 프로젝트 구조에 대해 이해하셨을 것입니다.
다음 포스트에서는 페이지와 라우팅 시스템에 대해 자세히 알아보겠습니다. Nuxt.js의 파일 기반 라우팅 시스템을 이해하고, 동적 라우팅 및 중첩 라우팅을 구현하는 방법을 포스팅할 예정입니다. pages 디렉토리 구조, <NuxtLink> 컴포넌트 활용, useRoute 컴포저블 사용 등 실용적인 내용을 다룰 것입니다.
답글 남기기