포켓몬 도감_v2 - PokéHub

📖 내용

• 이전에 진행했던 포켓몬 도감 프로젝트인 pookimon 프로젝트에서 구현하지 못했었던 내용들을 보강하여 새롭게 진행한 프로젝트 입니다.
• 기존 프로젝트와의 차이점은 게시판 기능의 추가, pokeapi 에서 제공 되지 않는 정보들을 DB에 저장하여 REST API 로 만들어 원하는 정보를 확인 할 수 있도록 하였습니다.
• FE, BE 코드를 분리하여 효율적인 개발과 유지 보수를 용이하게 하였습니다.

이전에 진행한 프로젝트에선, 가장 중요한 포켓몬 데이터를 가져오는데, 무려 30초 정도의 시간이 걸리게 되면서 사용자에게 하여금 불쾌한 사용 경험을 남길 수 있는 웹사이트를 만들게 되었습니다.

또한 확인 할 수 있는 컨텐츠가 제한적이기 때문에, 사용자가 이용하기에 큰 메리트가 없다고 생각 하였습니다. 하여 이전 프로젝트의 아쉬운 점을 개선하고 사용자와 실제로 상호작용 하면서 볼 수 있는 컨텐츠가 더 많은 제대로 된 프로젝트로 개선 해보기로 하였습니다.

😅 과정 | PokéHub_FE

먼저 프론트엔드 프로젝트가 전반적으로 어떻게 구성되고 진행하였는지에 대한 전반적인 과정에 대해 작성 해보겠습니다.

이전 프로젝트와의 차이점?

• vite

• vite 를 사용하여 프로젝트를 생성하였습니다. 공식문서만 보아도 vite를 사용해야 하는 이유가 자세히 작성 되어져 있는데, 제가 사용했던 이유는 꽤 간단합니다.

• 팀 프로젝트를 진행 할 기회가 있어 참여한 적이 있습니다. 이때 vite 로 구축한 프로젝트 환경을 경험하면서 확연히 달라진 빠른 컴파일 속도에서 긍정적인 경험을 얻게 되어 제 개인 프로젝트에 적용하게 되었고, 그 결과 개발을 더 빠르고 효율적으로 진행 할 수 있게 되었습니다.

• 이후 ykss 님이 올리신 2024 리액트 라이브러리에 관한 글을 읽어보고 vite 를 사용한 것이 꽤나 괜찮은 결정이었다는 것을 알 수 있었습니다.

• RouterProvider

• React App 컴포넌트 에서 라우팅을 구현하는 기본 예시 코드 입니다. 저는 다른 방식으로 RouterProvider를 사용하여 관련 로직을 별도의 파일에 분리 하였습니다. 코드를 더욱 모듈화하고 유지 보수하기 쉽게 하기 위하여 사용 하였습니다.

• 라우팅 처리를 독립 시키기 위한 PublicRoutes를 생성 한 후, CreateBrowserRouter 로 라우터 객체를 생성합니다. 그리고 RouterProvider 로 라우터 객체를 사용하면, 애플리케이션 전체에서 라우팅을 처리할 수 있습니다.

코드 링크 확인이 어려운 분들을 위한 간단한 예시

Layout 컴포넌트를 작성 하였습니다. 레이아웃 구조는 유지하면서 컴포넌트의 동적 렌더링이 가능 하도록 Outlet 을 사용하였습니다. 이로써 App 컴포넌트의 부담을 줄이고 가독성과 유지 보수성을 보완 하였습니다.

• API

• API 의 경우 이전 프로젝트 회고에 작성 한 것과 거의 동일한 형태를 유지합니다. 전에 반복한 문제를 다시 겪지 않도록 ID 를 사용하여 디테일한 데이터를 요청 하였습니다.

• 또한 효율적인 데이터 관리를 위해 react-query의 useQueries 훅을 사용해 데이터를 병렬적으로 처리하는 Custom hooks를 만들었습니다.

• 약간의 차이점이 있다면 이번 프로젝트에서는 바로 아래와 같은 내비게이션 기능을 구현 하였습니다.

• 사용자가 이러한 정보 목적 사이트를 확인할 때, 다른 정보를 확인하기 위해 뒤로가기 등의 행동을 하는 것이 귀찮을 것 같다고 생각 하였습니다. 포켓몬의 디테일 정보에서 바로바로 이전 번호 or 다음 번호에 해당하는 정보를 확인 할 수 있도록 내비게이션을 만들었습니다.

• 이를 위해서 포켓몬 디테일 정보로 이동 하였을 때, 해당 포켓몬의 디테일 뿐 아니라 데이터의 nameArray를 통해 전후의 포켓몬 정보 또한 같이 받을 수 있도록 하여, 사용자가 다른 정보에 대해서 핸들링 할 수 있습니다.

