Ch 01. 파일 기반 라우팅 이해하기

웹 프레임워크를 처음 배울 때 가장 번거로운 작업 중 하나가 라우터 설정입니다. "이 URL로 들어오면 저 컴포넌트를 보여줘"라는 규칙을 일일이 코드로 적어야 하죠. Nuxt.js는 이 과정을 통째로 없애버렸습니다. pages/ 폴더 안에 파일을 놓으면, 그 파일 경로가 곧 URL이 됩니다.

파일과 URL의 1:1 매핑

규칙은 단순합니다. pages/ 폴더를 루트(/)로 생각하고, 파일명이 URL 경로가 됩니다.

폴더 안에 index.vue를 두면 해당 폴더 경로 자체가 URL이 됩니다. pages/blog/index.vue는 /blog로 접근하는 방식입니다.

vue-router와의 관계

Nuxt.js는 내부적으로 Vue의 공식 라우터인 vue-router를 사용합니다. 직접 router/index.ts 파일을 만들고 경로를 등록할 필요가 없을 뿐, 실제 동작은 vue-router가 처리합니다. Nuxt.js가 빌드 시점에 pages/ 폴더를 스캔해서 vue-router 설정을 자동으로 생성해주는 방식입니다.

덕분에 useRoute(), useRouter() 같은 vue-router의 Composable을 그대로 사용할 수 있습니다.

NuxtPage 컴포넌트

레이아웃이나 app.vue에서 현재 경로에 해당하는 페이지 컴포넌트를 렌더링하려면 <NuxtPage /> 컴포넌트를 사용합니다. vue-router의 <RouterView />와 동일한 역할이지만, Nuxt.js의 페이지 전환 애니메이션이나 definePageMeta() 설정을 함께 처리합니다.

<!-- app.vue -->
<template>
  <div>
    <NuxtPage />
  </div>
</template>

첫 번째 페이지 만들기

홈 페이지를 직접 만들어보겠습니다. pages/ 폴더가 없다면 프로젝트 루트에 새로 만들고, 그 안에 index.vue 파일을 생성합니다.

<!-- pages/index.vue -->
<template>
  <div>
    <h1>홈 페이지</h1>
    <p>Nuxt 3에 오신 것을 환영합니다.</p>
  </div>
</template>

파일을 저장하고 브라우저에서 /로 접속하면 바로 이 컴포넌트가 표시됩니다. 별도의 라우터 등록 없이 파일을 만드는 것만으로 페이지가 완성됩니다.

소개 페이지도 추가해봅니다. pages/about.vue 파일을 생성하면 /about URL이 자동으로 연결됩니다. 파일 기반 라우팅의 핵심은 이처럼 폴더 구조 자체가 URL 설계가 된다는 점입니다. 프로젝트가 커져도 pages/ 폴더를 보면 어떤 경로가 존재하는지 한눈에 파악할 수 있습니다.