블로그 개발을 시작하면서, 가장 먼저 어떤 방법으로 블로그를 만들지를 생각해봤습니다. 가장 쉬운 방법은 Jekyll이나 Hexo등 기존에 있는 솔루션을 사용하는 것이겠지만, 아무래도 공부 목적으로 블로그를 만드는 만큼 직접 바닥부터 만들어보기로 했습니다.
블로그 개발 목표
블로그를 만들기에 앞서서, 저는 다음과 같은 개발 목표를 세웠습니다.
React를 공부중이므로,React와React-router를 사용하여 SPA (Single Page Application)로 만든다.- 그러나 포스트의 경우, 모든 포스트를 한 번에 불러오는 것이 아니라 동적으로 불러와야 한다.(포스트가 많아지면 로딩 시간이 엄청나게 길어질 테니까)
- 디자인은 React-Bootstrap을 사용해서 구성하고
custom.scss를 사용하여 커스터마이징한다. - 포스트를 쓰는 작업은 복잡해서는 안 되고,
posts디렉토리에 임의로 새로운 폴더를 만들고, 임의로 YAML formatter가 첨부된 markdown 파일을 작성하는 것만으로 가능해야 한다. 이는 Typora 등 기존의 좋은 markdown 편집기를 이용하기 위함이다. - 포스트 publish를 할 때에는 GitHub에 동기화하기 위해 입력해야 하는 commit 등의 작업을 자동화하여 아주 간단한 조작만으로 동작하도록 만들어야 한다.
- 추후 블로그 관리 시스템을 (필요하다면) GUI로 쉽게 확장이 가능해야 한다.
- 상수는 최대한 지양한다. 예를 들어, 포스트가 들어있는 디렉토리 이름은 기본적으로
posts로 되어있지만, 사용자가 원한다면게시글과 같은 식으로 바꿀 수 있어야 한다. - 운영체제나 포스트 작성 툴에 구애받아서는 안 된다.
- 유니코드를 지원해야 한다. (한국어로 글을 써야 하니까)
- 블로그를 시작하기 위해서 설치해야 할 것들을 가능하면 줄인다. 예를 들어, Jekyll의 경우 Ruby를 깔아야 하고, Hexo의 경우 Node.js를 깔아야 한다. 이는 프로그래밍에 익숙하지 않은 사람들에게 진입 장벽이 된다.
이는 제 깃허브 블로그 개발 리포지토리의 README.md에 있는 리스트와 같은 내용이며, 이해하기 쉽게 수정을 좀 했습니다.
블로그 작동 방식
블로그라는 것은 기본적으로, 정적인 웹사이트가 아닙니다. 글을 씀에 따라서 포스트 리스트가 바뀌고, 각 포스트에 해당하는 페이지가 만들어져야 합니다. 그렇기 때문에 이것을 구현하려면 블로그를 관리해주는 프로그램이 따로 필요합니다. 제 블로그의 경우 blog.js가 바로 그 역할을 합니다. 이 스크립트는 간단히 요약하자면 다음과 같이 동작합니다.
- 포스트들의 정보를 모두 읽어 메타정보 JSON을 만든다. 이 메타 정보 JSON에는 각 포스트의 타이틀, 카테고리, 작성 일자, 본문 미리보기를 위한 텍스트 약 100자가 들어있다. 이 JSON은 meta.json이라는 이름으로 저장된다.
- 각 포스트 디렉토리에서 .md파일을 찾은 후, 이를 JSX파일로 변환한다. 이는 view.jsx라는 이름으로 저장된다.
- 각 포스트의 Table of content (TOC)을 JSON형식으로 구한다. 이 JSON은 각 포스트 디렉토리에 toc.json이라는 이름으로 저장된다.
이제 이렇게 blog.js가 동작하여 메타정보 업데이트를 마치고, 블로그를 빌드합니다. 블로그에서는 meta.json을 정적으로 import하며, 특정 포스트를 선택하면 해당 포스트의 view.jsx와 toc.json을 동적으로 로드하여 독자에게 보여줍니다.