📌 회원가입, 로그인 추가
🔹 ‘무지성 검색’이 무엇인지, 어떻게 하면 ‘지성 검색’을 할 수 있는지 조금 알 것 같다. (feat. TypeError [ERR_INVALID_URL]: Invalid URL)
전에 멘토님께 무지성 검색을 하지 말라는 말을 들었다.
매우 속상하고 신경이 쓰였는데, 왜 그런 말을 하셨는지 알 것 같다.
조금 어감이 쎄긴 했으나 ‘해당 에러가 왜 생겼는지 좀 더 생각해보며 찾아보라’ 정도로 이해하면 좋을 것 같다.
왜냐면 이번에 TypeError [ERR_INVALID_URL]: Invalid URL 에러를 처리하며 (마음 고생도 함께 처리함) 깨닫는 게 있었기 때문이다.
해당 에러를 처리 하면서 나오는 에러 문은 알아들을 수 없는 에러문으로 가득 찼었다..
Error occurred prerendering page "/auth/register". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:405:5)
at new URL (node:internal/url:676:13)
at t.default (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/chunks/41.js:1:22140)
at 74284 (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/chunks/41.js:1:15075)
at __webpack_require__ (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/webpack-runtime.js:1:161)
at 45029 (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/chunks/192.js:1:964)
at __webpack_require__ (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/webpack-runtime.js:1:161)
at I (/home/runner/work/dev-blog-forked/dev-blog-forked/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:5587)
at C (/home/runner/work/dev-blog-forked/dev-blog-forked/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:4266)
at rp (/home/runner/work/dev-blog-forked/dev-blog-forked/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:27:25013)
TypeError [ERR_INVALID_URL]: Invalid URL
at new NodeError (node:internal/errors:405:5)
at new URL (node:internal/url:676:13)
at t.default (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/chunks/41.js:1:22140)
at 74284 (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/chunks/41.js:1:15075)
at __webpack_require__ (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/webpack-runtime.js:1:161)
at 45029 (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/chunks/192.js:1:964)
at __webpack_require__ (/home/runner/work/dev-blog-forked/dev-blog-forked/.next/server/webpack-runtime.js:1:161)
at I (/home/runner/work/dev-blog-forked/dev-blog-forked/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:5587)
at C (/home/runner/work/dev-blog-forked/dev-blog-forked/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:43:4266)
at rp (/home/runner/work/dev-blog-forked/dev-blog-forked/node_modules/next/dist/compiled/next-server/app-page.runtime.prod.js:27:25013) {
input: '',
code: 'ERR_INVALID_URL'
}작업 도중 실수로 올린 PR에는 문제가 없었는데 뜬금없이 다 완료하고 나니 이런 에러가 github action에서 발생했다.
local에서 build할 때도 나오지 않았고 그래서 더 해결하기 어려워했던 것 같다. 또한 구글링을 해도 비슷한 에러가 많이 발생했었는지 discussion에 많이 올라와있었다.
확인했을 때, 종종 NEXTAUTH_URL 이라는 단어가 올라오는 것을 봤는데, 나는 다른 변수명으로 local url과 production url을 사용하고 있었고 전에 올려둔 PR에서는 에러가 나지 않았기 때문에 이 부분에 대해서는 이상이 없을 것이라고 생각해서 넘겼다.
그 상태에서 구글링에 나온 다른 해결법을 찾아도 도저히 해결이 안되었고 나는 하는 수 없이 최후의 보루로 남겨둔, ‘에러 없던 커밋까지 다시 롤백해보기’전략을 선택했다. 하나하나 주석처리를 하며 확인하던 중 대규모로 수정했고 invalid url error라는 에러랑은 관련이 없어보이는 부분 까지 다시 롤백하려니 현타가 와서 다시 방법을 찾아보기 시작했다.
그러자 전에 무심코 스쳐지나갔던 NEXTAUTH_URL 이 눈에 띄었다. 여러 번 보이던 저 단어.. 하지만 내가 참고한 강의안에는 보이지 않았던 단어. 난 이 단어에 대해 지나치지 않기로 마음먹고 discussions을 다시 확인 하던 차에 어떤 이가 해결방법으로 보낸 next-auth의 공식문서 링크를 발견했다. (참고한 discussion 링크)
아예 NEXTAUTH_URL 를 써야 한다고 써져있었다..! (ㅎㅎ..a)
이에 나는 재빨리, 하지만 반신반의하면서 바로 .env.local에는 해당 변수명으로 local url을, .env.production에는 정식 url을 적었고 vercel에도 설정했다. 또한 process.env에서 가져오는 url도 NEXTAUTH_URL 로 바꿨다.
노심초사한 결과, 결국 build가 잘 되었음을 확인 할 수 있었다.
◆ + 추가 에러 발견
하지만 잘 해결되었다고 생각하고 PR을 정리하던 도중 어떤 url에서는 NEXTAUTH_URL 가 undefined로 뜨고 어디서는 잘 나오는 버그를 발견했다.
태도를 조금 바꾸어 너무 절망하지 않고 하나 잘 끝냈으니 이것도 잘 끝낼 거라고 스스로를 다독이면서 하나하나 찾아나갔다.
그리고 결국 정말 문제를 해결할 수 있었다.
원인은 NEXTAUTH_URL 가 server side에서만 렌더링 되는 것이였다. 이러한 특징을 발견한 나는 바로 ssr, csr용 url을 구분하여 적용했고 문제가 해결됨을 볼 수 있었다. (햅삐 엔딩이다 ^ㅇ^)
◆ 과정 속에서 깨달은 점들
내가 이 과정 속에서 깨달은 것은 뭐든 해결책에서 반복적으로 나오는 키워드들은 다시 확인해보고 적용해보자는 것이다. 그리고 error에서 나온 키워드를 중점적으로 찾으면 진짜 버그의 원인을 알 수 있다는 것이다. (여기서는 Invalid URL 였으나 나는 이를 아주 중점적으로 보진 않았다.)
또한 PR은 최대한 쪼개서 올리자는 것, test code를 빨리 짜보자는 것이다. PR을 더 잘게 쪼개어 올렸더라면 더 좁은 단위에서 버그를 찾아볼 수 있었을 것이고 test code를 짰더라면 바로 에러를 찾기 좋았을 것이다. (이 case에서는 prod가 아니여서 못 찾았을수도 있지만 그 추적 범위를 좁히는데 도움이 되었을 것 같다.)
이걸 해낼 수 있을까 많이 두렵고 걱정도 되었다. 이 큰 규모의 PR을 merge할 수도, 많은 노력과 성과가 있기에 그대로 둘 수도 없어 걱정이 많았다.
하지만 결국 해냈다. 꽤나 간단한 방법으로 말이다.
결국 할 수 있으니 바로 풀리지 않았다고 너무 상심하지 않는 것도 개발자의 좋은 태도가 아닐까 싶다. (어제 풀리지 않아서 많이 속상했었다.)
많은 깨달음을 준 버그였다. 수고했다 내 자신. 🤝
📌 useIsLogin 훅 추가하기
🔹 next-auth가 많은 걸 처리해줬다는 생각이 듦.
token, cookie 등 프론트에서 해줬던 기능들을 대다수 next-auth에서 처리해줘서 내가 할 것이 생각보다 많지 않았다.
그래서 편리했지만 이 부분들에 대해 잘 알고 있는 것 같지 않아서 따로 공부를 좀 하는 것이 좋겠다는 생각이 들었다.
일단 프로젝트를 어느 정도 마친 후에 찾아 볼 수 있을 것 같다.
