39CM 프로젝트 회고

지난 2주간 29CM사이트를 기반으로 의류 큐레이팅 서비스를 모델링 한 프로젝트를 진행하였다.

이번 프로젝트의 목표는 모델링하고자 하는 사이트의 핵심 기능이 무엇인지 찾아보고 어떤 서비스가 해당 사이트의 매출을 높일 수 있는지에 중점을 두어 진행하였다.

프로젝트를 진행하기 앞서 회의를 통해 정한 이번 프로젝트의 목표는 "사용자가 홈페이지에 들어와 상품을 보고 흥미를 느낀 상품의 구매까지 이루어 질 수 있는 서비스"가 핵심이었다.

그 다음 프로젝트의 목표를 달성하기 위해 필요한 기능을 다음과 같이 정리하였다.

1. 로그인/ 회원가입 기능
2. 소비자가 구매에 흥미를 느낄 수 있도록 가격 /좋아요 수 /리뷰 수 sorting기능 제공
3. 성별/ 카테고리 별 필터링 기능
4. 장바구니추가 삭제 수정
5. 원하는 상품 결제 기능
6. 상품에 대한 좋아요/ 리뷰 기능
7. 유저가 작성한 리뷰/ 좋아요한 상품/ 주문내역/ 유저정보 등을 확인 할 수 있는 마이페이지 기능

팀원들 간에 역할은 다음과 같이 나누어 진행하였다.
🟢 BE1 - DB구축, 회원가입, 로그인, 찜하기, 마이페이지 유저정보
🟢 BE2 - DB구축, 상품리스트 조회, 장바구니, 결제
🔵 FE1 - 베스트 상품 페이지 리스트, 마이페이지
🔵 FE2 - 장바구니, 결제페이지, 회원가입, 로그인, 메인
🔵 FE3 - 제품 상세 페이지, 네비게이션, 네비게이션 검색 바, 메인 페이지

내가 맡은 부분은 아래와 같다.
🔵 FE2 - 장바구니, 결제페이지, 회원가입, 로그인, 메인

1. 회원 가입/ 로그인 구현 : 서버에 JWT를 활용하여 회원 정보를 등록하는 기능 개발

• id와 pw를 입력받아 login API주소로 보내주는 코드 작성
• id와 pw정보가 데이터베이스에 없다면 오류코드를 받아오고 오류가 확인 되면 오류메세지가 뜨도록 하였다.
• id와 pw정보가 서버에 있다면 토큰을 받아 저장하고 메인페이지로 넘어가도록 구현하였다.
• state와 &&문법을 활용해 회원가입 하나의 페이지에서 아이디입력창, 비밀번호입력창, 상세정보 입력창을 따로 구현해 주었다.
• 각 항목을 입력할때마다 account 에 저장하여 마지막 상세정보 입력창에서 버튼을 누르면 서버에 회원정보를 등록하도록 해주었다.
• 비밀번호 입력을 구현하면서 정규식을 활용하여 유효성 검사를 진행하였다.

2. 장바구니 페이지 구현 :

• 유저별 장바구니 항목을 apI를 통해 서버에서 불러와 수정할 수 있도록 하고, 결제 희망 상품을 로컬 스토리지에 저장하여 결제 페이지에서 사용할 수 있도록 구현하였다.
• 수량 수정 버튼 클릭 시 서버에 수량정보를 patch해주는 요청을 보내고, 프론트단에서는 처음 fetch해온 데이터를 수정하여 총갯수와 총가격에 수량이 반영되도록 해주었다.

3. 결제 페이지를 구현 :

• 사용자가 결제를 희망하는 상품의 데이터를 로컬스토리지로부터 불러와 렌더링하고 유저 정보를 서버에서 불러와 유저의 포인트를 사용하여 결제가 이루어질 수 있도록 서비스를 구현
• 결제 요청을 할 때 결제 후 포인트가 음수이면 결제가 진행 되지 않도록 해주었고 결제가 완료되면 mypage로 이동하도록 해주었다. 또한 장바구니에서 결제완료한 아이템들을 삭제해주는 api도 요청해주었다.

