[2024.07.01] next.js 개인과제 트러블슈팅_외부 이미지 사용

이번주차 과제는 귀여운 포켓몬 도감을 만드는 일! next.js를 많이 사용해보지 않아 어색하고 모르는 부분도 많지만, 그만큼 트러블 슈팅 회고할 내용이 많아지니 좋은 게 아닐까? next.js는 알아갈 내용이 너무 많아서 요즘 하루하루가 새롭다. 이 글을 작성하고 있는 새벽에도 방금 전까지 오류와 싸우고 왔다...(이겼지요~)

귀여운 포켓몬들

외부 이미지 사용 에러

이렇게 외부 API를 사용하여 포켓몬들의 리스트들을 격자형태로 만들어주는 것이 시작이었는데, 정적인 이미지 파일이 아닌 외부의 이미지 파일을 사용하려니 아래와 같은 에러가 생겼다

 

빨간줄 쫙~

왜 이런 오류가 생길까?

next/image는 성능 최적화를 위해 이미지 로딩을 관리하는 컴포넌트로, 이미지 호스트를 명시적으로 지정해야 한다. 이를 통해 외부 이미지 URL을 사용할 때 발생할 수 있는 보안 문제를 방지할 수 있게 된다. 그렇기에 외부 URL에서 이미지를 로드할 때, 해당 URL의 호스트네임이 next.config.js 파일에 정의해두어야 한다!

 

오류 해결하기

수정한 next.config.js 파일

protocol-hostname-pathname을 에러에 나온 대로 차례로 지정하니 에러가 해결되며 정상적으로 사진을 불러올 수 있었다. 위의 방법보다 더 범용적으로 외부 이미지를 불러올 수 있는 방법들도 있었는데, 보안상 이런 번거로운 방법을 사용하는데 다른 경로에 대한 패턴을 추가하는 건 별로 좋지 않아 보여서 사용하는 api에 한정하였다.

 

조금 더 알아보기(/*와 /**의 차이)

pathname을 작성하다가 알게 된 내용. /**을 사용하여야 해당 경로 이하의 모든 경로들을 포함한다고 한다.

 

next.js가 라우팅도 알아서 해주고, 편리한 기능도 많지만 그만큼 알아야 성능이 제대로 나올 것 같다. 지금은 그냥 불러다 쓰고 성능 생각 없이 사용하는 느낌이어서 뭔가 더 최적화 할 방법들을 찾아보는 게 이번주의 가장 큰 난관일 것 같다.