2019년에는 취업준비를 위한 알고리즘 공부와 더불어 꾸준한 블로그 글쓰기를 목표로 하고 있었다. 이미 이전에 hexo를 통해 이용하던 블로그가 있었으나, 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을 만들어 놓고 각 페이지마다 써주면된다.
Gatsby에서는 내부 저장소 데이터(우리가 만든 데이터)를 가져오기 위해 Graphql을 사용한다. graphql은 많은 사람들에게 진입장벽이 될 수 있지만, 쓰지 않고 만드는 방법이 존재한다.
하지만, 간단하게 사용할 용도의 graphql 문법은 어렵지 않고,문서에도 잘 나와있기도 하고, 뒤에서 설명할 볼 대부분의 plugin 들을 사용하기 위해선 Graphql이 필요하기 때문에 정말 간단한 사이트가 아닌 이상 사용하는게 좋다고 생각한다.
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을 사용하는 방식이 너무 편하고 이쁜 것 같다. 재밌게 블로그도 만들었으니 열심히 글도 써봐야겠다.