지금까지 개발 블로그뿐만 아니라 다른 주제의 블로그 또한 운영해본 적도 없다. 올해 초 프론트엔드 개발자가 되어야겠다고 마음 먹은 후, 항상 개인 블로그를 운영하고 싶다는 생각을 했다. 중간중간 블로그를 만들어보려는 시도도 했었는데 만들다보면 허접해보여서 포기하기도 했고, 전공 강의를 듣느라 시간이 없다는 핑계로 만들지 않았다.
그렇게 미루고 미루다 최근에 마음을 굳게 먹고 Gatsby.js로 블로그 개발을 시작했다. 리액트를 공부하고 있었기 때문에 리액트를 기반으로 정적 페이지를 생성하는 개츠비를 사용하기로 결정했다.

블로그 기획

지금까지 기획을 하고 개발을 시작한 적이 없어서 개발 진행중에 힘든 점이 있었다. 정해진 게 없어서 중간에 새로 추가하느라 시간을 쏟기도 하고, 어떤 걸 개발해야 할지 막막할 때도 있었다. 그렇기 때문에 간단하지만 미리 계획을 정해서 개발을 진행해야겠다고 생각했다. 아직은 많이 부족하지만 그래도 전체적인 틀을 정해놓아서 개발을 할 때 편했다.

블로그 개발

아직까지 개발을 많이 해보지 않았기 때문에 기본적인 블로그 기능을 사용할 수 있고, 디자인이 깔끔한 간단한 블로그를 목표로 개발을 시작했다. 전체적인 디자인도 기획 단계에서 생각해두었기 때문에 바로 디자인도 같이 진행했다.

1. Gatsby.js 튜토리얼
   Gatsby를 사용해 본 적이 없었기 때문에 공식 문서의 튜토리얼을 통해 기본적인 사용법을 익혔다. 리액트와 다르게 gatsby-config.js, gatsby-brower.js 등의 설정 파일을 사용하는 것 같다. 또 plugin을 통해 기능을 자유롭게 확장할 수 있다.

2. 사용한 플러그인 목록

   • gatsby-source-filesystem
   • gatsby-plugin-image
   • gatsby-plugin-sharp
   • gatsby-plugin-manifest
   • gatsby-plugin-mdx
   • gatsby-remark-reading-time
   • gatsby-transformer-sharp
   • gatsby-plugin-sitemap
   • gatsby-plugin-react-helmet
   • prism-react-renderer

3. 진행 상황
   최근 웹에서 필수라고 할 수 있는 다크모드를 개발했다. 다크모드를 만드는 방법도 여러가지가 있었는데 맨 처음 생각했던 방법은 localStorage를 사용해서 light 모드인지 dark 모드인지 저장 후 localStorage.getItem()을 사용해 light인지 dark인지 비교할 계획이었다. 그런데 Gatsby는 SSR(서버 사이드 렌더링)을 지원하기 때문에 node 위에서 실행될 때에는 window, localStorage등 브라우저에서 사용하는 기능을 사용할 수 없다. 이 문제를 해결하기 위해 window 또는 localStorage를 사용하는 코드에서 window 객체가 존재하는지 확인한 후, 존재하면 코드를 실행시키는 방법으로 해결할 수 있다.

앞으로의 계획

블로그는 내가 모르는 걸 정리하는 목적으로도 중요하고, 다른 사람에게 정보를 제공하는 목적 또한 중요하다고 생각한다. 지금까지는 내가 아는 게 많이 없어서 남한테 보여줄 수 있는 정보인가 걱정하면서 글을 작성하지 않았는데, 사실 한참동안은 누군가 들어오지 않을 것 같기 때문에 일단은 나를 위해서 블로그 글을 꾸준히 작성해야겠다.