241002 Next.js 개인과제 진행 01 - 트러블 슈팅

신한별·2024년 10월 2일

개인과제 트러블슈팅

💪 매일 기록

목록 보기

76/97

🤬 아이템 목록 key 오류

1. 문제발생

build & start 하면 안 뜨는데 dev에서만 저런 오류가 뜬다.

2. 원인추론

     <h1 className="text-red-500">아이템 목록</h1>
      {Object.values(itemsList).map((item) => (
        <div className="grid grid-cols-4 gap-4" key={item.name}>
          <div className=" border rounded p-4 hover:shadow-lg">
            <Image
              className="rounded-sm object-scale-down"
              width={80}
              height={80}
              src={`https://ddragon.leagueoflegends.com/cdn/14.19.1/img/item/${item.image.full}`}
              alt={item.name}
            />
            <h2 className="mt-2 text-xl font-semibold">{item.name}</h2>
            <p className="text-gray-500">{item.plaintext}</p>
          </div>
        </div>
      ))}

키 값 설정할 때 id값 없어서 item.id설정 안되길래 그냥 item.name 해줬더니 저런 오류가 뜨는 것 같았다.

아이템 목록 json 구조가 이렇게 되어있었는데 Object.values() 를 사용해서 id를 못 가져와서 그런 것 같았다.

3. 해결방안

Object.entries() 로 바꿔서 id까지 같이 가져와보기로 했다.

 {Object.entries(itemsList).map(([id, item]) => ( // entries로 바꿔서 [key, value] 쌍을 가져옴.
        <div className="grid grid-cols-4 gap-4" key={id}> // item.name 대신 id를 넣어줌
          <div className=" border rounded p-4 hover:shadow-lg">
            <Image
              className="rounded-sm object-scale-down"
              width={80}
              height={80}
              src={`https://ddragon.leagueoflegends.com/cdn/14.19.1/img/item/${item.image.full}`}
              alt={item.name}
            />
            <h2 className="mt-2 text-xl font-semibold">{item.name}</h2>
            <p className="text-gray-500">{item.plaintext}</p>
          </div>
        </div>
      ))}

4. 결과

깨끗해진 콘솔창 🤗

🤬 로테이션 페이지 필터링 오류

1. 문제발생

number[]이 string과 겹치지 않으므로 이 비교는 의도하지 않은 것 같습니다. (뭔 소린지)

2. 원인추론

배열이랑 단일값을 비교하려고 하니 오류가 나는 것 같았다.

3. 해결 방안

Array.prototype.includes()를 써서 비교해주려고 했는데, 새로운 오류가 난다.
champ.key는 string이고 freeChampionIds는 number 값이라 그런 것 같았다.
아예 타입 설정에서 string=>number 바꾸려다가 뭔가 나중에 복잡해질 것 같은 느낌이 들어 Number()를 써서 바꿔줬다.