MINILAB | 블로그 유지보수 일기 #2 - Blog 포스트

Locomote the World는 유지보수 중

블로그 포스트에서 고쳐야할 부분은 아래와 같다.

• Table of Contents가 실시간으로 내가 읽는 부분을 표시해줬으면 좋겠다.
• Table of Contents에서 선택하면 해당 목차로 넘어갔으면 좋겠다.
• Comments 섹션은 바로 보였으면 함

블로그 preview는 크게 불만족스러운 부분이 없고 기능만 제대로 구현하는 것을 목표로 삼았다.

Table of Contents

모르고 있었는데 블로그의 기본 템플릿에서 TOC를 기본으로 제공하고 있었다. 기본으로 제공 안하는 줄 알고 직접 만들고 있었는데 local에서는 잘 되고 있었는데 vercel에서 배포했을 때 아래와 같은 오류가 떴었다.

application error: a client-side exception has occurred (see the browser console for more information).

뭐지 싶어서 하나하나 다시 넣어봤는데, PostLayout에서 상태관리를 하게 되면 생기는 오류인 것 같다.

해당 repository에서 issue를 뒤져봤는데,

I suspect swr does something to support both server-side fetch and client-side fetch which might be an issue for the layout page as the layout page only supports client-side js. A workaround might be to use swr in pages/blog/[...slug].js and pass down the information to the layout to render or just fetch on the client side.

비슷한 이유인 것 같은데 PostLayout에서는 client-side fetch 만 되기 때문에, 상태관리가 되지 않았던 것.

그래서 TOCInline.js에 구현해놨던 것들로 정리하고 component로 따로 빼서 넣어두니까 그제서야 되는 것 같다 :)

Comments

버튼을 없애고 바로 useEffect로 바로 호출하게 하였다. local에서는 안보이지만 미리 vercel에서 세팅이 되어서 문제없이 잘 돌아간다ㅎㅎ

Wrapup & Conclusion

이제 남은 부분들은 블로그 구독이랑 메세지 보내는 버튼 활성화만 남았다. 현재는 구직중은 아니라서 잠시 꺼놓는 상태이지만.. 그리고 최근 무료 미니 강좌도 내 블로그에서 보이고 싶어서 이건 아마 내년 쯤? 추후 카테고리에 추가할 것 같다. Nextjs 서버사이드 렌더링으로 인한 오류임을 깨닫는 유지보수였다! 블로그는 여기서 잠시 멈추고 다른 프로젝트를 시작할 것 같다.