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

1. 프로젝트 설명

더샤아니의 고투게더 반응형 웹페이지 리뉴얼, 시니어를 대상으로 한 여행 패키지 상품 검색 및 추천 서비스로 FrontEnd, BackEnd, UX/UI 협업 프로젝트이다.

주된 기능으로는 로그인, 회원가입, 상품검색, 상품추천, 상품예약, 찜(위시리스트), 후기 등이 있다. 나는 회원가입, 로그인, 아이디, 비밀번호 찾기, 내 정보 수정, 예약 내역 조회 및 취소, 찜(위시리스트) 목록 조회, 추가, 삭제 부분을 맡았다.

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

깃헙 링크
노션 링크

2. 진행 과정

기획 단계

• 이번 파이널 프로젝트는 프론트엔드 4명, 백엔드 3명, UX/UI 3명 총 10명이 한팀으로 진행되었다. 어쩌다보니 미니 프로젝트에 이어 이번에도 나는 프론트엔드 팀장 역할을 맡게 되었다. 이번에는 프론트엔드, 백엔드 뿐만이 아니라 UX/UI도 함께 진행을 했는데 협업과 소통에 있어 깊은 난항이 예상되었다.

• 10명이 모두 모인 첫 회의에서는 기획을 열심히 했다. 기존에 있던 사이트를 리뉴얼하는 프로젝트였기 때문에 더 나은 사이트를 만들기 위해서 서로 여러가지 아이디어를 생각했다. 그 과정에서 기존 사이트에는 없는 국내여행을 도입하자는 의견이 주 목표로 채택되었다.

• 이번 프로젝트는 미니 프로젝트와는 다르게 UX/UI가 있었기 때문에 프론트 측에서 디자인을 담당할 필요가 없어서 편했다. 그런데 UX/UI팀의 작업 속도가 좀 느려서 개발 기간이 부족해지는 이슈가 있었다. 그리고 디자인도 기존 사이트와 너무 비슷했던 점이 조금 아쉬웠다.

• 이번 프로젝트에서는 내가 미니 프로젝트에서 사용해보지 않은 기술 및 라이브러리를 사용해보고 싶었다. 그래서 react-query(서버 데이터)와 recoil(클라이언트 데이터)을 사용해보자고 어필했다. 그리고 미니 프로젝트에서 매우 만족한 typescript를 사용하기로 했다.

개발 단계

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

1. Keep

   • Typescript를 사용함으로써 목적에 맞지 않는 타입의 변수나 함수들에서 에러를 발생시켜 버그를 사전에 차단할 수 있던 점이 이번에도 마음에 들었다.
   • react-query로 서버 데이터를 더 쉽게 관리할 수 있었던 것 같다.
   • react-query의 훅들을 활용하여 커스텀 훅을 만든 경험이 좋았다고 생각한다,
   • react-hook-form과 yup을 사용하여 유효성 검사를 더 쉽게 할 수 있었다.
   • PrivateRoute로 인증(로그인)을 해야만 접근 가능한 페이지를 구분해준 것이 좋았다.
   • refresh-token을 백엔드에서 Http-Only로 쿠키에 담아서 전달해주고 그것을 가지고 서로 소통하는 방식인데 이 부분이 잘 동작하지 않아서 백엔드분과 함께 문제를 해결해 나간 점이 좋았다.

2. Problem

   • react-query 관련 문제점 및 아쉬운 점

     • 처음 사용해본 탓인지 관련 코드를 엉성하게 짠 느낌이 있다
     • Suspense를 활용하여 로딩을 추가했으면 더 좋았을 것 같다.
     • 서버 데이터와 클라이언트 데이터를 분리하기 위해 react-query를 사용한건데 서버로부터 받아온 유저 정보를 Recoil 전연 변수로 설정해버렸다.

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

     • 로그인 방식으로 JWT 방식을 사용했는데 refresh token이 로직이 제데로 작동하는지 잘 모르겠다.(로그인이 계속 유지가 되긴 하는데 흠...)
     • 소셜 로그인(Oauth)이 계획에 있었는데 하지 못한 점이 아쉽다. 인가 코드를 받는 것까지는 했는데 그 다음 서버로 인가코드를 전달 후의 로직을 백엔드 측에서 완성하지 못한 듯 하다.

   • 협업에서의 아쉬움

     • 팀장으로써 팀원들의 개발 의지를 끌어올리지 못한 점이 아쉽다.
     • UX/UI와의 소통이 원할하지 못한 점이 아쉽다.

3. Try

   • 서버 데이터와 클라이언트 데이터를 확실하게 분리하기.
   • react-query 더 자세히 공부해서 잘 적용하기.
   • 소셜 로그인(Oauth) 성공하기.
   • Next.js 공부하고 사용해보기.

3. 느낀점

• 프로젝트를 진행하면서 힘들었던 점은? 혹은 어려웠던 점은?
  • 다소 익숙하지 않았던 react-query를 사용하느라 어려웠지만 결과적으로 새로운 기술을 익힐 수 있어서 좋았다
  • 처음으로 FE, BE, UX/UI 3개의 분야가 한팀으로 협업을 해보았는데 소통이 얼마나 어려운 일인지 알게 되었다.
  • 기획 기간이 길어짐에 따른 짧아진 개발 기간 때문에 프로젝트의 완성도가 높지 않은 점이 아쉽다.
  • UX/UI와의 소통이 원할하지 못했던 점이 아쉽다.
  • 디자인이 기존 사이트와 너무 비슷하다.
    
    
• 팀에서 좋았던 점/ 아쉬웠던 점
  
  ❤️ 좋았던 점
  • 프론트 팀원의 대부분이 오프라인으로 참여하여 빠르고 정확한 소통이 가능했다.
  • 프론트와 백엔드간의 소통이 원활해서 좋았다.
  • 코드 리뷰를 하면서 팀원들의 코드로 배울점이 많았다.
  • 자신이 맡은 부분이 아니더라도 서로 정보 공유를 통해 전체적인 이해도를 높이고자 했던 부분이 좋았다.
  • 적절한 역할 분담과 서로 부족한 부분은 도와주고 할 수 있었던 협력 과정이 좋았다.
    
    
  😓 아쉬웠던 점
  • 문서화에 많이 신경 쓰지 못한점이 아쉽다.
  • 프론트팀의 의견을 좀 더 강하게 어필하지 못한 점이 아쉽다.
  • 코드의 유지 보수 측면에서 많이 아쉽다.
    
    
• 나 스스로 잘했다고 생각한 포인트가 있는지? 아쉬움은 없는지?
  - 2번째 팀장 역할이었는데 처음보다는 잘한 것 같다.
  - 이번 프로젝트에서 react=query를 사용해본 점이 좋았다.
  - 소셜로그인을 완성하지 못한게 아쉽다.
  - 내가 맡은 부분을 넘어서 다른 팀원의 몫까지 나서서 한 점이 좋았다.
  
  

마치며

이번 포스트에서는 파이널 프로젝트 회고를 작성해보았다. 처음으로 FE, BE, UX/UI 3개의 분야가 한팀으로 협업을 해보았는데 소통이 얼마나 어려운 일인지 알게 되었다. 나름 협업을 잘하는 편이라고 스스로 생각했었는데 그래도 쉽지 않았다. 팀원 모두 열심히 해줘서 고마웠다. 그럼 안녕!! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