포켓몬 도감 만들기

151종의 포켓몬 중 원하는 6개의 포켓몬 카드를 선택하여 '나만의 포켓몬'을 구성하라!

'내가 만든 포켓몬 도감' 보러가기😆

필수구현사항

1. 페이지 라우팅 구현하기

: react-router-dom을 이용해 홈 페이지에서 도감 페이지로 이동, 도감 페이지에서 상세 페이지로 이동

2. 도감페이지는 3개의 컴포넌트로 분리하기

: 반드시 Dashboard, PokemonList, PokemonCard로 컴포넌트를 구분하여 페이지를 구성

• 포켓몬 리스트 속 각 카드들은 '추가' 버튼을 가짐.
• 선택된 포켓몬이 대시보드에 표시되며, 이 카드들은 '삭제' 버튼을 가짐.
• 최대 6마리 포켓몬만 가질 수 있음.
• 각 포켓몬 카드를 클릭하면 상세 페이지로 이동

3. 디테일 페이지

• queryString을 사용하여 포켓몬 ID를 받아 해당 포켓몬의 상세 정보 표시
• '뒤로 가기' 버튼을 통해 이전 페이지로 돌아갈 수 있도록 구현(리스트 페이지 데이터 유지시키는 선택사항 구현 부분은 하지 못함.)

4. 알림 기능 구현

• 리스트에서 대시보드로 카드의 '추가'버튼을 클릭했을 때, 중복되면 "이미 등록된 포켓몬 입니다" 라고 alert 창 띄워주기
• 포켓몬카드를 6개까지 선택하고 나면, 그 이상은 "최대 6개까지만 선택할 수 있습니다." 라고 alert 창 띄워주기

5. styled-components를 사용하여 포켓몬카드와 대시보드 꾸미기

: 조건부 스타일링을 시도해보려 했으나 못 함.

6. Git 브랜치 전략 사용하기

1) `contextAPI` 브랜치 생성하여 contextAPI 사용해보기

---

선택(도전) 구현사항

1. Redux Toolkit으로 리팩터링하기

1) `redux` 브랜치 생성하여 contextAPI 사용했던 것 지우고, 일반 redux로 고쳐보기
2) `RTK` 브랜치 생성하여 redux toolkit 사용해보기

2. 디테일 페이지에 '추가' 버튼 추가하기

: 포켓몬 디테일 페이지에 '추가' 버튼을 만들어, 해당 버튼을 눌렀을 때 대시보드에 포켓몬이 추가되도록 구현

3. 리스트 페이지의 데이터를 유지시키기

: 브라우저 스토리지 사용, react-router-dom 의 심화사용 등 여러가지 방법을 사용하여 디테일 페이지에서 리스트 페이지로 돌아가면 기존에 선택했던 포켓몬들이 사라지는 것을 유지시키기

4. UI 라이브러리 활용하기

: alert 대신 Modal 또는 toast와 같은 UI 요소를 사용하여 피드백을 제공하세요. 다양한 리액트 라이브러리를 사용해 보기
예시1 - npm: react-toastify
예시2 - sweetalert2
예시3 - sonner

---

목표 달성

1. 처음으로 필수구현과제를 다 했다.
   튜터님들, 수강생분들의 도움을 많이 받았지만 css보다는 기능구현을 우선적으로 생각했다.
2. redux, redux toolkit을 사용해보는 선택구현사항도 하나 시도해보았다.
3. 지난 개인과제에 이어 useState에 대해서는 확실히 이해했다.
4. 처음으로 vercel을 이용하여 배포했다.
5. react-router-dom을 이용한 페이지 이동에 대한 이해를 할 수 있었다.

---

아쉬운 점

1. styled-components를 사용했지만 조건부 스타일링을 하지 못 한 점이 아쉬웠다.
2. 이미지를 사용해보거나 UI 라이브러리를 사용하는 등의 꾸미는 부분을 이전 과제들부터 계속 안하다보니 시간이 너무 오래 걸리고 모르는 기능이 많았다.

---

📃과제 후 마무리 문제

1. Props drilling이란 무엇인가요?
상위 컴포넌트에서 사용하는 state나 함수 등 프로퍼티를 하위 컴포넌트에서도 사용해야할 때, 하위로 props를 전달한다고 합니다. 컴포넌트간의 계층이 많을 때, 중간단계에도 전달해줘야하며 계속해서 하위 컴포넌트로 필요한 props를 전달하는 것입니다.

2. Context API를 사용하여 props drilling을 어떻게 해결할 수 있었나요?
1. createContext로 contextAPI 변수명을 지정 및 생성 2. Provider로 감싸주고 안에 필요한 value값을 입력 3. 필요한 하위 컴포넌트에서 useContext를 이용하여 필요한 프로퍼티를 가져와서 사용

3. 이 과제에서 컴포넌트 구조를 어떻게 구성했나요? 그 이유는 무엇인가요?
Main - App - Router - Home - Dex(Dashboard / PokemonList - PokemonCard) - Detail
: 크게 페이지를 Home, Dex, Detail 세가지로 분류했으며, 각 페이지에 필요한 구성을 컴포넌트로 분리했기 때문이다.
(Dex 페이지에서 Dashboard와 PokemonList로 나뉘고, 이 두 컴포넌트는 PokemonCard 컴포넌트를 이용하여 카드를 펼쳐줬다.)

4. 컴포넌트 분리가 코드의 가독성과 재사용성에 어떤 이점을 제공했나요?
코드가 길어지면 스크롤을 내려 위, 아래로 이동을 많이 하게 되는데 분리를 하게 되면 이러한 비효율이 줄어들어 가독성이 좋아지고, props를 전달하거나 contextAPI를 통해 프로퍼티를 전달해줌으로써 필요한 state나 함수 등을 재사용하기 쉬워졌습니다.