FACTS(사실, 객관) : 내가 한 일
Lol-Dex
문제발생
아이템 목록의 key값을 가져오는것.
아이템 목록은
"1001": {
naem:"~~"
description:"~~"
},
"1002": {
naem:"~~"
description:"~~"
}
"1003": {
naem:"~~"
description:"~~"
}
이런식으로 되어있었는데 내가 가져오고싶었던 값은 "1001","1002" 이런값들.
원인추론
export type Item = {
[key: string]: ItemInfo;
};
이런식으로 해서 ItemInfo는 따로 작성해 key값을 id로 사용하려했는데 대체 어떻게 가져오는지 모르겠어서 질문함!
해결방안
(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/keys)
object.keys() 메서드를 사용해보라고 하셨다.
const object1 = {
a: 'somestring',
b: 42,
c: false,
};
console.log(Object.keys(object1));
// Expected output: Array ["a", "b", "c"]
이렇게 키값을 배열로 뽑아올 수 있는것!
이었는데
import { Item } from "@/types/Item";
import { fetchItemList } from "@/utils/serverApi";
import React from "react";
const ItemsPage = async () => {
const response = await fetchItemList();
const item: Item[] = Object.values(response.data);
return (
<div>
<h1>아이템목록 페이지 입니다.</h1>
<ul>
{Object.keys(item).map((item) => (
<li key={item}>{item.data.name}</li>
))}
</ul>
</div>
);
};
export default ItemsPage;
여기까지 작성하고 잘 안돼서 다시 질문하러감ㅠ
이건 데이터가 복잡하게 작성되어있어서 내가 원하는 값을 키값으로 사용하기엔 당장은 어렵고 일단 필수구현 과제를 마치고, 도전해 보는 것으로 했다.
그래서 저 1001 ~ 이 값들을 키값으로 사용하기 위해 분리했던 타입을 하나로 정리하고
export type ItemInfo = {
name: string;
plaintext: string;
image: {
full: string;
};
gold: {
base: number; // 베이스 가격
purchasable: boolean; // 구매 가능 여부
total: number; // 총 가격
sell: 210; // 판매가격
};
stats: { [key: string]: number }; // => 있을 수도 있고, 없을 수도 있고, 안에 들어갈 내용이 객체마다 다름
};
키값은 name으로 사용하기로 결정해
import { ItemInfo } from "@/types/Item";
import { fetchItemList } from "@/utils/serverApi";
import React from "react";
const ItemsPage = async () => {
const response = await fetchItemList();
const items: ItemInfo[] = Object.values(response.data);
return (
<div>
<h1>아이템목록 페이지 입니다.</h1>
<ul>
{items.map((item) => (
<li key={item.name}>{item.name}</li>
))}
</ul>
</div>
);
};
export default ItemsPage;
이렇게 수정했다.
이제 불러온 아이템들이 화면엔 잘 뜨는데
콘솔창에서 에러가 마구 뜨고 있었다.
번역하면
경고: '지배자의 피갑옷'이라는 동일한 키를 가진 두 명의 어린이를 만났습니다. 구성 요소가 업데이트 중에도 ID를 유지할 수 있도록 키는 고유해야 합니다. 고유하지 않은 키로 인해 하위 항목이 중복되거나 생략될 수 있습니다. 이 동작은 지원되지 않으며 향후 버전에서 변경될 수 있습니다.
name이 유니크한 값이 아니었나..? 아이템 이름이라 당연히 유니크할 줄 알았는데..?
어차피 items를 배열로 가져오고 있어서
설명을 보니 callback함수로 items의 index를 가져오면 될 것같다.
import React from "react";
import Image from "next/image";
import { ItemInfo } from "@/types/Item";
import { fetchItemList } from "@/utils/serverApi";
export type Item = Pick<ItemInfo, "name" | "plaintext" | "image">;
const ItemsPage = async () => {
const response = await fetchItemList();
const items: Item[] = Object.values(response.data);
return (
<div>
<h1>아이템목록 페이지 입니다.</h1>
<ul>
{items.map((item, index) => (
<li key={index}>
<Image
src={`https://ddragon.leagueoflegends.com/cdn/14.19.1/img/item/${item.image.full}`}
alt={item.name}
width={80}
height={80}
/>
<h1>{item.name}</h1>
<p>{item.plaintext}</p>
</li>
))}
</ul>
</div>
);
};
export default ItemsPage;
이렇게 수정하니 에러도 안뜨고 잘 나온다 !
ISR방식으로 구현한 페이지가 정말 설정해놓은 시간마다 revalidate(재검증)이 되긴 하는건지 확인하는 방법
export const revalidate = 86400;
나는 하루마다 재검증을 하기위해 86400으로 작성했는데 이게 진짜 revalidate 되고 있는게 맞나? 싶어서 확인해봤다.
이것을 일단 좀 줄여서 86400(하루)을 => 5(5초)로 설정
그리고 console.log("아무거나")를 return 바로 위에 작성한다. 정말 아무거나 콘솔로 찍는다.
그리고 저장하면
저장만 되고 아무일도 일어나지 않는데
브라우저에서 페이지를 열어 새로고침한다.
그럼 터미널에 콘솔로 작성한 아무거나가 찍힌다!
근데 이게 5초마다 revalidate 되는거라 새로고침 할 때마다 찍히는 것이 아니라 어쩔땐 찍히고 어쩔 땐 안찍힌다!
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지