Gatsby로 블로그 이전 후기
2019년에는 취업준비를 위한 알고리즘 공부와 더불어 꾸준한 블로그 글쓰기를 목표로 하고 있었다. 이미 이전에 hexo를 통해 이용하던 블로그가 있었으나, Gatsby가 요즘 핫하기도 하고 써보고 싶은 생각도 있었기 때문에 Gatsby를 이용해 이 블로그를 만들어 보았다.
처음에 다 만들고 난 후에는 Gatsby를 이용한 블로그 만들기라는 주제로 글을 써볼까 하다가, 문서가 너무 잘 되어 있어서.. 후기 정도만 쓰려고 한다. 블로그를 어떤 툴을 이용해 만들지 고민 중일 때 이 글이 도움이 되었으면 좋겠다.
왜 Gatsby 인가?
내가 Gatsby를 선택한 가장 큰 이유는 React 이다. React를 이용해 커스터마이징이 가능하다는 점이 나에게는 가장 큰 이유 였다. 실제로 만들어 보니 React와 약간의 Graphql만 이용해서도 대부분의 커스터마이징이 가능했다.
기존 Hexo를 이용하였을 때는 ejs같은 템플릿 언어를 이용해야 했기 때문에 이쁜 테마를 받아서 조금 바꾸는 정도였다. 이 사이트는 Gatsby를 이용해서 테마 없이 쉽게 만들 수 있었다!(그래서 별로 안 이쁘다.) hexo에서 테마를 사용했을 때 가끔 같은 테마를 쓰는 사이트를 발견하면.. 그렇게 기분이 좋지는 않다.
두 번째 이유는.. 한 번 써보고 싶었다. React 페이지도 Gatsby를 사용하였고, 여러 문서나 블로그에 쓰이는 걸 많이 봐서 한 번 써보고 싶었고, 새해를 맞아 써보았다.
사실 첫 번째 이유가 정말 컸다. React를 이용한 커스터마이징이라는 것이 사이트를 정말 편하게 만들 수 있는 방법이 되었다.
hexo 대비 안 좋은 점도 물론 있다. 커스터마이징을 해야한다는 것은 하지 않을 사람에게는 독이 될 수도 있다. 커스터마이징이 필요없고 기본적인 기능이 모두 만들어져 있는 상태에서 사이트를 만들고 싶다면, hexo도 좋은 선택이다. 블로그 처럼 굳이 커스터마이징이 필요없는 마크다운으로 만든 포스트만 있는 사이트를 만들 때는 hexo가 더 좋을 수 있겠다.
하지만, React를 해봤고 나만의 사이트를 만들고 싶다면 Gatsby 강추다.
어떻게 사용할까?
어떻게 만드는지는 문서가 너무 잘 되어있어서 보고 따라하면 된다. 여기서는 만들기 전에 보고가면 좋을 만한 것을 작성해볼 것이다.
레이아웃 잡기
먼저 Gatsby는 서버 사이드 렌더링이기 때문에 각 페이지가 최 위 레벨 컴포넌트가 된다. 물론 서버 사이드 렌더링도 최상위 컴포넌트를 만들 수 있기 때문에 그런 방식으로 하려면 이 문서를 보자. 언마운트되길 원하지 않는 컴포넌트가 있을 때 유용하다.
페이지 하나 하나가 최상위 레벨이라는 것은 각 페이지 마다 같은 페이지 레이아웃을 유지하기 위한 역할을 해줄 컴포넌트가 페이지마다 필요하다는 의미이다. Redux를 쓰거나 하지 않는 이상, 페이지의 레이아웃을 잡아주는 컴포넌트를 하나 만드는게 더 편리하다.
예를 들어, 사이트가 전체적으로 80%의 width로 중앙에 오도록 하고 싶다면
const Layout = ({ children }) => (
<div style={{
width: '80%',
margin: 'auto
}}>
{children}
</div>
이런식으로 Layout을 만들어 놓고 각 페이지마다 써주면된다.
Graphql 을 꼭 사용해야 하는가?
Gatsby에서는 내부 저장소 데이터(우리가 만든 데이터)를 가져오기 위해 Graphql을 사용한다. graphql은 많은 사람들에게 진입장벽이 될 수 있지만, 쓰지 않고 만드는 방법이 존재한다.
하지만, 간단하게 사용할 용도의 graphql 문법은 어렵지 않고,문서에도 잘 나와있기도 하고, 뒤에서 설명할 볼 대부분의 plugin 들을 사용하기 위해선 Graphql이 필요하기 때문에 정말 간단한 사이트가 아닌 이상 사용하는게 좋다고 생각한다.
plugin 들
Gatsby에는 유저들이나 Gatsby 팀이 만든 많은 plugin 들이 존재한다. 이들을 잘 사용하는 것도 좋은 사이트를 만드는 중요한 방법이다.
유용한 몇 가지를 보면,
gatsby-plugin-react-helmet: React 컴포넌트로 도큐먼트의 <head> 를 조작할 수 있는 react-helmet 을 사용할 수 있게 해준다. 이를 통해, 검색엔진 최적화(SEO)를 할 수 있다.
gatsby-source-filesystem: 지정된 path에 있는 모든 파일들을 query할 수 있는 여러 node들로 만들어 준다. 파일 transformer 플러그인들의 기본이 되며, Gatsby의 Node API와 함께 각 파일에 대한 페이지를 만들 수 있다.
gatsby-transformer-remark: 파일 중 .md나 .markdown같은 확장자가 있는 파일을 remark를 이용해서 파싱하고 이 결과를 쿼리할 수 있는 데이터로 넣어준다. 예를 들어, 블로그 포스트를 md 파일로 작성하고 이 플러그인을 추가한 후에 gatsby를 실행시켜 주면, 그 md 파일을 파싱한 결과와 여러 정보들을 graphql을 통해 쿼리 할 수 있도록 넣어준다.
이 외에도 여러가지 유용한 플러그인들이 있으니 필요한 것들을 잘 살펴보자.
결론
사실 위 내용도 문서만 읽어도 다 알 수 있는 내용이다. 문서가 워낙 잘 되어 있어서 천천히 보면서 따라하다 보면 어떻게 더 기능을 추가 할 수 있을지 감이 잡힌다.
개인적으로 React와 Graphql을 사용하는 방식이 너무 편하고 이쁜 것 같다. 재밌게 블로그도 만들었으니 열심히 글도 써봐야겠다.
