오늘은 Axios를 통해 받아온 데이터의 타입과 구조를 파악한 뒤에
화면에 일정량 보여주려고 한다.
포켓몬 도감이라하면 이미지까지 다 보여주고 싶었지만
내가 받아온 포켓 api에는 이미지까지 나오진 않았다.
url의 그 많은 데이터 내용들이 그 포켓몬 하나의 상세 데이터가 되는줄은
꿈에도 몰랐다.
const PokeApi = () => {
const [pokeList, setPokeList] = useState([]);
function getData() {
const API_DATA = "https://pokeapi.co/api/v2/pokemon?limit=25&offset=0";
Axios.get(API_DATA).then((res: AxiosResponse) => {
console.log(res.data.results);
setPokeList(res.data.results);
});
}
일단 오늘 지금 시간까지 구현을 한건
총 1100여개의 포켓몬 중 25개 정도만 화면에 보여지게 했다.
문장 한줄이지만 사실 엄청난 시간과 노력이 들어갔다.
이제 내가 하고 싶은건 상세 페이지다.
포켓몬의 이름 , 그 포켓몬의 정보가 담긴 url까지 메인 페이지고,
url을 통하면 상세 페이지로 그 포켓몬을 더 자세히 알 수 있다.
문제는 이 url 자체로만 접근하는게 상당히 내 머리를 아프게 한다는거다.
Api로 그 데이터를 가져오는게 다가 아니라 그걸 어떻게 써야하는지
어떤 구조로 생겨먹은지를 파악하는게 중요하다는건 알고 있었다.
같은 벽에 계속 부딪히는 느낌이다.
아프다.
오늘의 한 마디 : 아직 오늘이 지나지 않았다.
