🚀 10분 만에 Nuxt 프로젝트 초고속 시작하기

안녕하세요! Nuxt.js는 Vue.js를 기반으로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG) 등 복잡한 설정을 자동화해주는 프레임워크입니다. 이 글을 통해 단 10분 만에 Nuxt 개발 환경을 구축하고, 그 마법 같은 자동화 기능을 바로 경험해봅시다.

---

1. ⏱️ 5분: 필수 준비물 확인 및 프로젝트 생성

가장 먼저 필요한 준비물과 프로젝트 생성 명령어입니다. Nuxt는 Nuxi라는 공식 CLI 도구를 통해 쉽게 프로젝트를 관리할 수 있습니다.

1.1. 준비물 체크

• Node.js: 버전 18 이상 (터미널에 node -v 입력하여 확인)
• 터미널/명령 프롬프트: (VS Code 내장 터미널 사용 추천)
• 코드 에디터: VS Code

1.2. Nuxi로 프로젝트 생성

프로젝트를 만들고 싶은 경로로 이동한 뒤, 터미널에 다음 명령어를 입력하세요.

1. Nuxt 프로젝트 초기화:
   nuxt-quickstart 대신 원하는 프로젝트 이름을 지정할 수 있습니다.

   npx nuxi init nuxt-quickstart
   

   
   프로젝트 폴더로 이동:

   cd nuxt-quickstart
   

2. 의존성 패키지 설치:

   npm install
   

1.3. 개발 서버 실행

설치가 완료되면, 다음 명령어로 개발 서버를 실행합니다.

npm run dev

터미널에 http://localhost:3000과 같은 주소가 뜨면 성공입니다! 브라우저로 접속해 Nuxt의 환영 페이지를 확인해보세요.

---

2. 🗺️ 3분: 자동 라우팅 실습으로 Nuxt 마법 경험하기

이제 Nuxt의 가장 강력한 기능 중 하나인 파일 기반 자동 라우팅을 체험해봅시다.

2.1. 페이지 폴더 구조 이해

Nuxt는 프로젝트 루트에 있는 pages/ 디렉토리 구조를 그대로 따라 라우팅을 자동으로 생성합니다.

파일 경로	브라우저 접속 경로
pages/index.vue	/ (홈)
pages/about.vue	/about

2.2. 실습: 새로운 페이지 만들기

1. 프로젝트를 VS Code로 열고 pages 폴더 안에 services.vue 파일을 새로 만듭니다.
2. services.vue 파일에 다음과 같이 내용을 추가합니다.
   

   <template>
     <div>
       <h1>우리의 서비스</h1>
       <p>이 페이지는 pages/services.vue 파일만 만들면 자동으로 라우팅됩니다!</p>
     </div>
   </template>
   

3. 별도의 설정 없이 브라우저에서 http://localhost:3000/services 로 접속해 보세요. 페이지가 즉시 나타나는 것을 확인할 수 있습니다!

---

3. 🧱 2분: 컴포넌트 자동 임포트로 생산성 높이기

Vue 개발 시 번거로운 작업 중 하나는 컴포넌트를 사용할 때마다 import 구문을 작성하는 것입니다. Nuxt는 이마저도 자동으로 처리해줍니다!

3.1. 컴포넌트 생성

1. components 폴더 안에 AppHeader.vue 파일을 새로 만듭니다.
2. AppHeader.vue 파일에 다음과 같이 네비게이션 코드를 추가합니다.

   <template>
     <header style="padding: 1rem; background-color: #333; color: white;">
       <NuxtLink to="/" style="color: white; margin-right: 15px;">홈</NuxtLink>
       <NuxtLink to="/services" style="color: white;">서비스</NuxtLink>
     </header>
   </template>
   

3.2. 자동 임포트 사용

이제 이 <AppHeader>를 메인 페이지에 추가해보겠습니다.

1. pages/index.vue 파일을 엽니다.
2. import AppHeader from '...' 같은 구문 없이 바로 <AppHeader /> 태그를 사용합니다.  

    

   <template>
     <div>
       <AppHeader /> 
       <h1>안녕하세요, Nuxt 홈입니다!</h1>
       <p>환영합니다. 이 모든 설정이 단 10분 만에 완료되었습니다!</p>
     </div>
   </template>
   

3. 브라우저를 확인하면 홈 페이지 상단에 헤더가 나타나며, 헤더의 링크를 통해 방금 만든 /services 페이지로 이동할 수 있습니다.

---

✅ 10분 완료! 첫 번째 여정을 마치며

단 10분 만에 Nuxt 개발 환경을 구축하고, 자동 라우팅과 컴포넌트 자동 임포트라는 두 가지 핵심 생산성 기능을 경험했습니다.