[LoL info App] 0313 트러블슈팅

25.03.13 Today I Learned💡

1. ‘일치하는 오버로드가 없다’는 에러 (serverApi.ts)

2. 객체 데이터를 배열로 변환

3. Next의 Image 태그의 src 속성에 동적인 url

4. 챔피언 목록 페이지 타입에러

---

 

'일치하는 오버로드가 없다' 는 에러(serverApi.ts)

 

• fetch()의 첫번째 인자는 문자열(url) 👉🏻 await로 promise 벗기기

// roitDataURL.ts

// 챔피언 목록 API
export const CHAMPION_LIST_URL = async (): Promise<string> => {
  const version = await getLatestVersion();
  return `${RIOT_BASE_URL}/cdn/${version}/data/ko_KR/champion.json`;
};

// serverApi.ts

// 챔피언 목록 패칭
export async function fetchChampionList(): Promise<Champions[]> {
  const chamUrl = await CHAMPION_LIST_URL(); 👈🏻 chamUrl은 Promise
  const res = await fetch(chamUrl, { next: { revalidate: 86400 } });
  const { data } = await res.json();

  return Object.values(data);

 

 

객체 데이터를 배열로 변환

 

* API 응답 분석하기

* 객체 중에 동적으로 변하는 key(1001,1004 등)를 동적인 다른 타입으로 지정(이름이 같은 아이템이 있으므로 name 속성으로 key 지정 불가)
* Object.values 로 객체 -> 배열 변환 하지만, value만 주어 map에서 key 사용 못함 => Object.entries()
* 타입을 [string, Item][] 으로 지정

// serverApi.ts

// 아이템 데이터 패칭
export async function fetchItemList(): Promise<[string, Item][]> {
  const itemUrl = await LOL_ITEM_URL();
  const res = await fetch(itemUrl, { cache: "force-cache" });
  const { data } = await res.json();

  return Object.entries(data);
}

 

Next의 Image 태그의 src 속성에 동적인 url

 

• next.config.mjs 파일 설정
  • 프로토콜, 호스트네임, 패스네임
  • (modules.export -> const / export default) 참고한 블로그

 <Image
     src={`${img_Url}${champion.image.full}`}
     alt="Picture of the Champion"
     width={250}
     height={250}
     className="mx-auto flex rounded-lg shadow-2xl"
  />

// next.config.mjs
/** @type {import('next').NextConfig} */
const NextConfig = {
  images: {
    formats: ["image/avif", "image/webp"],
    remotePatterns: [
      {
        protocol: "https",
        hostname: "ddragon.leagueoflegends.com",
        pathname: "/**",
      },
    ],
  },
};

export default NextConfig;

 

 

챔피언 목록 페이지 타입에러

 

• 비동기 함수 return 값 제네릭 (fetchChampionList)

// 챔피언 목록 패칭
export async function fetchChampionList(): Promise<Champions[]> {
  const chamUrl = await CHAMPION_LIST_URL();
  const res = await fetch(chamUrl, { next: { revalidate: 86400 } });
  const { data } = await res.json();

  return Object.values(data);
}