🎯 포켓몬 API를 통해 포켓몬의 상세 데이터 받아오기

<aside>

포켓몬 API에서는 포켓몬 정보를 세대별로 한꺼번에 주지 않아서, 각 포켓몬의 이름이나 ID를 변수로 설정하여 따로 받아와야 했다.

이 때문에 각 지방별로 총 도감번호를 확인한 후 이와 동일한 크기의 임의의 배열을 생성해서 작업하였다.

</aside>

<aside>

❓ Problem : 복잡하고 많은 양의 데이터 / 정보 표기가 영어

포켓몬의 정보가 위처럼 영어를 기본으로 표기되어 있었고, 복잡한 데이터에 접근하려면 타고 타고 또 타고 들어가야 했다.. 이 때문에

이름 관련된 정보를 제공하는 개별적인 API주소를 통해 따로 데이터를 얻어와야 했고, 그 데이터 안에서도 한글로 제공하는 이름을 찾아와야 하는 작업이 필요했다.

마찬가지로 한국어로 제공되는 도감설명을 찾아와야 했다.

</aside>

🎯 포켓몬 도감 카드에 타입 명시

<aside>

포켓몬카드에 각각의 포켓몬들의 타입을 명시하는 작업이 생각보다 막막하였다. 왜냐하면 포켓몬의 타입은 무려 17개이고, 타입이 하나 일수도 두개 일수도 있기 때문이다.

우선 타입에 접근하는 방식은 요즘 JavaScript를 공부한 게 도움이 되었다.

console을 통해 타입 데이터를 확인해보니 배열의 형태로 되어 있었고, map 함수로 해당 배열에 접근하면 타입의 개수가 몇 개든 상관없이 나열할 수가 있겠다는 생각을 하였다.

타입에 접근하는 데에는 성공을 하였고, 이제 남은건 해당 타입별로 어떻게 이미지를 부여할 것인지..

우선 타입 이미지는 서칭을 통해 깃허브에 공개적으로 제공한 레포지토리에서 가져왔다.

포켓몬 타입 17개가 영어로 어떻게 표기되는지 몰라서 걱정을 하였는데, 다행히 공식적으로 정해진 타입 명칭으로 데이터도 제공이 되었다.

그래서 타입에 해당하는 이미지 경로에 타입명과 동일한 이름을 부여한 type객체를 생성하였다.

그 후 위의 코드처럼 img 태그의 src 부분에 해당 포켓몬의 타입명과 동일한 type 객체의 멤버(이미지 경로)를 불러오는 방식으로 구현할 수 있었다.

</aside>

🎯 다양한 React hook 적용

useState를 사용하여 다양한 항목으로 나뉘는 데이터들을 관리함.

useEffect의 실행 순서를 통해 데이터 흐름을 단계별로 조절.