Poke Wiki

세팅

프로젝트 생성

그동안은 CRA를 이용해 리액트 프로젝트를 생성해왔지만, 이번에는 Vite를 이용해보기로 했다.
이전 프로젝트와 마찬가지로 React + TypeScript + Styled Components로 개발해볼 예정이지만, 개발 도중 필요에 따라 변경이 될 수도 있다.

프로젝트 구조

└─ src 	
 ├─ apis
 ├─ assets 
 ├─ components
 ├─ hooks
 ├─ pages
 ├─ utils
 ├─ App.tsx
 └─ main.tsx

• apis : API관련 모듈들을 저장할 폴더다.
• assets : 이미지나 svg등을 보관하기 위한 폴더이다.
• components : 재사용이 가능한 공용 컴포넌트들을 보관하기 위한 폴더이다.
• hooks : 커스텀 훅을 보관하기 위한 폴더이다.
• pages : react router를 이용해 라우팅을 할 페이지 컴포넌트를 보관하기 위한 폴더다.
• utils : 공통으로 사용하는 유틸리티 함수를 보관하기 위한 폴더다.
• App.tsx : 애플리케이션의 전체적인 구조와 설정을 담당한다.
• main.tsx : 메인 프로그램으로, HTML 템플릿 및 JS 컴포넌트를 모두 조합하여 실제 표시한다.

기능

포켓몬 리스트 보여주기

전체 포켓몬 리스트를 보여주는 기능을 제공할 예정이다. 당장에는 1세대 정도 구현한 후, 추후 다음 세대도 구현해볼 예정이다.

포켓몬 상세 정보 보여주기

포켓몬의 타입, 분류, 특성 등 다양한 정보에 대해 알려줄 예정이다.

포켓몬 검색 기능

포켓몬의 이름 혹은 도감번호로 해당 포켓몬을 검색 할 수 있는 기능을 제공할 예정이다.

포켓몬 필터링 기능

포켓몬을 타입, 혹은 추후에 여러세대를 구현하면 세대에따라 필터링 하는 기능을 제공할 예정이다.