Gatsby 맛보기
어제에 이어서 오늘도 Gatsby 공식 문서를 읽으면서 Gatsby의 동작하는 방식에 대해서 공부를 하였다.
사실 정말 맛만 보고 그만둘려고 했는데 막상 읽고 따라해보니까 꽤 재미있게 동작한다

데이터 계층 (data layer)

Gatsby에는 data layer라는 강력한 기능을 가지고 있다. 이 데이터 레이아웃은 다른 모든 곳에서부터 데이터를 가져올 수 있고 또한 각 컴포넌트에서 데이터를 사용할 수 있다. 데이터 계층의 데이터들은 다양한 데이터 타입을 가지고 있는데 이때 단위를 노드라고 한다. 예를 들어 gatsby-soure-filesystem 이라는 플러그인이 만들어내는 노드는 File node라고 하고 이 노드는 각 컴포넌트에서 가공해서 사용할 수 있다.

가공 방법

이러한 데이터는 raw 데이터로 저장이 돼는데 가공해서 가져올 수 있는 방법은 GraphQL이라는 것을 통해서 query를 하면서 가져올 수 있다. 이때 Gatsby만 그런 건지는 모르겠지만 GraphiQL이라는 것을 제공을 해서 한눈에 보기 쉽고 현재 어떤 노드들이 있는지 어떤 데이터가 있는지 어떻게 필터링을 할 것 인지를 GUI느낌으로 구현을 해놔서 참 편하게 사용했다.

클릭으로 쿼리문을 작성할 수 있고 그 쿼리를 실행했을 때 얻을 수 있는 데이터 정보들을 따로 GraphQL에 대해서 알지 못해도 직관적으로 확인할 수 있으니 이 부분은 굉장히 마음에 들었다.

페이지 동적 생성

Gatsby에서는 파일 시스템에 따라서 페이지를 생성해주는데 이 페이지를 만들 때 블로그의 경우 각 포스트들을 각각 만드는 것이 아닌 자동적으로 만들어줄 수 있는 기능을 제공한다.
파일명을 {mdx.frontmatter__slug}.js 이런식으로 설정하면 페이지가 동적 생성이 되는데 이를 이용해서 하나의 템플릿은 저 파일 안에 만들어 놓고 해당 템플릿에 사용할 데이터도 동적으로 가져와서 페이지를 각각 만들어준다.

여기까지는 괜찮은데 ...

여기까지는 참 괜찮았다. 튜토리얼을 진행하면서 느낀 점이 블로그로 예를 들어서 그런지 내가 아는 블로그 동작 방식을 어떻게 구현할 수 있을까에 대한 궁금점이 들었다.

보통 블로그는 해당 플랫폼에서 포스팅을 할 수 있는데 이런 식으로 진행하면 내가 블로그 글을 마크다운 언어로 이미 다 써서 푸시를 해야 하는 건가?

아직 방법을 찾지 못했지만 아마 그것도 어디에서 연동시켜서 사용할 수 있지 않을까 싶다. 그것만 찾으면 Gatsby로 내 전용 블로그를 만드는데 어려울 것 없이 뚝딱 만들어낼 수 있을 것이라는 확신이 들었다.

느낀점

• Gastby 꽤 괜찮은 프레임워크인 것 같다
• 제공하는 기능들이 생각보다 다양하다
• 서비스 구현에 집중할 수 있도록 여러 기능들을 제공하기 위한 노력들이 보인다
• pre-loading은 아무리 봐도 신기하다