반응형 구현은 아직 목했지만 우선 배포를 해봄.
배포를 했더니 weather icon 이미지 로드 문제가 생김.
문제 상황
Next.js 애플리케이션에서 WeatherIcon 컴포넌트를 사용하여 외부 도메인의 이미지를 로드하고 있음.
개발 환경(dev mode)에서는 이미지가 정상적으로 표시되지만, 배포 후에는 이미지가 로드되지 않고 alt 텍스트만 표시됨.
브라우저의 네트워크 탭에서 확인한 결과, 이미지 요청에 대해 400 Bad Request 오류가 발생함.
WeatherIcon.tsx
next.config
Dev 모드에서의 weather icon 이미지
배포버전
400번 에러
시도해본 방법
-
이미지 경로:
src 속성에 공백이나 잘못된 경로가 포함되어 있을 가능성 체크 - 문제 없음
-
Next.js 설정 문제:
next.config.js 파일에서 remotePatterns 설정을 확인하고, 제대로 설정되어 있는지 확인 - 문제 없음
-
브라우저 캐시를 삭제하고 페이지를 새로 고침 - 해결 안 됨
-
API 라우트를 통해 이미지를 요청하도록WeatherIcon 컴포넌트를 수정해봄 - 해결 안 됨
현재 상황
위의 확인 사항을 모두 체크한 후에도 배포 후(prod mode) 이미지가 로드되지 않는 문제가 지속됨.
네트워크 요청이 400 Bad Request 오류를 반환하고 있음.
url을 주소창에 직접 넣어보면 이미지가 잘 표시됨.
--> url에는 문제가 없음
payload에도 url이 정상적으로 잘 넘어가고 있음을 확인
response에 invalid_image_optimize_request라고 나온다.
해당 내용을. 구글링 해봄
Stack Overflow에 비슷한 문제를 겪은 사람들은 있는데 시원한 해결책은 안보임.
그 중 하나에서 Image 컴포넌트에 unoptimized 옵션을 true로 설정하라는 내용이 있어서 시도해봄. 오 되는 것 같은데? Preview로 확인하니 됨!!!! 깃헙 레포지토리에 연동된 Vercel 배포 url을 클릭해봄.
안됨~~~
다시 확인해본다.. ㅜ
icon을 보여주는 Image태그를 일반 img 태그로 변경하여 시도해보니 문제가 없다...? 일단 img를 사용하니 이미지 로드가 된다
Vercel deployment 부분을 체크하러 가봄.. 브랜치 dev..
현재 Vercel에서 Git Production Branch가 main으로 설정되어있음.(?) 이부분을 우선 dev로 변경해준다.
다시 Image 태그로 변경해서 하드코딩으로 값들을 넣어본다.
src에 들어가는 url과 getIconSize부분도 number로 넣어주기.
아래 캡쳐와 같이 잘 나옴.
어디가 문제인지 확인하기 위해서 사이즈 부분에 다시 getIconSize로 넣고 deploy 해봄. 문제가 없음. 그렇다면 url을 동적으로 넣는 부분에서 문제가 생기는 게 아닐까 함. 어쨌든 여기까지는 오케이..
icon이 문제라는 걸 확실히 확인하기 위해서 '01d' 부분도 다시 icon 변수로 넣어서 deploy...
잉? 되는뎅.....
아 머징?
프로덕트 브랜치 설정때문인가? 아님 실제 프로덕션 버전 캐시데이터 때문인가?
느낀점
우선 디버깅할 때 내가 뭘 안하고 있는지 알게 되었음.
- image 최적화가 가능한 Image 태그도 있었다는 점
- 이런 경우 하드코딩해서 확인해볼 수도 있는데 그렇게는 안 해봤다는 점
- 프로덕션 브랜치 설정체크를 안했다는 점 --> 계속 dev 브랜치까지만 머지하고 preview로 확인했음. 실제 프로덕션은 버전은 main 브랜치라는 점. 반응형 구현이 완료될때까지 dev에서 작업한다는 생각에 체크를 못한 부분.
- 한번에 하나씩 꼼꼼하게 체크하면서 확인했어야 했는데, 그러지 못했던 것 같음.
- 배포를 제대로 해본 경험이 많이 없어서 그렇다는 생각이 들었음. 앞으로 배포할때는 꼼꼼히 봐야겠음.
