- Published on
블로그 4.0 업데이트!
- Author
- Name
- yceffort
블로그를 또 개편했다. 개편한지 1년도 안된거 같은데 화끈하게 바꿨다.
Table of Contents
1. 계기
- 관리 능력 부재로 박살난 라이트 하우스 점수
- 그냥 가끔씩 생각날 때 마다 보던 점수였는데, 지난 번 포스팅에서 점수가 박살난 것을 보고 매우 반성. 원인은 이런저런 실험을 하다가 삽질을 한 것.
- 보다 보니 질리는 디자인
- 단순함이 최고라고는 하지만, 지나치게 단순했던 것 같다. 특히 태그 목록페이지는 눈뜨고 보기 어려울 정도. 그리고 다크 모드 지원도 해보고 싶었다.
- 코드 리팩토링
- 그 때는 나름 최선이었던 것 같지만(?) 더 이상 최선이 아닌 코드들을 리팩토링
- styled component 를 활용한 구성의 한계
- 디자인 고자라서 내가 아무리 css로 춤춰도 한계가 있었다. 그래서 그냥 tailwindcss를 도입하기로 했다.
2. 바꾼점
tailwindcss
외국 친구들 프론트엔드 이야기를 볼 때마다 가끔씩 눈에 밟히던게 있었는데 바로 tailwindcss 다. 클래스를 활용해서 css를 편하게 잡아줄 수 있도록 도와주는 라이브러리인데, 나 같은 디자인 고자에게 꼭 필요한 라이브러리였다. 다만 className이 장황해진다는 점, 그리고 더더욱 css를 공부할 의지가 사라진다는 점에서 좋지 않았다. (css공부를 위해 완벽 가이드를 구매했다. 이번에는 반드시)
mdx
이것도 외국 블로그들을 돌아다니면서 알게 된 것인데, 마크다운 문서를 파싱하는 툴로 mdx를 많이 사용한다는 것을 알게 됐다. 기존에 내 블로그는 remark와 rehype를 unify 하여 string으로 강제로 떨궈주는 방식이 었는데, 이 때문에 부득이하게 dangerouslysetinnerhtml를 사용했다. 물론 나밖에 안쓰는 곳이라 보안 위험 따윈 없겠지만,,, mdx를 사용하면 string이 아닌 jsx로 바꿔주기 때문에 리액트에서 사용하기엔 안성맞춤이다.
nextjs에서 사용을 위해서 mdx를 직접 사용하지는 않고, next-mdx-remote를 사용했다. 간단하게 원리를 설명하면 getStaticProps에서 renderToString를 활용하여 해당 주소별 내용을 string으로 들고 있다가 요청이 오면 이를 hydrate를 활용하여 jsx로 렌더링하는 방식이다. 덕분에 깔끔하게 처리할 수 있었고, 나아가 단순히 img 태그로 변환하던 이미지들도 next/image를 활용할 수 있도록 커스터마이징을 거쳤다.
next/image 덕분에 이미지 최적화와 lazy loading도 쉽게 가능해졌다. (next 도덕책,,,,)
이런 커스터마이징 덕분에 빌드 타임시에 잘못된 내부 이미지 링크도 수정이 가능해졌다. 추가로 내가 디자인을 바꾸고 싶은 마크다운 요소가 있다면 컴포넌트를 집어넣어서 디자인 변경도 가능하다. string으로 변환해서 꽂을 때와 비교하면 많은 것이 달라졌다.
next-seo, next-themes
SEO 지원을 위해 next-seo를, 다크모드 지원을 위해 next-themes를 사용했다.
그 외 리팩토링
현재 블로그 포스트에 두가지 주소 체계가 존재한다.
- (과거)
/:year/:month/:day/:title - (현재)
/:year/:month/:title
현재 설정 건드리기 귀찮아서 nextjs에서 제공하는 디렉토리 라우팅을 사용하고 있는데, 이 두 주소 지원을 위해서 미련하게도 거의 비슷한 비즈니스 로직이 들어 있는 두가지 파일을 별개로 관리하고 있었다. 이를 /:year/[...slug].tsx로 바꿔서 하나의 라우팅에서 모두 처리가 가능하도록 변경했다.
그리고 그 외에 미뤄뒀던 코드 리팩토링도 거쳤는데, 사실 다 한 것 같진 않다. 여전히 귀찮아서 생략한 타이핑도 존재하기 때문에,, 아,, 언제 하지?
3. 결과
디자인도 바꼈고, 라이트 하우스느님의 심기를 거슬리는 부분도 많이 줄였다. 아쉬운 점은 디자인과 파서 외에는 급진적인 변화를 거치지 못했다는 것이다. rescript를 써보고 싶었지만(?) 그걸 갖다 쓸 만큼 실력이 되지 못했고, 그 외에 크게 이목을 끌 만한 기술도 접하지 못했다.
과연 이 객기의 끝은 어디일까. 또 무엇을 만족하지 못하고 바꿀 것인가,, 내년 이맘 때를 지켜보자.