[개인 과제] 포켓몬 도감 회고

 

개인 과제 소개 📖

react, styled-components, context API를 이용한 포켓몬 도감입니다.

배포 링크 : https://pokemon-app-sepia-nine.vercel.app/
깃허브 주소 : https://github.com/smu06030/pokemon-app

 

요구 사항 📌

필수 구현 사항

✅ Git 브랜치 전략 사용 (props-drilling, context)

✅ 페이지 라우팅 구현 (react-router-dom)

✅ 도감 페이지 구현

• 각 포켓몬 카드의 추가 삭제버튼
• 클릭 시 디테일 페이지 이동

✅ 디테일 페이지 구현

• 뒤로 가기 버튼 클릭 시 기존 리스트 유지

✅ 알림 기능 구현 (sweetalert2)

✅ styled-components 스타일링

 

사용 기술 🛠️

• 컴포넌트 기반의 구조로 프로젝트를 모듈화 하고, 상태 관리의 효율성을 높이기 위해 선택했습니다.

• CSS-in-JS 기반으로 컴포넌트별 스타일을 관리하고 유지보수를 쉽게 하기 위해 선택했습니다.

• 페이지 간 라우팅을 쉽게 구현하고, SPA의 특성을 최대한 활용하기 위해 선택했습니다.

• 사용자 경험 개선을 위해 알림 기능을 구현할 때 사용했습니다.

 

주요 기능 💡

페이지 라우팅

• 프로젝트를 설계할 때 페이지 간의 자연스러운 전환과 상태 유지를 생각해 도감 페이지와 디테일 페이지 간의 라우팅이 매끄럽게 이뤄지도록 react-router-dom을 활용해 구현했습니다.

상태 관리와 Context API

• prop drilling을 사용해 상태를 관리했으나, 코드 가독성과 유지보수 측면에서 문제를 느껴 이를 개선하기 위해 Context API를 도입해 전역 상태 관리를 구현했고 prop drilling 문제를 해결했습니다.

알림 기능

• 사용자가 포켓몬을 추가하거나 삭제할 때, 그리고 특정 조건을 만족하지 않을 때 주는 알림 기능은 사용자 경험을 향상시키는 중요한 요소였습니다. sweetalert2를 사용해 시각적으로 알림을 제공했고, 사용자 피드백에 따라 동작이 이뤄지도록 구현했습니다.

데이터 유지

• 디테일 페이지 접속 후, 도감 페이지 이동 시 state 속성을 이용해 포켓몬 데이터 유지.

 

이슈 ❓

 

[트러블 슈팅] 포켓몬 도감 (svg, router, 이벤트 버블링)

 

어려웠던 점 ❗

상태 유지 문제

디테일 페이지에서 도감 페이지로 넘어 왔을 때 이전 상태가 유지되지 않는 문제가 발생했습니다. 이 문제를 해결하기 위해 react-router-dom의 `useLocation` 훅을 활용해 상태를 페이지 전환 시에도 유지할 수 있도록 했습니다. 이 과정에서 React의 상태 관리에 대한 깊은 이해를 할 수 있었습니다.

 

prop drilling 문제

처음엔 props를 통해 하위 컴포넌트에 상태를 전달했지만, 코드가 복잡해지고 흐름을 따라가는 게 어렵다고 느꼈습니다. 이를 해결하기 위해 `Context API`를 도입했고, 전역 상태를 효율적으로 관리할 수 있게 되었습니다. 이 과정에서 전역 상태 관리의 중요성을 체감할 수 있었고, 상태 관리에 대해 공부할 수 있는 기회가 되었습니다.

 

회고 🧐

이번 프로젝트를 통해 React와 관련된 기술을 직접 적용해 보면서 한 단계 성장할 수 있었습니다. 그리고 진행 중 발생한 문제들을 해결해 가는 과정에서 많은 것을 배울 수 있는 좋은 프로젝트였습니다.