FACTS(사실, 객관) : 내가 한 일
Lol-dex - 타입지정
문제발생
제출 직전 타입을 확인해보는데 any가 들어가 있는 것을 확인하고 이걸 수정하는 과정에서 문제가 생겼다.
타입을 지정해주고 나니 내가 가져오는 데이터는 객체형태인데 그걸 return에서 map을 돌려주고 있어서 오류가 난 것.
(근데 여기에 더해 as ItemInfo[]로 타입을 단언해서 vs상에선 에러가 안났는데 실제로 에러가 나는 상황이 발생..)
원인추론
이 객체로 된 것을 배열로 가져와야 했다.
해결방안
타입지정부터 문제였다고 하셨음 ㅠㅠ
나는
export type ItemInfo = {
name: string;
plaintext: string;
image: {
full: string;
};
gold: {
base: number; // 베이스 가격
purchasable: boolean; // 구매 가능 여부
total: number; // 총 가격
sell: 210; // 판매가격
};
stats: { [key: string]: number }; // => 있을 수도 있고, 없을 수도 있고, 안에 들어갈 내용이 객체마다 다름
};
이렇게만 작성을 했었는데
"data":{
"아이템1":{
"name":"pen"
"color":"red"
}
}
이런 데이터라 치면, 아이템 1 안의 값들만 작성해서 Object.values(response.data)를 사용할 수 없었다.
=> Object.values(response.data) 이것을 사용해 아이템정보를 배열로 만들어 map으로 하나하나 보여줄 수 있도록 하려고 했던것
그래서 data에 대한 타입지정도 필요했는데 여기에 Record<>를 사용하라고 하셨다.
export interface ItemFullInfo {
data: Record<string, ItemInfo>;
}
이렇게. Record는 객체타입을 생성할 때 사용하는 것으로. key값은 "1001"등의 string, value값은 먼저 지정해뒀던 ItemInfo를 가져왔다.
export const fetchItemList = async () => {
const data = await fetch(`${commonUrl}/item.json`);
const item: ItemFullInfo = await data.json();
if (!data.ok) {
return { message: "에러가 발생했습니다." };
}
return item;
};
그리고 item에 ItemInfo대신 ItemFullInfo를 지정해주고,
const items = Object.values(response.data);
Object.values로 가져오면 items에 배열로 담을 수 있게 된다.
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지