• React-Hook-Form

• Form 성능 최적화를 위해 react-hook-form 을 사용하였습니다. 사용자가 게시판에 글을 남기기 위해 로그인, 회원가입을 구현하였고 Form 을 통해 작성한 내용 데이터를 관리 합니다.

• 로그인 | 회원가입에서 사용자 편의를 위한 유효성을 검사합니다. useForm 훅의 onChange Mode 를 사용하여 패턴 Value 정규식을 바탕으로 유효하지 않은 데이터가 입력 된 경우 ErrorMessage 가 출력 될 수 있도록 하였습니다.

• 게시판 기능

• 실제로 사용자가 CRUD 가 가능한 커뮤니티를 만들고 싶었습니다. 가장 적합한 기능이 게시판이라고 생각하여 구현 하였습니다.

• 사용자가 게시글을 열람하거나 유효한 사용자의 경우 작성,수정,삭제할 수 있도록 하였습니다. 댓글을 통해 소통이 가능하고, 로그인시 유효한 사용자 인지를 확인 하고 DropDown 에 추가 되는 프로필을 통해 추천을 누른 게시글 또는 자신이 작성한 글 목록을 가져올 수 있도록 하였습니다.

• 위 검증 방식에 대한 부수적인 설명은 이후 게시물에 자세히 작성 하였습니다.

• 디자인

• styled-components 를 사용하여 디자인 하였습니다. 사용 이유는 사실 이전 프로젝트와의 차이점을 주기 위한 것 뿐이었는데, 사용을 하면서 tailwindcss 와의 차이점과 각각의 장단점에 대해서 알 수 있었습니다.

• tailwindcss 는 매력적인 라이브러리 이지만 불편한 점이 몇가지 존재 하였는데, 일관되지 않은 클래스 명과 컴포넌트 내 코드의 길이가 길어진다는 점이었습니다. 오타가 나거나 잘못 된 이름을 사용하는 경우가 종종 있었고, 각 요소마다 많은 클래스를 작성 해야 했기 때문에, 코드의 길이를 길게 만들고 가독성을 떨어뜨릴 수 있다고 생각하였습니다.

• styled-components 는 스타일만을 위한 파일을 따로 분리하여 작성하면서, 컴포넌트내에서 import 하여 사용 함으로써 코드의 길이를 줄여 가독성을 도와주는 것이 좋았습니다. 또한 비슷하거나 동일한 디자인을 상속(예시)을 통해 중복되는 코드를 줄일 수 있었습니다.

• 여러가지를 경험하는 것도 좋지만, 둘을 경험하면서 어떠한 라이브러리를 사용하는 것이 더 좋은 전략인지를 판단할 수 있는 생각을 할 수 있게 된 것이 가장 좋았습니다.

styled-components

• 😙
  - 컴포넌트 내의 코드 길이를 줄여 가독성을 높임.
  - 스타일 상속
• 😅
  - 컴포넌트 내에서 작성 시 동일하게 코드를 읽기는 어려움. (파일 분리가 필연적 더 많은 JS 계산을 필요로 함)
  - 반응형 디자인을 구현하기 좀 더 복잡함(개인적)

tailwindcss

• 😙
  - 빠른 로딩 | 런타임 성능 UP
  - DarkMode | 반응형을 구현하기가 간편함(개인적)
• 😅
  - 일관되지 않은 클래스 명, 코드 가독성 Down

• 여담으로 프로젝트를 디자인 하는 과정에서 항상 느끼는 거지만, 한 번 결정되면 빠르게 작성이 가능한데 반해 그 결정하는 과정에 정말 어렵다는 걸 다시 한번 깨달았습니다.

• 이전 팀 프로젝트에서 figma를 통한 협업을 한 경험이 있습니다. 디자이너 분이 한분 계셨는데, 역시 전문가는 다르다는 생각을 하였던 적이 있습니다.

고민고민하다가 나온 디자인... ↓

개인적으로 디자인 능력이 부족한 것 같아 조금이라도 이쁘게 만드려고 linear-gradient 로 포켓몬의 타입 별 색상을 받아 background-color를 설정 해주었습니다...ㅎㅎ 개인적으로는 이쁘다고 생각하지만, 보기에 따라 별로라고 생각하시는 분도 있으실 것 같습니다.

가장 중요한 건 이러한 카드 디자인 고민하는데 이틀이라는 시간을 잡아 먹었다는 점입니다...

• (코딩에 시간을 온전히 투자할 수 있도록 다음 프로젝트는 꼭 협업을 하는게 좋겠다고 생각 할 수 있었습니다)

위 작성 내용 중 설명이 부족한 부분은 포켓몬 도감을 만들어보자_v2 - BE에 이어서 작성 하도록 하겠습니다.