[Gatsby] File System Route API

동적 Page 생성

GrapQL 데이터를 사용해 동적으로 페이지를 생성하는 방법으로
다음과 같이 사용될 수 있다.

• src/pages/products/{Product.name}.js
  => ex) localhost:8000/products/burger
• src/pages/products/{Product.fields__sku}.js
  => ex) localhost:8000/products/001923
• src/pages/blog/{MarkdownRemark.parent__(File)__name}.js
  => ex) localhost:8000/blog/learning-gatsby

/pages 내부에 있는 .js 파일을 Gatsby에서 자동으로 라우팅해준다.
이때 {} 내부의 메소드를 확인하고 GraphQL을 통해 해당 URL을 동적으로 생성한다.

동적으로 URL을 생성할 때 내부에서 slugify를 통해 필터링 되어지는데
만약 데이터를 통해 가져온 정보가 I ♥ Dogs 라면 i-love-dogs 으로 변경된다.

slugify

별도로 slugify 사용이 필요할 시 방법은 다음과 같다.

npm i slugify

import slugify from 'slugify'
 const slug = slugify(데이터, {lower: true})