NETAMlog[2] 삽질과 에러

오늘의 여정

지난 주에 마크다운을 처리하고 주중에 목차를 만들고 나서 오늘은 굉장히 많은 일을 하려고 했습니다.

블로그 페이지의 메인 화면과 메타 태그 정리, 웹사이트의 메인 페이지, 블로그 글별 레이아웃 정리 등 거의 끝낼 수 있을 거라고 생각했죠.

근데 목차가 누르면 페이지를 다시 로딩하고 href가 바뀌더라고요?

그래서, '음, remark나 rehype 플러그인을 쓰자' 해서 가져와서 써봤는데 얘는 제대로 만들지를 않더라고요? (한글 때문인가...)

결국 직접 만들어야 해서 이 분의 블로그에서 코드를 가져와 생성했습니다.

그리고 얘를 렌더를 해야 하는데 여기서부터 온갖 삽질과 에러가 시작됩니다...

mdx 파싱은 싫어요

커스텀 목차 코드를 실행하면 'ul'이 만들어지는데 이게 html이 로딩한 뒤에야 만들 수 있어서 얘를 어떻게 집어넣지 고민을 하다가 appendChild 함수를 통해 넣으려고 했습니다.

근데 얘는 리액트 컴포넌트를 못 쓰더라고요?(어찌보면 당연하긴 합니다만)

그래서 mdx 파싱 결과를 html로 받을 수는 없는지 찾다가 mdx-bundler라는 모듈을 알게 되어 얘는 좀 다를까 해서 기존의 next-mdx-remote를 잠시 주석 처리하고 코드를 바꿔봤습니다.

그런데 갑자기 아무 문제 없던 fs 모듈이 webpack에서 없다고 뜹니다.

그래도 이건 자주 듣던 일이라 처리를 해줬어요.

근데 이젠 함수가 존재하지 않는다네요? 심지어 에러 내용도 역추적이 안되서 그 상태로 학원 갔다가 와서 2시간 반을 때려 넣었습니다.

결과적으로 못 고쳤습니다.

그냥 다시 next-mdx-remote으로 돌아오고 나니 갑자기 생각이 들더라고요?

아! 리액트는 조건별로 렌더링이 가능하지!

답은 언제나 간단하다

리액트에는 useState와 useEffect, useRef라는 훅이 존재합니다.

useState는 변수를 바꾸고 리로딩, useEffect는 모든 엘리먼트가 다 로딩되고 나서 코드를 실행하기 위한 용도, useRef는 로딩 사이에 변수가 값을 유지하는데 쓰입니다.

이를 통해 HTML이 전부 로딩되고 나면 useEffect가 실행되어 useState를 통해 변수를 true로 바꿔 목차를 로딩하면 되는 것이죠. useRef는 목차 정보는 한 번만 가져오면 되는 거라 그 값을 두 번 이상 가져오지 않게 합니다.

이러고 나니까 실행이 잘 되더군요. 스타일링이 끝난 뒤 모습입니다.

그래서 오늘 한 일&결론

결국 쓸데없는 일에 시간 다 뺏기고 npm install을 약 10번을 하고 하다가 목차만들고 메타 태그 정리하는거 밖에 못했습니다.

진짜 자바스크립트는 프로젝트를 할때마다 쓸데없는 일에 시간을 뺏기는 일이 많은거 같은데 이건 웹개발의 숙명이라 생각하고 안고 가는 방법 외엔 없는 것 같습니다.

제가 프레임워크 다 뜯어보는거 아니면 문제가 안 풀리는 경우도 있는데 이건 뭐 일부 포기하거나 우회하며 가야죠.

남은 일

일단 메인 페이지들 구성을 해줘야 합니다.

그런 다음에 모바일 지원을 해줘야 하는데 이것도 시간을 많이 잡아먹을 것 같습니다.
윈도우 사이즈 테스트겸 몇 번 바꿔봤는데 딱히 희망이 보이지 않아요.

다 만들고 나면 배포한 다음에 댓글 기능과 조회수 기능을 추가해야합니다.
배포한 다음 추가하는 이유는 외부에서 사용하는데 배포 후에 할 수 밖에 없기 때문입니다.(그 주에 올릴 글에 더 자세한 설명이 있을 겁니다.)

배포하고 나서 PWA, 즉 모바일 웹앱 기능도 추가할 예정입니다.
누가 굳이 제 사이트를 웹앱으로 쓸까 싶지만 그냥 써보고 싶어서 넣을 예정입니다.