과제 git Hub링크 readMe에 더 자세히 적어둠

인게임 느낌의 포켓몬 도감으로 디자인 수정함

방향키로 위아래 가능

밑에서 15마리 정도 될 때 추가 데이터 페칭 (무한 스크롤)

차트로 스텟 상태 나타냄

상세페이지의 반짝이 버튼 누르면 사진이 이로치로 바뀜 (영상 안 찍었네;;)

데이터 한글화함

•  

  스펙

  • React, Vite, ts

  • React-query

  • Emotion

  • Recharts

     

   

  설명

  인게임 포켓몬 도감을 모티브로 구현을 해봤습니다.

   

   

  프로젝트 주목표

  1. API를 분석하여 자원을 효율적으로 분배

  2. react-query의 useInfiniteQuery를 활용한 무한 스크롤 구현

  3. rechart 차트라이브러리를 활용한 데이터 시각화

  4. Emotion을 활용해 공통 컴포넌트를 스타일드 컴포넌트로 구현하여 활용성을 높임

  5. forwardRef를 활용해 부모요소에서 자식 요소의 스크롤 이벤트를 관리

프로젝트 목표 상세

1. API를 분석하여 자원을 효율적으로 분배

   이번 미션에서 가장 오랜 시간 고민한 부분이 이 부분이다. 대부분 참가자는 무지성으로 pokeAPI에 /pokemon/id로 fetch를 보내서 이름을 받아오고, 반복문을 돌려 species에서 사진을 받아와서 메인페이지를 랜더링한 걸로 알고 있다. 결론부터 말해, 이 방식은 굉장히 비효율적이다. /pokemon/id는 건당 대략 13,000 줄의 응답이 오며, species 역시 1,300 줄 정도의 응답이 온다. 따라서, 이름이나 사진 하나 받기 위해 요청을 보내는 건 효율적이지 않다. api를 분석해본 결과 /pokemon 경로에 요청을 보내 이름만 받아오는 경우가 가장 효율적인 것을 알아냈다. 이는 20 마리의 포켓몬 이름에 대해 140 줄 정도의 간결한 응답이 오므로 위의 두 요청에 비해 굉장히 효율적이다. 또, 사진이나 포켓몬의 데이터를 찾아보면 꽤나 다양한 사이트들이 나오며, 데이터에 규칙성이 있어 외부 사이트에서 사진이나 데이터를 갖고 오는 것도 충분히 가능하다.

    

2. react-query의 useInfiniteQuery를 활용한 무한 스크롤 구현

   useInfiniteQuery를 통해 구현했다. 페이지 당 포켓몬이 10마리 정도 등장하는 걸 감안하여 하단에서부터 15 마리 정도 위에서 추가 쿼리를 날리도록 제작했다. 쿼리의 트리거가 선택된 포켓몬이므로 스크롤을 직접 조작하는 경우에는 작동하지 않는다. (추후 수정)

useEffect(() => {
  const handleFetchNextPage = () => {
    if (!pokemonList) return
    const idx = pokemonList.indexOf(selected)
    if (idx > pokemonList.length - 15) {
      fetchNextPage()
    }
  }
  //useInfiniteQuery
  handleFetchNextPage()
}, [fetchNextPage, pokemonList, selected])

3. rechart 차트라이브러리를 활용한 데이터 시각화 stat 데이터를 받아와서 가공한 뒤 rechart의 Radar를 활용하여 데이터를 시각화했다

function StatChart({ stat, color }: StatChartProps) {
    const data = dataRefine(stat)
    return (
        <Container>
            <RadarChart outerRadius={150} width={400} height={400} data={data}>
                <PolarGrid />
                <PolarAngleAxis dataKey="subject" />
                <PolarRadiusAxis domain={[0, 1]} angle={30} tick={false}/>
                <Radar dataKey="A" stroke="#8884d8" fill={Colors[color]} fillOpacity={0.7} />
            </RadarChart>
        </Container>
    )
}

4. Emotion을 활용해 공통 컴포넌트를 스타일드 컴포넌트로 구현하여 활용성을 높임

   이전 JS 파트와 react 미션 1에서 만든 기본 컴포넌트들을 emotion으르 수정했다. 5. forwardRef를 활용해 부모요소에서 자식 요소의 스크롤 이벤트를 관리 선택된 포켓몬을 상위 컴포넌트에서 관리하는 구조인데, 스크롤이 내려감과 동시에