커뮤니케이션 툴

팀원들간의 원활한 의사소통과 효율적인 진행을 위해 다음과 같은 툴을 사용하였다.

• Notion, Trello, Git-book, Table plus, Git, Slack

백엔드

백엔드부분을 맡은 팀원들은 구현에 필요한 데이터들을 다음과 같이 모델링을 진행해 주었다.

백엔드에서 미리 준비한 API명세들을 GIT-BOOK을 통해 프론트단에 공유 해주어 프론트는 데이터의 형식을 알고 코딩을 진행할 수 있었다.

📼 DEMO

• 시연 영상

프로젝트 후 느낀 점

소통

장바구니 기능을 구현하면서 프로젝트에서 가장 중요한 점이 소통이랑는 것을 다시 한 번 느끼게 되는 계기가 되었다.
백엔드에서 자세한 API명세서를 미리 만들어 프론트엔드에게 제공해 주었다.
프론트엔드는 API명세서를 보면서 백엔드에서 받아올 데이터를 미리 알고 그 형식에 맞춰 편하게 코드를 구성 할 수 있었다. 다른 프로젝트 팀을 보면서 프론트 백엔드 간의 소통이 제대로 이루어 지지 않아 마찰이 생긴걸 목격하였다. 그에 반해 우리 팀은 프론트에서 어떤 데이터가 필요한지 백엔드에게 미리 전달하고 백엔드는 그 데이터를 어떤형식으로 보내줄 지 미리 소통을 나누어 서로 연결이 되었을 때 큰 오류 없이 금방 연결이 되고 에러가 나더라도 어떤 부분에서 에러가 발생했는지 쉽게 찾을 수 있었다.
한 가지 아쉬점이 있다면 프론트에서 필요한 데이터와 api를 정리하는 과정에서 구체적 계획이 부족했다는 것이다.
예를 들어 장바구니에서 체크한 항목만을 주문 하고 싶을 때, 백엔드에 해당 상품에대한 체크여부를 저장한 데이터가 있었다면 프론트단에서 좀더 구현이 쉬웠을 텐데 해당 기능을 나중에 추가하려다 보니 백엔드 단에서 수정하기가 어려웠던 것이다. 결국 프론트 단에서 백엔드에서 보내준 데이터에 체크여부를 확인하는 데이터를 추가하여 관리하긴 하였지만 처음부터 해당항목이 있었다면 더 편했겠다는 생각을 하였다.

이처럼 백엔드와 프론트간에 소통이 잘 이루어지면 이루어 질수록 구현할 수 있는 기능의 퀄리티는 올라가고 반대로 코딩의 난이도는 쉬워질 수 있다는 것을 이번 프로젝트를 하면서 느꼈다.

책임감

이번 프로젝트에서는 프론트엔드 팀원들이 나에게 의지를 많이 해주었다. 따라서 그에 따른 책임감은 배가 되는것을 느꼈다.
우리는 계획 단계에서부터 서로의 실력을 고려하여 역할 분담을 하였고, 내가 맡은 부분외에도 다른 팀원들의 부분까지 어떤 계획을 잡고 어떤 순서로 기능을 구현해나가면 좋을지 방향성을 제시해 주었다.
또한 팀원들이 어려움을 겪을 때 나에게 주저없이 질문을 해주었다.
물론 위와같은 과정들이 나에게 힘들지 않은 것은 아니었지만 나에게는 오히려 긍적적인 부분이 많았다. 프로젝트를 진행하면 본인이 맡은 부분 외에는 경험해볼 일이 부족할 것이다. 하지만 덕분에 나는 다른 팀원들의 부분까지 경험해 볼 수 있었고 프로젝트의 전체적인 흐름이 파악하는데에도 도움이 되었다.
팀원들은 나에게 질문하는것을 미안해하지만 오히려 나는 나에게 질문해준 팀원들에게 고맙다는 말을 전하고 싶다.