2월 동안 고생했던! 백엔드와 협업 미니 프로젝트에 대한 회고를 해 보려고 합니다.
💸 미왕론
📢 프로젝트 소개
학원에서 주신 주제는 핀테크였습니다. 멘토님이 예시로 주신 사이트는 대출과 관련된 것이었고, 저희도 그 주제를 이어서 가기로 하였습니다.
해당 프로젝트는 프론트엔드 4명 백엔드 4명이서 진행한 프로젝트입니다. 프로젝트의 깃허브는 여기서 볼 수 있습니다. 프론트엔드 배포 사이트는 여기서 볼 수 있습니다.
🔧 기술 스택
📆 과제 기간 및 담당 업무
2023. 02. 08 ~ 2023. 02. 26
- 김당쿽[팀장]: 마이 페이지 | 검색 페이지
- 팀원1: 장바구니 페이지 | 로딩 페이지
- 팀원2: 메인 페이지 | 로그인 상태 유지
- 팀원3: 로그인 / 회원가입 페이지 | 상품 상세 페이지
🖱 기능
로딩 페이지
메인 페이지
- 추천 상품
- 로그인 한 상태와 아닐 때 추천 상품이 달라짐.
- 로그인을 한 유저가 추가 정보를 입력했다면 거기에 맞추어 상품을 추천해 줌.
- 전체 상품
햄버거 탭
-
검색 기능
-
카테고리
장바구니 페이지
마이 페이지
-
관심 상품 삭제
-
회원 정보 수정
🤔 KPT
Keep
- 처음으로 팀 프로젝트를 진행하면서 issue(마일스톤)와 pr 시 issue 연동하는 방식을 사용하였다.
- 페이지 흐름도를 작성할 때 표로 그리는 것이 아니라 피그마로 작성했던 점이 조금 더 명시적으로 이해할 수 있어서 좋았다. 이번 프로젝트를 진행하면서 디자인까지 신경 쓰게 되어서 피그마로 진행하게 된 거긴 했지만 조금 더 빠르게 프로젝트를 시작할 수 있었던 것 같다.
- 다양한 라이브러리를 사용해 보았다.
- TS로 완성한 첫 프로젝트.
Problem
- 백엔드와 프론트엔드 서로 간의 차이점.
- 항상 윈도우 전체 사이즈만 생각해 오던 것을 모바일 사이즈로 진행하려고 하다 보니 px단위가 맞는지, rem 단위가 맞는지 생각하게 되었다. 멘토님이 말씀해 주신 방안으로는 스크린 사이즈에 맞춰서 px 단위를 정해 놓거나, 지정된 폰트 사이즈가 있다면 rem도 나쁘지 않다고 하였다. 우리가 사용한 방식은 max 사이즈 px를 정해 놓고, 그 안에서 margin 값들을 맞추는 방식이었다. 작업하는 프로젝트마다 사용하는 방식은 다르므로 다름 프로젝트 때는 rem 사용해 보는 것을 추천해 주셨다. 개인적으로 테일윈드 라이브러리는 반응형에 친화적인 라이브러리라고 생각이 드는데 스크린 사이즈에 대한 반응을 제대로 작성하지 못한 점이 아쉽게 남는다.
- 리덕스를 사용하여서 사용자의 로그인 상태를 관리해 주었는데 첫 로그인 후 토큰이 있음에도 불구하고 api 서버에서 회원에 대한 정보를 받아오지 못 했다. 오류의 원인을 파악해 보자면, 리덕스에 정보값을 저장하기 전, 토큰을 저장하기 전 빠르게 api로 요청을 보낸다는 것. 해당 방법을 해결하기 위해서는 리덕스 툴킷으로 로그인이 완료되었을 때 받는 request에 토큰이 있는지 확인 후 회원의 정보를 받아오는 방법을 사용해야 한다.
- 팀원의 부재. 소통의 부족함.
Try
- 다른 팀들과 유사하게 대출 신청을 넣었다는 결제 기능.
- 장바구니, 관심 상품 기능을 리덕스로 구현하는 것.
- 토큰 만료 시간에 맞추어 사용자에게 재로그인 요청하기.
- 검색 리덕스로 관리해 보기.
✨ 마무리 하며...
디자인적으로 조금 아쉬움이 남기도 하고, 백엔드에서 주는 api들이 살짝은 아쉬운 마음이 드는 건 어쩔 수 없는 것 같다. 강사님이 제공해 주셨던 api에서는 어쨌든 프론트 입장에서의 코드 실수였지만 에러가 났을 때 이게 내 잘못인지, 백엔드의 코드 실수인지 서로 소통을 해야 했다. 같은 팀이셨던 분들이 소통을 잘해 주셔서 정말 잘 넘어갈 수 있었던 것 같다. 이번에 맡은 파트에서 대부분 get으로 불러와서 화면에 띄우는 것들이 많았기 때문에 로그인이나 장바구니 같은 리덕스를 사용하는 부분의 파트를 맡았다면 과제를 진행할 때 조금 더 어려웠을 것 같다. 그래도 팀장으로서 다른 팀원들의 코드를 보며 오류가 났을 때 어떤 오류인지 같이 고민을 하면서 코드들을 폭 넓게 볼 수 있었던 것 같다. 특히나 TS를 작성할 때 나는 오류들에 대해서 팀원들이 많이 어려워했는데 도움을 줄 수 있었던 것 같다. 작은 프로젝트였지만 배울 점이 많았고, 조금 더 리액트와 친해진 기분이 들었다. 이번에 라이브러리를 많이 사용하면서 라이브러리에 대한 겁을 먹지 않게 되었던 것 같다. 물론 라이브러리를 제어하는 것도 꽤나 어려움이 있었지만... 특히 slick를 쓸 때 css가 잘 안 먹어서 꽤나 어려웠던 것 같다. 끝까지 내가 원하는 모양이 안 되어서 더 아쉬웠던 것 같기도 하고. 백엔드 팀에서 결제까진 아니더라도 임의 데이터로 사용자가 사용하고 있는 대출 데이터를 넣어 주시기로 했는데 그 부분은 끝내 하지 못 해서 많이 아쉬움이 남는 것 같다.
