List

Start Gatsby code

Part 1

Gatsby develop 을 하면 실제로 homepage는 어떻게 진행되어 browser에 나타나게 되는가? 특히 이 theme에서는?

예전부터 첫 시작이 어떻게 되는지를 확인해보려고 했지만, React를 잘 알지도 못하기도 했고 뭔가 복잡하다고 느껴져서 헛돌게 되는 경우가 많았다.

역시 공식 홈페이지 documentation을 따라가다 보니 내용이 조금이나마 있어서 작성한다. (코드에서 뒤져보고 documentation에서 검색해보는 방향으로 작성한다.)

Hello world

Gatsby 버전 “hello world”는 gatsby hello world프로젝트를 만들고 나서 src/pages 폴더 하위에 index.js를 만들어 react “hello world”를 하게 되어있다.

https://www.gatsbyjs.org/tutorial/part-one/

이 theme에서는 src/pages 폴더는 보이지 않는다. 그러면 어디서 부터 시작인가?

Layout Component

그 전에 React라는 것을 깨닫고 component들이 어떻게 구성되는지 찾아보다가 Layout.js파일을 발견하게 됐다.

페이지가 많아지고 component가 많은 프로젝트는 단순하게 폴더 몇개만 가지고 동작하지 않는다. 지금 이 사이트 theme에도 마찬가지이다. 많은 사이트에 헤더라던지 copyright라던지 등등 공통된 component들은 어떻게 관리되는가?

https://www.gatsbyjs.org/tutorial/part-three/

Layout components are for sections of your site that you want to share across multiple pages. For example, sites will commonly have a layout component with a shared header and footer. Other common things to add to layouts are a sidebar and/or navigation menu. (Layout component는 많은 페이지를 가지는 section이다. 예를 들면, 사이트에는 공통적으로 header 와 footer를 가진 Layout을 가진다. 또다른 것 중에는 sidebar , navigation menu등이 있을 수 있다.)

src/components하위에 Layout component를 생성하고 관리하여 공통된 layout을 가질 수 있도록 한다.

기본이 되는 대단위 페이지 틀이 이 Layout.js파일로 그려진다.

Markdown page and slug

실제로 post를 작성하는 파일은 frontmatter를 포함한 markdown파일이다. gatsby는 이 post된 파일들을 어떻게 잘 해가지고 browser에 rendering해준다. markdown파일에 있는 data로부터 페이지를 생성해야되는데 web 주소로 사용하기 위해 slug라는 것을 사용한다.

A ‘slug’ is the unique identifying part of a web address, such as the /tutorial/part-seven part of the page https://www.gatsbyjs.org/tutorial/part-seven/.(_‘slug’는 https://www.gatsbyjs.org/tutorial/part-seven/ url에서 /tutorial/part-seven 와 같이 유니크하게 식별가능한 web 주소이다._)

root path에 있는 gatsby-node.js가 이 slug를 읽어오는 역할을 한다.

exports.onCreateNode = ({ node }) => {
  console.log(node.internal.type)
}

onCreateNode는 새로운 node가 생성되거나 업데이트 될 때 호출된다. 서버를 껐다가 켜면 새로 생성된 node가 console창에 log로 나타나는 것을 볼 수 있다.

exports.onCreateNode = ({ node }) => {
  if (node.internal.type === `MarkdownRemark`) {
    console.log(node.internal.type)
  }
}

MarkdownRemark node는 markdown page에 해당하는 node이다. 예를 들어 파일명pandas-and-bananas.md 이 slug에 해당하는 /pandas-and-bananas/로 변경될 것이다. 그런데 파일들에 접근을 하려면 어떻게 해야하는가?

exports.onCreateNode = ({ node, getNode }) => {
  if (node.internal.type === `MarkdownRemark`) {
    const fileNode = getNode(node.parent)
    console.log(`\n`, fileNode.relativePath)
  }
}

getNode 함수를 parameter로 가져와서 File에 대한 정보를 가져올 수 있다.

getNode 위 그림처럼 서버를 껐다 켜면 File에 대한 정보를 가져올 수 있다.

위에 내용은 tricky하게 slug를 가져오는 것인데, gatsby-source-filesystem plugin을 사용하면 slug기능을 제공받을 수 있다.

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode }) => {
  if (node.internal.type === `MarkdownRemark`) {
    console.log(createFilePath({ node, getNode, basePath: `pages` }))
  }
}

이제 MarkdownRemark node에 slug를 바로 추가할 수 있게 되었다. 이 기능은 GraphQL과 사용할 때 매우 강력하다. 그래서 page가 추가되어도 slug를 매우 쉽게 얻을 수 있다.

slug를 추가 하기 위해 createNodeField api를 통해 node field를 생성할 것이다.

const { createFilePath } = require(`gatsby-source-filesystem`)
exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === `MarkdownRemark`) {
    const slug = createFilePath({ node, getNode, basePath: `pages` })
    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })
  }
}

서버를 재실행 시키고 graphQL field는 아래와 같이 보여진다.

{
  allMarkdownRemark {
    edges {
      node {
        fields {
          slug
        }
      }
    }
  }
}

이로써 slug를 생성했고, page들을 만들 수 있다. 다음 post에서 이어서 하겠다.

Reference