Next.js 프로젝트 트러블 슈팅 4

• 문제점 1 : 아이템 목록에서 맵을 돌려야되는데 키로 줄만한 특정한 값이 없는게 문제
• 해결방안 :

{items.map((item, index) => (
          <div
            key={index}
            className="group shadow-md rounded-lg overflow-hidden"
          >
            {/* 아이템 이미지 */}
            <div className="relative h-32 sm:h-36 md:h-40 flex justify-center items-center">
              <Image
                src={`${BASE_URL}/cdn/${latestVersion}/img/item/${item.image.full}`}
                alt={item.name}
                width={150}
                height={150}
              />
            </div>
            {/* 아이템 정보 */}
            <div className="p-4">
              <h2 className="text-lg font-semibold text-center ">
                {item.name}
              </h2>
              <p className="text-sm text-gray-500 text-center mt-2">
                {item.plaintext || "설명 없음"}
              </p>
            </div>
          </div>
        ))}

 

특정한 값이 없을 땐 파라미터에 index를 추가해서 키에 인덱스 값을 넣어주면 됨다. 사실 키값으로 유니크한 값을 주는게 좋긴하지만 정 없을 때는 인덱스를 넣어주면 됨!!

 

 

 

---

 

 

 

• 문제점 2 : 함수에 타입을 잘못줘서 에러 와장창
• 해결방안 : 

export async function fetchVersion(): Promise<Champion[]> {
  //최신 버전 정보 가져오기 api
  try {
    const versionRes = await fetch(`${BASE_URL}/api/versions.json`);
    if (!versionRes.ok || !versionRes)
      throw new Error("버전정보를 가져오지 못했습니다");

    const versionData = await versionRes.json();
    const latestVersion = versionData[0];
    return latestVersion;
  } catch (error) {
    console.error("fetchVersion api호출 실패", error);
    throw new Error("최신정보를 가져오지 못했습니다");
  }
}

 

여기서 함수에 타입을 Champion[]을 줬는데 타입에러가 엄청남.. 

export interface Champion {
  version: string; // 데이터 버전
  id: string; // 챔피언 ID
  key: string; // 챔피언 고유 키 (숫자 형식 문자열)
  name: string; // 챔피언 이름
  title: string; // 챔피언 직함
  blurb: string; // 챔피언 요약 설명
  info: ChampionInfo; // 공격/방어/마법/난이도 관련 정보
  image: ChampionImage; // 이미지 관련 정보
  tags: string[]; // 챔피언 태그 (예: Fighter, Mage 등)
  partype: string; // 자원 유형 (예: Blood Well, Mana 등)
  stats: ChampionStats; // 스탯 정보
}

 

 

챔피언 타입 안에 버전이 있길래 이걸 그대로 써도 되는줄 알았는데 버전정보 타입이 스트링이기 때문에 타입도 스트링으로 줘야함

 

export async function fetchVersion(): Promise<string> {
  //최신 버전 정보 가져오기 api
  try {
    const versionRes = await fetch(`${BASE_URL}/api/versions.json`);
    if (!versionRes.ok || !versionRes)
      throw new Error("버전정보를 가져오지 못했습니다");

    const versionData = await versionRes.json();
    const latestVersion = versionData[0];
    return latestVersion;
  } catch (error) {
    console.error("fetchVersion api호출 실패", error);
    throw new Error("최신정보를 가져오지 못했습니다");
  }
}

 

 

• 느낀점 : 타입스크립트 타입 정의하는게 너무 헷갈린다.. 아직 자바스크립트도 어렵고,,,, 공부 하면 할수록 어렵네