Week 2 · 컴포넌트와 빌드타임 데이터 Day 12 / 42

Astro의 파일 기반 라우팅

페이지 주소가 곧 폴더 구조입니다

10초 핵심 요약

src/pages/ 안 파일 하나하나가 그대로 웹사이트 주소(URL) 하나가 됩니다.
글마다 페이지가 필요할 땐 [slug].astro 같은 동적 경로를 하나 만들면, 빌드 시 데이터 개수만큼 페이지가 자동 생성됩니다.
이 방식은 서버가 요청마다 페이지를 만드는 게 아니라, 빌드할 때 전부 미리 만들어 둡니다 (Astro static 모드).

폴더가 곧 주소

많은 프레임워크가 라우팅 설정 파일을 따로 두지만, Astro는 파일 기반 라우팅을 씁니다 — src/pages/ 폴더 구조를 그대로 주소로 쓰는 방식입니다. 파일을 만드는 순간 그 페이지가 생깁니다.

    src/pages/index.astro   // → yoursite.com/

    src/pages/about.astro   // → yoursite.com/about

    src/pages/blog/index.astro   // → yoursite.com/blog

파일 하나 = 페이지 하나. 라우팅 설정을 따로 적을 필요가 없습니다.

글마다 다른 주소 — 동적 경로

블로그 글이 100개면 페이지도 100개 필요합니다. 이걸 100개 파일로 손수 만들 수는 없으니, 대괄호 이름의 파일 하나로 전부 처리합니다.

    // src/pages/blog/[slug].astro

    ---

    export function getStaticPaths() {

      const posts = [

        { slug: 'first-post', title: '첫 번째 글' },

        { slug: 'second-post', title: '두 번째 글' },

      ];

      return posts.map((post) => ({

        params: { slug: post.slug }, // URL의 [slug] 자리

        props: { post }, // 페이지 안에서 쓸 데이터

      }));

    }

    const { post } = Astro.props;

    ---

    <h1>{post.title}</h1>

이 파일 하나가 /blog/first-post, /blog/second-post 두 페이지를 빌드 시 자동으로 만들어냅니다. 배열에 항목을 추가하면 페이지도 그만큼 늘어납니다. params은 URL 자리에 들어갈 값, props는 그 페이지 안에서 쓸 데이터라고 구분하면 됩니다.

중요한 규칙 — getStaticPaths()가 반환하는 params의 키 이름은 파일명의 대괄호 안 이름과 정확히 같아야 합니다. [slug].astro라면 반드시 params: { slug: ... }.

왜 요청마다 만들지 않고 미리 만들까

서버 템플릿 엔진(예: PHP, EJS)은 방문자가 접속할 때마다 서버가 그 자리에서 HTML을 찍어냅니다. Astro의 static 모드는 다릅니다 — npm run build 시점에 가능한 모든 페이지를 한 번에 다 만들어서 dist/ 폴더에 저장해두고, 방문자는 이미 완성된 파일을 그대로 받습니다.

그래서 Cloudflare Pages 같은 CDN에 그대로 올려도 빠릅니다 — 매 요청마다 서버가 새로 계산할 필요가 없기 때문입니다.

오늘의 실습

1src/pages/blog/[slug].astro를 만들고, 더미 배열 3개로 getStaticPaths()를 작성합니다.

2npm run dev로 실행해 /blog/first-post 등 3개 주소가 실제로 열리는지 확인합니다.

Day 12 완료 체크리스트

src/pages/ 폴더 구조가 곧 URL이 된다는 걸 설명할 수 있다.

[slug].astro + getStaticPaths()로 동적 페이지 여러 개를 만들어봤다.

빌드 타임에 미리 만드는 것과 요청마다 만드는 것의 차이를 안다.

스스로 설명해보기 — getStaticPaths()의 params 키 이름이 파일명 대괄호 안 이름과 왜 정확히 일치해야 하는지 설명할 수 있나요?

오늘의 용어

파일 기반 라우팅

src/pages/ 안 파일 경로가 그대로 URL이 되는 방식

getStaticPaths()

동적 경로 페이지를 몇 개, 어떤 값으로 만들지 정의하는 함수

params

URL 자리([slug] 등)에 들어갈 값

props

그 페이지 안에서 쓸 데이터