🥞 오늘 한 일

• 넥스트 개인과제
  • vercel 배포 시 이미지 오류 해결
  • 과제 해설 1~4 수강 및 리팩토링 완료

🍽️ 트러블 슈팅

넥스트 개인과제

vercel 배포 시 이미지 오류

문제

vercel로 프로젝트를 배포했는데, 로컬에서는 이미지가 잘 불러와지지만 배포된 링크에서는 이미지가 제대로 가져와지지 않고, 402 payment Required 오류가 뜨는 것을 알 수 있었다.
때문에 해당 부분에 대해서 찾아보았는데, Next.js에서 제공하는 Image 컴포넌트의 최적화 횟수의 제한을 넘어섰기에 이미지를 불러올 수 없었던 것이다.

해결

때문에 그냥 img 태그로 변경하여 간단하게 문제를 해결할 수 있었다. Image 태그가 자동으로 최적화시켜주는 건 좋긴 하지만, 무료 버전에서 이렇게 제한적이라면 계륵이 아닐까 하는 생각도 든다...

// 변경 전
<Image
  src={pokemon.sprites.front_default}
  width={100}
  height={100}
  alt={pokemon.korean_name}
  className="mx-auto"
/>

// 변경 후
<img
  src={pokemon.sprites.front_default}
  width={100}
  height={100}
  alt={pokemon.korean_name}
  className="mx-auto"
/>

🍴 돌아보기

배포까지 넥스트 개인과제를 잘 마무리한 것 같아 다행이다. 다음 주부터는 끝날 때까지 쭉 이어지는 팀 프로젝트 중 심화 프로젝트가 시작되기에, 주말 간 마음을 잘 가다듬어야할 것 같다.

🍳 내일 목표

• 넥스트 개인과제
  • 과제 해설 기반 리팩토링 남은 부분 진행