파라미터 폴더

파라미터 폴더를 사용하면 URL 경로의 일부를 값으로 받아 사용할 수 있습니다.

쿼리 문자열(GET 변수)로도 값을 전달할 수 있지만, 파라미터 폴더를 사용하면 제품이나 게시물의 정보를 URL 경로에 포함해 의미를 이해하기 쉽고 공유하기 편한 주소를 만들 수 있습니다.

예를 들어 다음과 같은 제품 페이지가 있다고 가정해보겠습니다.

/products/red-chair
/products/coffee-table
/products/desk-lamp

제품마다 페이지 파일을 따로 만들지 않고 다음과 같은 파라미터 폴더를 사용할 수 있습니다.

/public/products/[product-id]/+page.essepage

대괄호로 감싼 [product-id] 폴더는 URL의 해당 위치에 입력된 값을 product-id라는 이름으로 전달합니다.

/products/red-chair

위 주소에서 product-id의 값은 다음과 같습니다.

red-chair

페이지 파일에서는 다음 문법으로 값을 사용할 수 있습니다.

{{$ folder_param : product-id $}}

파라미터 폴더는 URL 경로의 일부를 값으로 받아 같은 페이지 파일에서 서로 다른 콘텐츠를 표시할 때 사용합니다.

파라미터 폴더 만들기

제품 상세 페이지를 예로 파라미터 폴더를 만들어보겠습니다.

필요한 파일 구조는 다음과 같습니다.

/public
└── products
    └── [product-id]
        └── +page.essepage

폴더와 페이지 파일 만들기

/public 폴더 안에 products 폴더를 만듭니다.
products 폴더 안에 [product-id] 폴더를 만듭니다.
[product-id] 폴더 안에 +page.essepage 파일을 만듭니다.
페이지 파일을 열고 코드를 작성합니다.
파일을 저장하고 처음 공개합니다.

파라미터 폴더의 이름은 반드시 대괄호로 감싸야 합니다.

[product-id]

대괄호 안의 product-id는 페이지 파일에서 값을 불러올 때 사용하는 이름입니다.

URL의 값 표시하기

/public/products/[product-id]/+page.essepage 파일에 다음 코드를 작성하세요.

<main>
    <h1>Product</h1>

    <p>
        Product ID:
        <strong>{{$ folder_param : product-id $}}</strong>
    </p>
</main>

페이지를 공개한 뒤 다음 주소로 접속합니다.

/products/red-chair

페이지에는 다음 내용이 표시됩니다.

Product ID: red-chair

주소를 다음과 같이 변경하면:

/products/coffee-table

같은 페이지 파일에서 다음 내용이 표시됩니다.

Product ID: coffee-table

URL마다 별도의 페이지 파일을 만드는 것이 아니라 하나의 +page.essepage 파일이 여러 파라미터 값을 처리합니다.

쿼리 문자열과의 차이

URL을 통해 값을 전달할 때는 쿼리 문자열(GET 변수)을 사용할 수도 있습니다.

/aaa/bbb?ccc=ddd

위 주소에서 /aaa/bbb는 페이지 경로이고, ccc는 변수 이름, ddd는 값입니다.

JavaScript에서는 다음과 같이 값을 읽습니다.

<script>
    const query = new URLSearchParams(window.location.search);

    const value = query.get("ccc");
</script>

파라미터 폴더와 쿼리 문자열은 다음과 같은 경우에 사용할 수 있습니다.

구분	파라미터 폴더	쿼리 문자열
URL 예제	`/products/red-chair`	`/products?id=red-chair`
적합한 용도	특정 제품이나 게시물 표시	검색, 정렬과 필터
값 읽기	`{{$ folder_param : product-id $}}`	`URLSearchParams`

두 방식은 함께 사용할 수도 있습니다.

/products/red-chair?color=blue

위 주소에서 red-chair는 파라미터 폴더의 값이고, color=blue는 쿼리 문자열입니다.

JavaScript에서 사용하기

파라미터 값은 JavaScript에서도 사용할 수 있습니다.

<h1 id="productTitle">Product</h1>

<script>
    const productId = "{{$ folder_param : product-id $}}";

    document.getElementById("productTitle").textContent = `Product: ${productId}`;
</script>

다음 주소로 접속하면:

/products/red-chair

페이지에는 다음 제목이 표시됩니다.

Product: red-chair

