조금 늦었지만 미니프로젝트 회고를 작성해보려한다.

1. 프로젝트 설명

금융상품 중 카드를 상품으로 다루고, 추천해주는 서비스로 FrontEnd와 BackEnd 협업 프로젝트이다.

주된 기능으로는 로그인, 회원가입, 나의 카드(신청한 카드), 검색, 카드 추천, 관심상품이 있다. 나는 카드 추천, 카드 검색, 초기세팅, 헤더, 관심상품 부분을 맡았다.

주요 기술 스택으로는 React, TypeScript, Redux, Styled-components를 사용했다.

깃헙 링크
노션 링크

2. 진행 과정

기획 단계

• 이번 미니 프로젝트는 프론트엔드 4명, 백엔드 4명 총 8명이 한팀으로 진행되었다. 나는 프론트엔드 팀장 역할을 맡게 되었다.(부담감 Up!!) 아무래도 처음 팀 프로젝트를 하는거다 보니 긴장을 좀 했던 것 같다.

• 8명이 모두 모인 첫 회의에서는 기획을 열심히 했다. 결국에는 카드를 회원에게 추천하는 서비스를 만들자는 의견이 다수결로 채택되었다.

• UX/UI가 없기 때문에 디자인은 프론트 측에서 담당했다. 와이어 프레임을 만들어서 기능에 대해 상세하게 이야기를 나누었고 덕분에 개발 단계에서도 큰 차질 없이 진행된 것 같다. 그리고 최종 디자인 같은 경우 우리 팀의 예능 담당 ㅈㅅ님이 열심히 작업해주셨다.

• 사용할 기술 스택을 정하는 과정에서 의견이 갈렸었다. Typescript 사용 여부였는데 내가 팀장 권한으로 사용하자고 강력히 어필했다. 언젠가는 반드시 사용해야 할 텐데 이번에 미리 연습하자는 취지였다. Redux 또한 대부분 잘 모르는 상태였는데 같은 취지로 사용하기로 했다.

개발 단계

• Keep (프로젝트에서 만족했고, 앞으로의 업무에서 지속하고 싶은 부분)
• Problem (프로젝트에서 부정적인 요소로 작용했거나 아쉬웠던 점)
• Try (Problem에 대한 해결 방식으로 혹은 개인적으로 다음 프로젝트에서 시도해볼 점)

1. Keep

   • Typescript를 사용함으로써 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 차단할 수 있던 점이 정말 마음에 들었다.
   • 모르는 부분이 생겼을 때는 혼자 해결할 수도 있지만 팀원들과 같이 해결 방법을 찾는 과정이 좋았다.
   • 함께 작업을 진행하면서, 같은 주제에 대해 서로 어떻게 다른 생각을 하는지 확인해보며 사고의 확장을 경험할 수 있던 점이 좋았다..

2. Problem

   • 검색부분 구현에 대한 문제점 및 아쉬운 점

     • 검색을 하면 키워드에 대한 모든 검색결과가 한꺼번에 넘어온다. 즉 서버에서 페이지 처리가 되지 않았다.
     • 프론트 쪽에서도 페이지네이션을 하지 않은 점이 아쉽다(원래는 무한 스크롤 계획...)
     • 검색 페이지에서 검색 된 상품을 클릭하여 상세 페이지로 이동 후 뒤로가기를 하여 돌아오면 다시 검색을 해서 리렌더링 되는 문제가 있다.

   • 인증 관련 문제점 및 아쉬운 점

     • 로그인 방식으로 JWT 방식을 사용했는데 refresh token을 구현하지 않은 점이 아쉽다.
     • 로그인하지 않은 상태에서 로그인을 해야만 볼 수 있는 페이지로 이동을 못하게 하는 로직이 바람직하지 못하다. (useEffect로 렌더링이 일어날때 마다 토큰이 필요한 api를 날려서 오류가 발생하면 로그인으로 이동...)

   • 협업에서의 아쉬움

     • 공통으로 활용할 수 있는 컴포넌트 혹은 함수들을 따로 빼내지 못한게 조금 아쉽다.
     • 팀장의 역할을 좀 더 잘할 수 있었지 않았을까에 대한 아쉬움이 조금 있다.

3. Try

   • 이번에 하지 못한 페이지네이션을 도전!!
   • 인증 관련 마지막 문제의 개선 방법으로 PrivateRoute로 인증(로그인)을 해야만 접근 가능한 페이지를 감싸주는 방법 해보기.(PrivateRoute 내부 로직이 중요!!)
   • 다음에는 redux 대신 다른 전역 상태 관리 라이브러리를 사용해보기.(recoil, mobx 등)
   • 다음에는 react-query 같은 서버 상태 관리(data fetching) 라이브러리를 사용해보기. (검색 부분 마지막 문제를 쉽게 해결 가능하지 않을까?)

3. 느낀점

• 프로젝트를 진행하면서 힘들었던 점은? 혹은 어려웠던 점은?
  • 다소 익숙하지 않았던 redux toolkit, typescript를 사용하느라 어려웠지만 결과적으로 새로운 기술을 익힐 수 있어서 좋았다
  • 개발이 다 끝나 보니 생각보다 프로젝트 크기가 작아서 아쉬웠다.
    
    
• 팀에서 좋았던 점/ 아쉬웠던 점
  
  ❤️ 좋았던 점
  • 팀원의 대부분이 오프라인으로 참여하여 빠르고 정확한 소통이 가능했다.
  • 와이어프레임을 그려보는 과정이 있어서 기능에 대해 상세하게 이야기 나눌 수 있었고 덕분에 개발 단계에서도 큰 차질 없이 진행된 것 같다.
  • 프론트와 백엔드간의 소통이 원활해서 좋았다.
  • 타입스크립트를 이번 기회에 익힐 수 있어서 좋았다.
  • 팀원들의 코드로 배울점이 많았다.
  • 자신이 맡은 부분이 아니더라도 서로 정보 공유를 통해 전체적인 이해도를 높이고자 했던 부분이 좋았다.
  • 적절한 역할 분담과 서로 부족한 부분은 도와주고 할 수 있었던 협력 과정이 좋았다.
    
    
  😓 아쉬웠던 점
  • 문서화에 많이 신경 쓰지 못한점이 아쉽다.
  • 코드 리뷰를 제대로 하지 않고 머지를 많이 한 점이 아쉽다.
  • 좀 더 많은 기능을 넣지 못한 아쉬움이 있다.
  • 코드의 유지 보수 측면애서 많이 아쉽다.
    
    
• 나 스스로 잘했다고 생각한 포인트가 있는지? 아쉬움은 없는지?
  - 팀장 역할을 처음 해보았는데 좋은 경험이었다.
  - 이번 프로젝트에서 redux toolkit 을 처음 사용해 보았는데 사용법을 어느 정도 잘 이해한 것 같다 .
  - 프로젝트 초기 세팅을 처음 해보았는데 좋은 경험이었다.
  - 인증 관련 부분에 대한 공부가 필요하다고 느꼈다.
  - 코드를 너무 더럽게 짠 것 같다.
  - 다음 프로젝트에서는 react-query 혹은 rtk-query를 사용해보면 더 좋을 것 같다.
  
  

마치며

이번 포스트에서는 미니 프로젝트 회고를 작성해보았다. 백엔드까지 같이 한팀으로 진행한 첫 협업 프로젝트였다. 부족한 점도 많았지만 개인적으로 소통이 잘되었다는 점에서 매우 만족스러운 프로젝트였다. 팀원 모두 열심히 해줘서 고마웠다. 다음에는 파이널 프로젝트 회고로 찾아오겠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