[TIL__LoL_트러블슈팅(2)] 3/13

1. 이미지가 안 나와요!

아이템의 이미지를 화면에 렌더링하기 위해 라이엇 공홈에서 제공하는 url를 사용해서 넣어줬다

하지만 이런 에러를 만나게 되었다

url의 마지막 부분에 이미지의 아이디를 넣었을 때 이미지를 잘 가져오는지 테스트 해보았다

이상이 없다

해결 : 에러메시지에 적혀있는 see more info(https://nextjs.org/docs/messages/next-image-unconfigured-host)를 따라갔다

이미지를 사용하기 위해서는 next.config.js를 수정해야한다는 것을 알게 되었다

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'assets.example.com',
        port: '',
        pathname: '/account123/**',
        search: '',
      },
    ],
  },
}

hostname과 pathname에 내가 이미지를 가져오는 주소를 분할해서 넣어주면 끝!

 

.....

저렇게 pathname에 item을 박아버리면 저 버전의, 아이템 목록만 가지고 온다

그래서 나중에 챔피언 할 때는 이미지 경로를 어떻게 해야하는거지 생각하고 있었는데

팀스크럼하다가 해결방법을 알게 되었다

pathname에 /**만 넣어주면 전체를 가져오는걸로 인식을 한다!

이 부분만 수정해주니 이후 챔피언 목록의 이미지를 가져올 때도 잘 작동하였다

---

2. 어떤 값은 잘 나오고 어떤 값은 그냥 object라고 뜬다?

api에서 data 받아와서 콘솔로 값을 확인해보는데 분명 타입을 다 넣어줬는데도 값이 안나오는 것들이 있었는데 객체나 배열이었다

위에서 items를 받아올 때와 똑같은 로직인데 왜 안되는건지 이상하다고 생각했다

왜냐면 image안에 들어있는 값을 확인했기 때문에 url을 수정해서 넣어줄 수 있었기 때문이다

지금은 안되는데 왜 그때는 됐을까 

비밀은 간단했다

그때는 아이템 전체도 출력해봤지만 아이템 하나만도 출력해봤던 것!!!

거기에서 이미지 객체 안에 든걸 확인했었나보다

 

보통 브라우저에서 콘솔찍으면 객체나 배열은 접힌 상태로 나오는데 그걸 펼쳐서 확인할 수 있다

지금은 서버 컴포넌트라서 펼칠 수 없어서 이미지는 화면에 잘 나오는데 콘솔창에서만 Object로 나왔던 것이다

 

해결된 김에 객체나 배열로 된 타입들은 분리를 해줬다

그래서 챔피언을 불러올 때, 아이템들을 불러올 때 타입 객체를 재사용할 수 있게 되었다 굳!