포켓몬 도감을 만들어보자

이기찬·2023년 9월 18일

프로젝트

목록 보기

1/6

포켓몬 도감 - fullfeet-pookimon

개인 프로젝트를 진행 해보기로 하였다. 코딩 공부를 시작한지 8개월이 되었다.

혼자 공부 한답시고 여러 강의 사이트를 전전하면서, 강의 수강 & 자바스크립트 코어 지식 공부 등을 하였는데... 돌이켜 보면 뭔가 많이 한 것 같은데 기억에 남는게 없었다...(내가 직접 고민해서 짠 코드가 아니었음)

이게 문제가 심각한게 내가 코딩 공부를 했다고 착각하게 만든다. 직접 고민하면서 코드를 짜는게 아니다 보니, Alt + tab 하는 속도만 늘어나고 혼자서 공부 했다고 만족 하고 머리 속에 남는 것은 없는 안좋은 결과를 만들어 낸 것 같다...
(물론 강의 내용은 정말 좋았고, 강의를 듣는 것 만으로 실력을 키울 수
있는 분들도 계실 것이다 !)

그래서 왜 포켓몬 ? 😅

포켓몬 API - 이 오픈 API 의 존재는 4~5 달 전부터 알고 있었던 것 같다.

뭔가 신박한 기능을 만들기 보다 할 수 있는 것을 하면서 코딩에 대한 자신감을 끌어 올리기 위해서 활용해보기로 하였다. 어렸을 때 부터 포켓몬을 좋아하기도 하였고, 코딩을 연습하기에 적합하다고 생각해서 pokeapi 를 사용하였다.

결과물

기능

무한 스크롤
Modal 창을 이용한 Detail 출력
반응형 웹 디자인

다 만들고 나니 기능이 많이 부실해보이긴하지만, 처음 혼자서 하는 프로젝트 였기에 꽤나 많은 시간이 들어 갔다.

프로젝트를 하면서 구현하면서 힘들었던 점이나, 해결 과정을 사실 프로젝트를 만들어 가면서 작성했어야 하는데, 게으른 성격 탓에 다 끝나고 작성하게 되었다 ㅠㅠ.

프로젝트의 전반적인 코드 진행과정부터 문제점 까지 하나씩 적어보면서, 다시 한번 내것으로 만들어 보자!

API

이 프로젝트의 거의 대부분인 API 이다.

pokeapi의 공식 홈페이지에 가보면 api를 어떻게 요청하고 받아 올 수 있는지, response / request 의 구조를 확인 해볼 수 있다.

뭐가 많네에...

pokeapi 가 제공해주는 데이터가 상당히 많은데 그 가운데서 내가 원하는 것들만을 가져오는데, 이것저것 뒤져보는 과정에서도 시간이 꽤나 걸린 것 같다.

나는 기본적으로 포켓몬에 대한 정보 (사진 , 타입 , 특성) , 아이템 / 도구 등에 대해 화면에 출력해줄 수 있는 사이트를 만들고 싶었다.
딱히 특별한 기능은 없으나 , 그냥 구경하면서 시간 때울 수 있는 그런 것을 만들고 싶었으니 의도대로 완성은 한 것 같아 만족스럽다..

공식 홈페이지에서 제공 해주는 BaseURL = "https://pokeapi.co/api/v2" 이다.

이것을 활용해서 pokemon , item 을 입맛대로 받아 활용할 수 있다.

기본 포켓몬 요청 function 이다. 무한 스크롤을 사용하고 싶었기 때문에 offset 을 받아 올 때마다 포켓몬의 요청을 증가 할 수 있도록 작성하였다. (아이템 또한 동일함. pokemon <==> item)

라이브러리를 활용해서 무한 스크롤을 구현해보기로 하였고
"react-intersection-observer" 라이브러리를 사용해서 구현 하였다.

import { useInview } from "react-intersection-observer";

function Pokemon() {

const [ref, inView] = useInView(true);

useEffect(() => {
    const uploadData = () => {
      if (inView) {
        setPage((prevPage) => prevPage + 1);
      }
    };
    uploadData();
  }, [inView]);
	
   return(
   	<div ref={ref}>
    	{pokemonData}
    </div>
   );
}   // react-intersection-observer 기본 사용 방법

무한 스크롤 자체를 처음 구현해보았기 때문에 라이브러리를 사용해서 친근하게 접근해보고 싶었다.

Intersection_Observer_API 도 다음 기회에 꼭 사용해 보도록 해야겠다..!

받아오고 싶은게 많아서 API 요청 부분이 매우 길어졌다.

pokeapi 는 기본 영어로 된 정보를 제공하기 때문에 한국어로 받아오기 위해서는 조금 더 복잡해졌다.

도감번호 1번 이상해씨 에 대한 정보를 찾아 볼 수 있다.

능력 , 타입 , 사용기술 등등 엄청나게 많은 정보가 나와있다. 전부 다 가져오는 것은 쉽지 않다고 판단했기 때문에, 꼭 가져오고 싶은 또는 필요한 정보를 찾아 화면에 출력 하였다.

이상해씨 의 한국어 정보