결론부터 정리

1. 버전 업데이트는 역시 함부로 하는게 아니다.

2. next의 ./image-config.js 는 버그다! 원인은.. 나도 모른다. pnpm 탓이다!

3. 참 재미있었다. 끝~

처음 계획했던 구상이 마무리 되었다. 원래는 한 세시간쯤 생각했던 가벼운 업데이트였는데.. 어영부영 놀고 먹은 시간 빼도 거의 이틀 가까이가 걸려버렸다.

처음 구상은 이랬다.

pnpm 으로 전환.
next, react 가장 최근 버전으로 업.
기타 사용하지 않는 파일 삭제.

.. 아무리 생각해봐도 오래 걸릴 일이 아니었는데..

3번의 경우 처음에 템플릿 을 포크해서 만든거라 내가 쓸 생각이 없는 기능들이 너무 많이 있었다.
그 중에는 메일 기능이나 댓글 기능도 세 종류씩 템플릿이 준비되어 있었다.
처음에는 적응하는 시간도 필요하고 '놔두면 언젠가는 소스라도 써보겠지.' 싶어서 놔두었다가 그게 벌써 이렇게 시간이 지나버려서,
이번 기회에 정리를 한번 해보자라는 생각을 했었다.

자, 그래서 가장 시간이 오래 걸린 부분은 어디냐 하면,
의외로 1번이었다.
기존에 npm을 사용했고, 다른 프로젝트 해보면서 이미 글로벌에 pnpm은 준비 되어 있었다.
그래서 그냥pnpm은 node_modules 파일 지운채로 install 하면 그만이겠거니 했다.

그런데 pnpm을 예쁘게 세팅해놓고 pnpm으로 처음 dev 스크립트를 돌렸는데..

Error: Cannot find module './image-config'

그 밑으로 블라블라 막 써지고 배포도 (당연히) 안되는 것이었다.

에러 메시지를 기반으로 계속 검색했다. 찾고 찾고 또 찾고. 스택오버플로우도, 구글도, 챗지피티도 빙도 명확하게 답변해주는 곳이 없었다.

하긴 그렇지. 단순히 모듈 하나 못찾는다고 검색해보는게 이상하지. 하면서 어디서 에러가 났나부터 찾아가봤다.

(생략)\node_modules\next\dist\server\config-shared.js

Require stack 이라고 하면서 이 파일이 처음에 뜨는데 진짜 그 파일은 없었다.
응? node_modules인데? next\dist\server인데?
알고 보니 다른 경로에 저 파일은 있었다.

혹시나 싶어 next reference에 있던 Automatic Setup 가이드대로 패키지 매니저 별 임시 테스트 파일들을 싹 다 만들어봤다.

오호. 찾았다.

npm, yarn은 정확히 같은 형태로 파일을 가져오는데, 유독 pnpm만 다른 형태로 파일을 가져왔던 것이다.
한마디로 npm, yarn에서는 별 문제 없이 돌아가는데 pnpm으로 setup 했을때만 다른 경로에서 호출해오는 버그였던 것이다.

어차피 저 패키지 매니저는 모두 npm repository에서 가져오는게 아닌가..?

아무튼 그래서 내가 내린 결론은.......... 그냥 npm으로 가기로..

멋있게 찾은 문제를 수정하고 멋있게 PR 올려보고 싶었는데.. (내 기준에는 저런게 멋있는거임... ㅈㅅ)
우선 바로 위에 적어놓은 패키지 매니저가 어떤 경로에서 어떻게 파일을 가져오는지에 대한 개념도 이해를 못했기 때문에 그렇게는 못하고
그냥 그동안 수정한 내용을 하나씩 다시 다 되돌렸다.

2번. next@13, react@18

이건 사실 버전만 올렸다 뿐이지 별 다른 기능을 더 추가해야겠다 이런 생각을 하지는 않아서 크게 오래 걸리지는 않았다.
next@13이 12버전때와는 조금 달라진게 있었는데, 구글 폰트도 기본적으로 내장해서 쓸 수 있게끔 하는 방법도 생기고..
next/Link 나 이런 조금씩 변경된 부분만 찾아 바꿔주면 되는 내용이라서 공식 레퍼런스 따라가면서 조금 고쳐주었다.

아, dynamic 을 조금 넣어봤다.
간단히 말하면 비동기로 import하는 용도로 썼다.
위에 작성했듯 이 블로그가 스타터 템플릿을 포크해온거라 처음부터 있던 내용이 거의 무슨 라이브러리 같았다.

그래서 불러오는 것도 많고 해서 사용하지 않는 파일들을 하나씩 삭제해가면서 components들에 살짝 dynamic을 한겹씩 입혀줬다.

초기 렌더링 시에 약간의 번쩍거림은 있지만서도 확실히 다 페인팅 된 후에 가져오는게 아니다보니 그 이후의 동작에서 체감 면에서 빨라진게 느껴졌다. 고치기 잘한듯.

그리고 3번. 3번도 별로 큰 내용은 아니다.
안쓰는 파일과 코드는 삭제하고 필요한 패키지만 남기고 dependencies 정리.. 였던 것 같다.

작업하는 과정을 중간중간에 캡쳐해놓고 기록을 해두었으면 좋았을 걸 했다.

중간중간에 에러도 몇 번 나고 했었는데 비교적 금방 금방 고쳐지거나, 쓰는줄도 몰랐던 production 환경에서 preact가 내는 에러라든가 (난 이 블로그에 preact가 쓰이고 있는줄도 몰랐다.)

간단히 preact가 냈던 오류에 대해 적자면,
dev 상태에서는 별 문제 없던 다크모드가 deploy가 되고, production 환경만 오면 먹통이 되는 것이었다. 더불어 로고 속 svg color까지.
<ThemeProvider /> 에서 생긴 문제였는데, 당연히 테마이니까 tailwindcss 가 낸 줄 알았지.
테마공급자는 나는 styled-components에서밖에 써본적이 없는데.

그래서 이 것도 원인 찾느라 헤매다가 next.config.js 속에 dev와 production 이 preact로 분리되어 있는걸 보고, 그 이후에는 뭐.. 금방 해결됐다.

우선 1번부터 너무 시간도 지체되고 피곤해진 상태라 진행 속도가 더뎌진 점이 있었다.

아 뭔가 하는 과정이 재미는 있고, 어쨌든 처음 구상만큼 나왔을 땐 뿌듯한 느낌도 있긴 한데.. 한동안은 하고 싶지 않긴 하다 ㅋㅋ