또 다시 만들게 된 이야기

홈서버에 블로그의 백엔드를 담당하는 Ghost CMS가 붙어있었는데, 홈서버의 데이터가 날라가서 블로그를 날려먹었다. 복구할려고 시간을 쓰기에는 회사 업무가 너무 많았어서, 포기했다가 최근에 다시 힘을 내서 블로그를 고쳤다.

이쯤되면 블로그를 다듬는것을 연례 행사쯤으로 삼아야하나 싶기도...

이번에 사용한 라이브러리들

1. React Router + Vite

9버전부터 사용해서 정들었던 NextJS를 버리고, react-router를 사용했다. 주된 이유는 정석에서 조금이라도 벗어나는 사용을 하려고 할 때 언제나 고통스러웠던 사용 경험이 한 몫을 했다고 생각한다.

react-router가 v7 버전으로 올라오면서 remix를 흡수했는데 이때 clientLoader 와 같은 동작들을 쉽게 정의할 수 있게 되어서 최근에 많이 사용하고 있다.

커스텀도 상대적으로 자유롭고, 딱히 막히는것도 없어서 만족해서 사용하고 있다. 진작에 Vite로 넘어올껄.. 이라는 후회가 있지만... 지금이라도 넘어갔으니 된거다.

2. MDX + react-router-mdx

정적 마크다운 생성하다가 CMS로 바꿨다가 마크다운으로 다시 만들다가 생성하는걸 계속 반복하다보니 그냥 파일로 저장하는게 가장 낫다는 결론을 내렸다. DB를 날려먹으면 지금까지 고생했던게 다 0으로 돌아가기에, 이제는 진짜로 안날려먹겠다는 마음가짐으로 Git에게 나의 블로그 글 관리를 맡기기로 했다.

근데 만들다보니 mdx 파일을 정적 렌더링으로 바꿔주는 예제는 아무래도 못찾겠어서, 포기하고 react-router-mdx를 사용했다. 이걸 Vercel 환경에 배포하니까 MDX 파일을 못불러오는 사소했지만 매우 결정적인 오류가 있어 임시로 서버사이드 렌더링을 포기해야한다는 아주 뼈아픈 결과가 나를 반겼다.

이거 쓰면서 라이브러리 소스코드 보고 있는데 remark 플러그인을 더 못붙이는것을 알아냈다... 진짜 내재화 해야겠다...

3. Mantine UI

솔직히 인정할건 인정해야겠다. 나는 디자인에 재능이 없다. 그것도 아주 처참하게 없다.

그렇기에 tailwind로 직접 퍼블리싱을 하는것보다 그럴싸하게 만들어진 컴포넌트 라이브러리를 활용하는것이 낫겠다는 판단을 했고, MantineUI를 사용함으로써 부족한 나의 미감으로도 꽤나 괜찮은 블로그를 만드는데 도움이 크게 되었다.

트위터(X) 에서 언젠가 보았던 토막지식으로 배경색은 #FAFAFA, 글자색은 #1A1A1A 로 설정하니까 더욱 예뻐졌다. (야호)

4. SUIT + Tossface

Pretendard도 분명 깔끔한 폰트지만, 나는 SUIT 폰트가 더 이쁘다고 생각한다. 그래서 SUIT를 블로그의 메인 폰트로 사용했고, 이모지도 그냥 쓰기에는 밋밋해서 Tossface를 사용했다.

그래서 뭘 더 해야할까

맨날 TODO로 하겠다고 해놓고 블로그를 바꿔버리지만... 진짜 이제는 할만하다고 생각(언제나 그렇게 생각했음)해서 이것저것 붙여보기로 했다.

• react-router-mdx 의존성 지우기

  • remark-gfm 이랑 이것저것 붙이기
  • SSR 다시 가능하게 하기 (안될거 같긴 한데...) -> 깔끔하게 포기
• 댓글 기능
• 방명록 기능
• 글/태그 검색 기능

  • Spotlight
• 메모 카테고리랑 생각 카테고리랑 분리하기
• 에셋 번들링 기능

할거 겁나게 많네...