프로젝트 개요

이번에 진행한 미니프로젝트는 숙박 / 예약 서비스 제작이고 프로젝트 기간은 3/18 ~ 4/5 입니다.
백엔드 수강생분들과 처음으로 함께하는 프로젝트인 만큼 부족한 점도 많았고, 설레는 일도 많았습니다.
진행한 내용을 바탕으로 KPT 회고를 진행해보려고 합니다.

Keep

이전까지의 프로젝트에서는 브랜치, 커밋메시지, 디렉토리 구조 등의 컨벤션이 제대로 이루어지지 않았습니다.
그런데 이번에는 백엔드 개발자분께서 제안해주신 git kraken이라는 GUI툴과 평소에 프로젝트 시 사용하시는 커밋 메시지 컨벤션을 소개해주셨고, 이를 기반으로 좀 더 원활한 협업이 가능하게 되었습니다.

또한 이전에 진행했었던 토이프로젝트에서는 브랜치를 구성원의 이름 이니셜로 하나씩만 관리를 하였는데 멘토링에서 이렇게 브랜치 관리를 하면 안된다고 하셨어서 이번에는 기능별로 브랜치를 만들고 해당 기능이 완성이 되면 브랜치를 지워나가는 식으로 진행했습니다. 그 결과 유기적으로 기능이 이어지는 페이지들끼리의 병합 충돌이 일어나긴 했지만 저번 프로젝트보다는 충돌이 덜 발생하였습니다.

개인 프로젝트라면 이러한 컨벤션이 필요없겠지만, 취직했을 때의 미래를 생각한다면 회사내의 컨벤션을 잘 숙지하고 빠르게 적응해나가는 것이 정말 중요하다고 느꼈습니다. 그리고 이제 파이널 프로젝트만을 앞두고 있는데 파이널 프로젝트에서는 lint와 prettier 등을 추가한 좀 더 엄격한 컨벤션 전략을 세우고 개발을 시작해나가야 할 것이라 생각합니다.

Problem

FE와 BE가 처음 협업할 때 FE가 맞닥뜨리는 가장 첫 번째 문제는 "백엔드 API가 배포되기 전에 FE는 무엇을 해야하는 가" 라고 생각합니다. 실제로 미니프로젝트를 진행할 때 우선적으로 더미 json파일로 UI / 레이아웃 구성을 하였는데 mocking server의 개발이 늦어져서 기능 구현을 시작하지 못했던 상황이 있었습니다.

이 경험을 통해 BE와 협업 시 API 명세서를 받았다면, 그것을 토대로 mocking server를 우선적으로 개발해나가야겠다는 배움을 얻었습니다. 그래야 mocking server를 사용해가며 API 통신을 해보고 기능 구현을 해나가면서 백엔드 API가 배포되기전에 FE에서 필요하거나 수정이 필요한 response 내용에 대한 의견을 제대로 백엔드측에 전달할 수 있기 때문입니다.

제가 마주한 두 번째 문제로는 "UI/레이아웃과 기능 구현의 설계"입니다.
백엔드 측에서 제공한 API 명세를 잘 이해하고 페이지별로 필요한 API의 엔드포인트를 잘 설계해야 BE와 소통도 원활히 이뤄지고 FE 개발자들간의 역할 분담도 잘 이루어질 것이라 생각합니다.
아무래도 프로젝트 경험이 별로 없고 기간은 한정되어 있으므로 마음이 초조해져서 빨리 개발을 시작하려는 경향이 있는데 설계는 BE뿐아니라 FE에서도 굉장히 중요하다는 것을 배웠습니다.

Try

저희 조는 프로젝트 RFP에 기재된 필수 구현 사항을 모두 만족하게 제작을 완성하였지만, 당연히 조금 아쉬운 부분은 있습니다. 제가 맡았던 기능 중에서는 다음과 같은 것들이 있습니다.

• 인증 refresh token을 이용한 access token 재발급
• 회원가입 시 사용자 이미지 업로드
• 헤더의 네비게이션에 장바구니, 결제 항목 갯수를 나타내는 뱃지

차례대로 이러한 개선 사항들을 어떻게 해결할 수 있을 지 작성해보도록 하겠습니다.

• 인증에 관해서 access token은 보안을 위해 만료시간을 짧게하고, 대신 refresh token을 길게 하여 refresh token이 존재하는 경우 access token을 재발급해주는 기본 원리 정도는 이해하고 있습니다만 이제까지는 백엔드와 작업하여 로그인 구현을 했던 것이 아니라 firebase를 사용했었기 때문에 실제 로직 작성은 어떻게 해야하는 지 숙지가 안된 상태입니다. 그래서 access token을 재발급 받는 실제 로직을 작성해보려고 합니다.

• FE에서는 input의 속성을 file로 하여 백엔드에 데이터를 전달할 수 있습니다. 이것을 백엔드 단에서 변환하여 데이터베이스에 저장하는 로직을 작성해주면 될 것이라 생각합니다. 하지만 그 과정이 정확히 어떻게 진행되는 지는 정확히 알지 못하므로 이 과정을 학습해보면 서버측 코드를 이해하는 데에도 도움이 될 것이라 생각합니다.

• 장바구니의 항목과 결제한 항목의 갯수를 네비게이션에 나타내주면 좋은 사용자 경험을 줄 수 있을 것이라 생각하여 고려했던 기능입니다. 해당 기능을 구현하기 위해서는 전역적인 상태관리가 필요할 것으로 생각되는데, 저희 조는 서버상태관리를 tanstack-query로 상태관리는 zustand를 사용하였습니다. 각각의 기술을 고려하여 어떤 기술로 이 기능을 구현할 지 생각해보고 적용하면 될 것 같습니다.