최근 진행하고 있는 사이드 프로젝트가 있어서 블로그 글이 뜸했는데, 프로젝트를 정리하면서 오랜만에 티도리 프레임워크의 공식문서인 tidory.com 의 다크 모드도 추가 겸하여 보수를 진행하고, 그에 대한 개발기를 써보기로 했다. Vue.js 의 SSR 프레임워크인 Nuxt.js 을 사용했지만, 만들어놓고 벌써 4년여의 시간이 지난터라 버전을 1.0 에서 2.x 로 업그레이드를 해보면 어떨까 싶어 진행하기로 했다. 게다가 기존의 코드도 영 마음에 들지 않는게 있었기 때문에 덤으로 리팩터링하기로 했다.
프론트엔드가 그저 취미인 내게는 리액트보다는 Vue.js 가 훨씬 더 간결하고 사용하기 좋다.
https://github.com/tidory/tidory.com
GitHub - tidory/tidory.com: 티도리 프레임워크 공식 문서
티도리 프레임워크 공식 문서. Contribute to tidory/tidory.com development by creating an account on GitHub.
github.com
nuxt/content
Nuxt.js 2.x 는 기존의 1.0 과 사용법이나 템플릿, 디렉터리 구조의 측면에서는 큰 차이가 없었지만, 새로 구성하면서 눈에 들어온 것이 있다면 바로 nuxt/content 라는 모듈이다. 원래는 문서의 본문을 .vue 로 관리하고 있던터라 이를 .md 로 변경하기 위해 markdown-it 과 같은 것을 사용하여 처리할까 생각했었는데, 마침 내 요구조건을 충족하는 모듈이 존재하여 그럴 필요가 없어졌다.
nuxt/content 는 문서나, 블로그를 구축하기에 적합한 구성을 가지고 있는데, 이를 사용하면 깃허브 블로그를 구성함에 있어서는 상당히 괜찮은 선택지가 될 수 있으리라 생각된다. 애초에 소개 문구조차 CMS(Content Management System) 라고 이야기한다.
a Git-based Headless CMS
포스트를 편하게 작성하기 위해 UI 를 별도로 제공하지는 않으며, 글을 쓰려면 content 에 .md 파일을 직접 만들고 이미지와 같은 정적 파일도 static 에 넣어서 git 에 직접 Push 를 해야하기는 한다. 이게 불편해보일지는 몰라도 사실은 지극히 개발자스럽기 때문에 내게는 오히려 좋다. 아마 내가 티스토리를 사용하지 않았다면 선택지에 있었을 듯하다.
https://content.nuxtjs.org/
Introduction
Empower your NuxtJS application with the @nuxt/content module: write in a content/ directory and fetch your Markdown, JSON, YAML and CSV files through a MongoDB-like API, acting as a Git-based Headless CMS.
content.nuxtjs.org
nuxt/content 는 문서, 블로그 게시글을 작성할 때 상당히 적합하며 페이지의 레이아웃이나 틀은 기본적으로 .vue 로 구성하지만, 문서의 내용 자체는 .md 을 사용하여 구성할 수 있도록 되어있다. 게다가 마크다운에서 Vue Component 를 사용할 수도 있다(!)
마크다운 뿐만 아니라 추가적인 확장 기능도 제공하는데, 공식 홈페이지에도 나와있듯이 제목에 알아서 구성해주는 TOC(Table of Content), 페이징을 할 수 있도록 이전/다음 페이지에 대한 링크와 PrismJs 를 사용한 코드 하이라이트와 같은 기능들이 이미 내장되어 있어서 우리가 직접 관련 패키지를 설치할 필요도 없다.
문서에 작성자, 제목, 커버 이미지와 같은 사용자 정의 메타 정보(Front Matter)를 기입할 수도 있어서 컨텐츠를 구성하기에 있어서는 크게 제약은 없다. nuxt/content 에 대한 튜토리얼에서는 블로그를 만드는데 있어서 큰 도움이 된다.
https://nuxtjs.org/blog/creating-blog-with-nuxt-content
Create a Blog with Nuxt Content
The Content module is a git files based headless CMS that provides powerful features when it comes to write blogs, documentation sites or just adding content to any regular website. In this post we will go through most of the benefits of this module and di
nuxtjs.org
마땅히 디자인하기 귀찮다면, 이미 디자인된 테마를 사용할 수도 있을 것이며, nuxt/content 에는 그러한 테마를 제공하고 있다. tidory.com 에서는 별도의 디자인을 사용하고 있기때문에 그 테마를 쓰지는 않았다.
마치며
코드에 대한 내용없이 왜 벌써 마치는지 의아할 수도 있는데, tidory.com 은 nuxt/content 를 사용했다는 점 이외에는 이야기 할만한 것이 없다. 더군다나 nuxt/content 를 소개하는 포스트도 아니기 때문에 내용이 짧을 수 밖에 없다. 대부분의 내용은 공식 문서를 보고 구현되었고, 그렇다고 특별히 설계된 부분도 별도로 없기 때문이다.
nuxt/content 를 추가하면서 얻은 이점이라면, 문서의 본문에 대한 부분을 .vue 에서 .md 로 관리할 수 있게 되어 코드가 깔끔해졌다는 점이다. 덕분에 페이지 컴포넌트(Page Component)를 건드리지 않고도 .md 를 편집하는 것만으로 문서를 수정할 수 있게 되었다. 설령 새로운 문서를 추가한다고 해도 새로운 페이지 컴포넌트를 만들지 않아도 된다는 점은 정말 좋은 일이다.