파라미터 값은 문자열로 전달됩니다. 숫자로 계산해야 하는 값이라면 JavaScript에서 숫자로 변환하세요.

<script>
    const pageNumber = Number("{{$ folder_param : page-number $}}");
</script>

여러 단계의 URL 경로 받기

하나의 파라미터 폴더로 여러 단계의 URL 경로를 받을 수도 있습니다.

다음과 같은 파일 구조를 만들어보겠습니다.

/public/products/[product-info]/+page.essepage

이 페이지는 다음과 같은 주소를 처리할 수 있습니다.

/products/furniture/red-chair

이때 product-info에는 파라미터 폴더에 해당하는 나머지 경로가 전달됩니다.

furniture/red-chair

페이지 파일에서 다음 문법으로 전체 값을 확인할 수 있습니다.

<p>{{$ folder_param : product-info $}}</p>

페이지에는 다음 내용이 표시됩니다.

furniture/red-chair

JavaScript의 split("/")을 사용하면 경로를 각각의 값으로 나눌 수 있습니다.

<h1 id="productTitle"></h1>

<p>
    Category:
    <span id="category"></span>
</p>

<p>
    Product ID:
    <span id="productId"></span>
</p>

<script>
    const productInfo = "{{$ folder_param : product-info $}}";

    const [category, productId] = productInfo.split("/");

    document.getElementById("productTitle").textContent = productId;
    document.getElementById("category").textContent = category;
    document.getElementById("productId").textContent = productId;
</script>

다음 주소로 접속하면:

/products/furniture/red-chair

각 변수에는 다음 값이 저장됩니다.

변수	값
`productInfo`	`furniture/red-chair`
`category`	`furniture`
`productId`	`red-chair`

같은 페이지 파일로 다음과 같은 주소도 처리할 수 있습니다.

/products/books/learning-html
/products/electronics/wireless-keyboard
/products/furniture/coffee-table

여러 단계의 동적 경로를 처리할 때는 파라미터 폴더를 여러 개 중첩하지 않고 하나의 파라미터 폴더로 전체 경로를 받습니다.

다음과 같이 만들지 않고:

/public/products/[category]/[product-id]/+page.essepage

하나의 파라미터 폴더를 사용합니다.

/public/products/[product-info]/+page.essepage

그런 다음 split("/")을 사용해 필요한 값으로 나눕니다.

파라미터 페이지 연결하기

일반 페이지와 같은 방법으로 파라미터가 포함된 주소를 링크할 수 있습니다.

<a href="/products/red-chair">Red Chair</a>
<a href="/products/coffee-table">Coffee Table</a>
<a href="/products/desk-lamp">Desk Lamp</a>

모든 링크는 다음 페이지 파일로 연결됩니다.

/public/products/[product-id]/+page.essepage

각 링크의 URL에 따라 product-id의 값만 달라집니다.

여러 단계의 경로를 사용하는 링크도 같은 방식으로 작성합니다.

<a href="/products/furniture/red-chair">
    Red Chair
</a>

<a href="/products/books/learning-html">
    Learning HTML
</a>

위 링크는 다음 페이지 파일로 연결됩니다.

/public/products/[product-info]/+page.essepage

내부 페이지를 연결하는 기본적인 방법은 내비게이션과 링크에서 알아볼 수 있습니다.

페이지가 열리지 않을 때

파라미터 페이지가 열리지 않거나 값이 표시되지 않는다면 다음 내용을 확인하세요.

파라미터 폴더가 /public 안에 있는지
폴더 이름을 [product-id]처럼 대괄호로 감쌌는지
파라미터 폴더 안에 +page.essepage 파일이 있는지
페이지 파일을 공개했는지
URL에는 대괄호가 아니라 실제 값을 입력했는지
폴더의 파라미터 이름과 코드에서 사용하는 이름이 같은지
문법이 {{$ folder_param : product-id $}} 형태인지

다음 단계

파라미터 폴더의 사용 방법을 이해했다면 다음 문서로 넘어가세요.

존재하지 않는 주소에 표시할 페이지 만들기: 사용자 정의 404 페이지
JavaScript로 외부 데이터 가져오기: 외부 API 사용하기
브라우저에서 직접 호출할 수 없는 API 연결하기: Proxy API
파일과 폴더 이름의 자세한 규칙 확인하기: 파일 이름 규칙
페이지를 메뉴와 링크로 연결하기: 내비게이션과 링크

언어

목차

Title