[TIL__LoL_트러블슈팅(4)] 3/18 vercel 배포 후 에러

1. 404:NOT_FOUND

배포 후 첫 화면이 404:NOT_FOUND 화면이었다,,,

빌드도 잘 되었는데 왜 404가 뜰까

 

vercel에서는 champion을 찾을 수 없다고 했다

로컬에서는 너무나 잘됐기에 도무지 이해가 가지 않았다

기존의 @로 import한 부분도 저렇게 상대경로로 넣어주기도 했는데 안됐다

그러다가 이 블로그 글을 보게 되었다

https://velog.io/@shyuuuuni/Vercel-Cannot-find-module-%ED%8C%8C%EC%9D%BC%EB%AA%85-or-its-corresponding-type-declarations-%EC%98%A4%EB%A5%98-%ED%95%B4%EA%B2%B0

Vercel - Cannot find module '파일명' or its corresponding type declarations 오류 해결

혹시 나도 설마 하고 깃헙을 들어가보니 로컬에는 champion으로 적힌 파일이 Champion으로 들어가있는게 아닌가!!!

요놈이로구나 하고 터미널에

git config core.ignorecase false

 

이걸 넣어주고 커밋을 했다 이제 되겠지하고 vercel을 확인했는데 또 오류났다 같은 파일이 있다고,,? 이게 뭐지 하고 깃헙을 보니,,,!

세상에나 복사본으로 들어가진 것,,!

문제는 pull해도 로컬에는 반영이 되지 않았다

결국 깃헙에서 직접 삭제해주었다

 

mac os는 대소문자를 구분하지 않는다는것 명심 또 명심!!

---

2. Route handler 오류

원래는 localhost:3000으로 패치해오다 이제 배포했으니 배포한 url을 넣어줘야 하는데 계속 데이터를 가져오지 못하는 문제가 있었다

1번의 방법을 쓰다가 vercel은 자동으로 앞에 url을 넣어주니 굳이 넣어주지 않아도 된다는 튜터님의 말씀을 듣고 2번의 방법을 사용했고 해결이 되었다!

---

3. server 컴포넌트에서 쓰이는 환경변수와 client 컴포넌트에서 쓰이는 환경변수가 달라요?

환경변수에 Riot에서 쓰이는 api key를 넣어줘야 했는데 발제문서 + 구글링한 결과 NEXT_PUBLIC을 접두사로 써야 한다고 했다

그래서 그렇게 썼다

 

그러다가 서버 컴포넌트에서는 NEXT_PUBLIC을 붙이지 않는다 붙이면 그 값이 노출되기 때문에 쓰는 의미가 없다

라는 말을 듣게 되어 다시 발제 문서를 보았다

 

발제 문서는 수정이 되어(발제날 다운해놓은 팀원꺼랑 비교해봄) NEXT_PUBLIC이 사라져있었다

강의 문서에서도 클라이언트 컴포넌트에서만 NEXT_PUBLIC을 접두사로 사용해야한다고 적혀있었다

저 api key를 통해 받아온 데이터를 뿌려주는 곳은 클라이언트 컴포넌트이지만,

실제 key를 사용하는 곳은 라우트 핸들러 즉 서버 컴포넌트이기 때문에 NEXT_PUBLIC을 빼야 한다고 생각해서 빼주었다

여전히 잘 작동했다!

---

4. 불필요하게 파일이 추가된 죄,,

이전에 vite를 통해 react 프로젝트를 만들 때는 create vite react(정확하게 기억안남). 을 하면 해당 폴더에 만들어졌는데

npx create-next-app은 .이 먹히지 않았다

계속 my-app을 추천하길래 이렇게 해야하나보다 하고 했는데 그 결과 프로젝트 폴더 - my-app - 깃폴더 이렇게 되었다

프로젝트를 시작하고 나서야 npx로 만들고 그 후에 git remote add를 해야 한다는걸 알게 되어 돌아갈 수 없다고 생각했다

 

이 스노우볼은 배포에서 문제가 생겼다

root directory를 설정해 줘야 했다

그래도 덕분에 이런 일이 생겼을 때 어떻게 해결해야 하는지 알게 됐다(럭키비키잔앙~)

 

+ 그리고 framwork Preset에 other가 기본으로 잡혀서 설정해주지 않았는데 next.js를 꼭 해줘야한다!!

안했더니 CORS에러 났다

---

배포하고 이렇게 많은 에러를 만난 적은 처음이었다,,,,

덕분에 많은 것을 배울 수 있었다

그치만 잘된다고 생각했는데 에러가 나니 너무 머리가 아팠다ㅜ