본문으로 건너뛰기

도큐사우루스 블로그 도전!

· 약 7분
Braun Park
Curious Developer

이전부터 기술 블로그의 중요성을 알고 여러 번 시도했지만 만들었다가 지웠다가 하기를 여러 번. 티스토리 블로그로도 만들어보고 워드프레스로도 만들어보고 또 개발자라고 해서 Nuxt로도 만들어봤지만, 결국은 실패했습니다.

바쁘다는 핑계로, 또 플랫폼이 마음에 들지 않는다는 핑계로 수 많은 블로그들을 갈아치워왔는데, 이번에는 Docusaurus(도큐사우루스)를 가지고 와봤습니다. 회사 지원자(현재 같이 일하고 있는 팀원^^)의 포트폴리오를 보고 처음 알게 되었습니다. 처음 도큐사우루스를 알게되고 깜짝 놀라게 되었고, 바로 알아보기 시작했습니다.

Docusaurus, 넌 도대체 뭐야?

Docusaurus

Docusaurus(이하 도큐사우루스) 는 오픈 소스 프레임워크로, 주로 기술 문서 웹사이트를 쉽게 생성하고 관리하기 위해 사용됩니다. Facebook에 의해 개발되었으며, 개발자들이 마크다운(Markdown) 형식으로 문서를 작성하고 이를 정적 웹사이트로 변환할 수 있도록 지원합니다.
출처 : ChatGPT


간단하게 말해서 블로그(혹은 간단한 웹사이트)를 쉽게만들 수 있도록 도와주는 사이트입니다. 물론 도큐사우루스와 비슷한 서비스들이 있습니다. 특히 Github page로 많이 사용하는 Jekyll이나 Hexo 등을 사용해봤었는데 너무 어려웠던 기억이 있습니다. 물론 도큐사우루스도 처음 사용할 때는 어려울 수 있지만 사용해왔던 서비스들과는 다르게 상대적으로 더 익숙한 리액트 기반이라 접근하기 편했습니다.

Docusaurus의 주요 특징

공식 홈페이지에서는 도큐사우루스의 특징을 다섯 가지로 소개하고 있습니다.

Powered by MDX

시간을 절약하고 텍스트 문서에 집중하세요. MDX로 문서와 블로그 게시물을 작성하기만 하면 Docusaurus가 이를 제공할 준비가 된 정적 HTML 파일을 만들고 게시합니다. MDX 덕분에 마크다운에 React 컴포넌트를 포함할 수도 있습니다.

기존에 .md 파일의 마크다운 문서는 많이 써봤는데, .mdx 파일은 처음 봐서 처음 프로젝트 생성할 때 만들어진 샘플 파일을 보니 비슷하면서 살짝 다른 부분이 있었습니다. 그래서 확인해보니, .mdx 파일은 Markdown + JSX. 즉 React 컴포넌트를 동적으로 사용할 수 있도록 하는 새로운 파일 형식이었다. 마크다운 문서를 평소에도 좋아해 많이 쓰고 있어서 크게 어색하진 않지만, JSX 문법을 어떻게 써볼 수 있을 지는 공부가 더 필요할 것 같습니다.

리액트로 기능 확장하기

React 컴포넌트를 작성해 프로젝트 레이아웃을 확장하고 사용자 지정할 수 있습니다. 플러그인 형태의 아키텍처를 활용하고 Docusaurus 플러그인으로 생성된 같은 데이터를 재사용하면서 여러분의 사이트를 설계하세요.

리액트 기반으로 프로젝트가 구성되어 있다보니 리액트를 알고 있다면 도큐사우루스를 쉽게 커스터마이징 할 수 있습니다. 아직은 기본 프로젝트 구성에서 많이 바뀌진 않았지만, 추후에 익숙해지면 메인 페이지를 개선해 볼 생각입니다.

손쉽게 번역하기

현지화는 기본으로 제공됩니다. 깃, 크라우드인 또는 다른 번역 관리 도구를 사용해 문서를 번역하고 개별적으로 배포합니다.

문서 버전 관리

여러분의 프로젝트 모든 버전에 대한 사용자를 지원해줄 수 있습니다. 문서 버전 관리를 통해 여러분의 문서를 프로젝트 릴리스와 동기화할 수 있습니다.

콘텐츠 검색하기사용자가 문서에서 필요한 것을 쉽게 찾을 수 있습니다. 알골리아 문서 검색을 지원합니다.

사용자가 문서에서 필요한 것을 쉽게 찾을 수 있습니다. 알골리아 문서 검색을 지원합니다.

마치며

공식 홈페이지에 소개된 내용을 간단하게 옮겨 적으면서 공부를 해봤습니다. 하지만 글로만 이해하기는 역시 불편한 부분이 있어 조금 더 써보면서 익숙해져야할 것 같습니다. 그래도 처음 프로젝트를 만드는 과정부터 첫 포스팅을 작성하고 있는 지금까지는 아주 만족스럽게 사용하고 있습니다. 앞으로도 잘 써볼 수 있을 것 같습니다. 이번 블로그는 이런 저런 핑계대지 않고 열심히 블로그를 해보도록 하겠습니다.