오늘은 포켓몬 상세 페이지를 구현하는게 목표였다.
여느 때와 다름없이 생각지도 못한 부분에서 막혀서 무려 3시간을 잡아먹었다.
Axios 를 사용해서 api를 받아와 데이터 구조를 파악하는것은 최근에 익숙해진 부분이다.
데이터 타입을 파악해서 모델링하고 내 코드에 적용시키는 것도 낯선 부분이지 어려운
영역이 아니라는 걸 이젠 안다.
이번에 내가 헤맨 부분은 구조가 깊어지면서 상세 데이터를 받아옴에
어려움을 느꼈다.
일단 타입 정의 코드를 보자.
export type PakemonDetailData = {
abilities: TestPoke[];
}
export type TestPoke = {
ability: {
name: string;
url: string;
};
is_hidden: boolean;
slot: number;
};
완성된 코드를 보면 내 노력과 고뇌의 흔적이 전혀 안보인다.
억울하지만 내가 지금 봐도 어디서 3시간을 썼는지 전혀 알 수가 없다,,
난 저 abiltiy 안에 있는 name 프로퍼티에 접근하고 싶었고,
무수히 나오는 undefined 속에서 이유도 알 수 없었다.
접근과 타입 정의에 오류가 있었고, TestPoek 안에 0번째 인덱스로 존재하고
그 안으로 접근해야한다는 사실을 모르고 있었다.
오늘 느낀 점 :
console.log() 를 통해 확인해본 데이터의 구조를 그대로 긁어와 타입 정의를 해야겠다.
오늘 한 마디 :
삽질했고 노력했다. 완성된 코드만 보면 그 노력을 알 수 없다. 억울하다.
또 한 걸음 갔다는 사실에 만족한 하루였다.
