🗺️ Nuxt의 파일 기반 마법: 자동 라우팅 및 컴포넌트 자동화 실습

 

Nuxt 개발의 진정한 시작은 자동화된 개발 경험(DX)을 체감하는 것입니다. 라우팅 설정 파일(router.js 같은)을 작성할 필요도 없고, 컴포넌트 임포트 문을 길게 쓸 필요도 없습니다.

이번 시간에는 페이지 3개와 공통 헤더 컴포넌트를 직접 만들면서 Nuxt가 얼마나 빠르게 개발을 시작할 수 있게 하는지 경험해봅시다.

---

1. 📂 실습 1: 파일 시스템 라우팅 (pages/) 바로 경험하기

Nuxt는 pages/ 폴더 내에 .vue 파일을 생성하는 것만으로 자동으로 URL 경로를 연결해줍니다.

1.1. 기본 페이지 3개 생성

프로젝트 루트의 pages 디렉토리에서 다음 3개의 파일을 생성합니다.

파일 경로	URL 경로	목적
pages/index.vue	/	홈 (메인) 페이지
pages/about.vue	/about	회사 소개 페이지
pages/products.vue	/products	제품 목록 페이지

1. pages/index.vue (홈):

   <template>
     <h1>홈 페이지 입니다.</h1>
     <p>다른 페이지로 이동할 준비가 되었습니다.</p>
   </template>
   

2. pages/about.vue (소개):

   <template>
     <h2>회사 소개</h2>
     <p>우리는 Nuxt로 빠르고 쉽게 웹사이트를 만듭니다.</p>
   </template>
   

3. pages/products.vue (제품):

   <template>
     <h2>제품 목록</h2>
     <ul>
       <li>Nuxt 템플릿 A</li>
       <li>Nuxt 모듈 B</li>
     </ul>
   </template>
   

1.2. 즉시 확인

서버가 실행 중이라면 (npm run dev), 브라우저 주소창에 다음 경로들을 입력하여 즉시 확인해 보세요.

• http://localhost:3000/about
• http://localhost:3000/products

결과 강조: 라우팅 설정 없이 파일만 만들었는데, Nuxt가 자동으로 경로를 인식합니다!

---

2. 🧱 실습 2: 공통 헤더 컴포넌트 자동 임포트

이제 세 페이지를 오갈 수 있도록 공통 헤더 컴포넌트를 만들고, Nuxt의 자동 임포트 기능을 사용해 봅시다.

2.1. 헤더 컴포넌트 생성

1. 프로젝트 루트의 components 디렉토리에 AppHeader.vue 파일을 만듭니다.
2. <NuxtLink> 태그를 사용하여 페이지 간 이동 링크를 만듭니다. (Vue의 <router-link>와 같습니다.)

   <template>
     <header style="padding: 1rem; background-color: #f0f0f0; border-bottom: 1px solid #ccc;">
       <NuxtLink to="/" style="margin-right: 15px;">홈</NuxtLink>
       <NuxtLink to="/about" style="margin-right: 15px;">소개</NuxtLink>
       <NuxtLink to="/products">제품</NuxtLink>
     </header>
   </template>
   

2.2. 자동 임포트로 모든 페이지에 적용

components 폴더에 생성된 컴포넌트는 모든 페이지에서 import 구문 없이 바로 사용할 수 있습니다.

1. pages/index.vue, pages/about.vue, pages/products.vue 세 파일 모두를 엽니다.
2. 각 파일의 <template> 블록 맨 위에 <AppHeader /> 태그를 추가합니다.

   <template>
     <div>
       <AppHeader /> <h1>홈 페이지 입니다.</h1>
       <p>다른 페이지로 이동할 준비가 되었습니다.</p>
     </div>
   </template>
   <script setup>
     // 스크립트 블록은 비워둡니다.
   </script>
   

2.3. 즉시 확인 및 결과 분석

브라우저에서 홈 페이지에 접속한 뒤, 헤더에 있는 링크들을 클릭해보세요.

• 세 페이지 모두에 헤더가 표시되며, 링크를 클릭할 때마다 페이지가 즉시 전환됩니다.
• 우리는 단 하나의 import 구문도 작성하지 않았습니다!

핵심: Nuxt가 components/ 폴더를 스캔하여 컴포넌트를 전역적으로 사용할 수 있도록 자동 등록했기 때문에 가능한 일입니다.

---

✅ 실습 요약 및 다음 단계

기능	실습 파일 경로	Nuxt의 자동화
자동 라우팅	pages/*.vue	파일명 = URL 경로
컴포넌트 자동화	components/AppHeader.vue	import 없이 태그 사용 가능

Nuxt의 생산성이 얼마나 뛰어난지 직접 확인하셨습니다.