조금 많이 늦은 회고이지만 과정을 진행하면서 첫 팀 프로젝트였던 4차 과제 회고록을 작성해 보려고 합니다!

💻 액토몰 클론

📢 프로젝트 소개

우선 저희는 기존에 존재하고 있는 사이트를 클론 하는 방식으로 진행하였습니다. 전과는 다르게 사용하는 api의 종류가 많이 생겼고, 프론트엔드만 있는 팀이기 때문에 UXUI에 신경을 쓸 수 없다고 판단하였기 때문이었습니다. 그래서 저희가 클론 하게 된 사이트는 액토몰입니다!

저희가 진행한 프로젝트 깃허브는 여기서 볼 수 있습니다. 저희 배포 사이트는 여기서 볼 수 있습니다! 프로젝트는 프론트엔드 6명이서 진행하게 되었고, 당시 리액트를 배우기 전이었기 때문에 바닐라 자바스크립트를 사용하였고, parcel을 사용하여 빌드 하였습니다.

📆 과제 기간 및 담당 업무

2022. 11. 28 ~ 2022. 12. 21

• 김당쿽[팀장]: <사용자 페이지> FOOTER 퍼블리싱, 계좌 연결, 결제 페이지, 구매 내역 페이지
• 팀원1: <관리자 페이지> 상품 추가 삭제 수정 | <사용자 페이지> 카테고리 기능
• 팀원2: <사용자 페이지> 로그인, 로그아웃, 메인 페이지, 장바구니
• 팀원3: <사용자 페이지> 마이쇼핑 페이지 퍼블리싱, 마이오더 페이지 퍼블리싱, 상세 페이지, 장바구니
• 팀원4: <관리자 페이지> 제품, 구매 내역 목록 조회 페이지, 구매 내역 확정, 취소 | <사용자 페이지> 결제 페이지
• 팀원5: <사용자 페이지> 메인 페이지, 검색 기능 | <관리자 페이지> UI/UX | 총괄 퍼블리싱

📃 문서

• 코드 컨벤션
  • html을 작성하면서 생긴 선택자명을 공유하기 위해 작성.
  • 테스트 ID/PW 공유.
  • SPA(hash change) 방식으로 페이지를 전환하기 때문에 hash 값을 공유.
• 에러 핸들링 문서

🖱 기능

인증 - 사용자

1. 회원 가입
   
2. 로그인
   

• 로그인 시 localStorage에 토큰 값을 저장. 로그아웃을 하게 되면 토큰 값 삭제. 토큰 값의 유무를 통해서 로그인을 유지.
• 회원 정보를 받는 api에 관리자 상태를 나타내는 건 없어서 로그인 하는 계정에 "admin" 키워드가 있다면 관리자 계정으로 간주하여 관리자 페이지로 이동할 수 있는 버튼을 생성.

메인 - 사용자

1. 홈
   
2. 검색
   
3. 카테고리
   
4. 장바구니
   

마이 페이지

1. 내 정보
   
   

• 로그인 상태에 따라서 정보 값을 다르게 나타냄.
• 결제 기능은 계좌를 연결할 시 금액이 충전되는 형식이기 때문에 보유하고 있는 계좌 잔액을 띄워 줌.

2. 주문 내역
   

• 전체 내역을 보게 되면 주문 취소, 주문 확정을 할 수 있음.
• 전체, 취소, 확정 탭을 나누어서 filter 기능을 주었음.

3. 회원 정보 수정
   
4. 계좌 연결
   
   

제품 상세 보기

1. 상세 페이지 장바구니
   

메인 - 관리자

1. 주문 현황, 거래 현황
   

2. 모든 제품 조회
   

3. 제품 수정
   

4. 전체 거래 내역
   

5. 제품 추가
   

🤔 KPT

Keep

• 깃허브를 활용한 팀 프로젝트.
• 매일 작업을 시작하기 전 본인이 작업할 부분에 대한 브리핑을 잠깐 나눈 후 작업을 시작한 것.
• 라이브러리를 많이 사용하지 않은 것. 그로 인해서 직접 코드를 구현해 볼 수 있어서 좋았다.

Problem

• 처음 진행하는 팀 프로젝트였다 보니 다른 사람들과의 코드 충돌이 많았다.
• eslint, prettier을 사용했음에도 제대로 적용되지 않아서 팀원들 간 코드 스타일이 달랐던 것.
• 극 초반에 깃허브 코트 컨플릭트가 자주 났던 것.
• 사용자 페이지와 관리자 페이지의 스타일이 많이 다른 점. 사용자 페이지는 alert으로 거의 처리했는데 관리자 페이지는 toast ui가 따로 있다.
• api를 사용할 때 try catch 처리가 어려웠다. 아예 콘솔창에 에러 자체를 안 띄우는 방법은 없는 건가?
• hash change의 문제인지 페이지 전환이 매끄럽지 않다.

Try

• 팀원들과 충분한 코드 컨벤션에 대한 회의를 나누기.
• pull과 push를 기간을 정해서 하기. pr을 올릴 때 자신이 작성한 코드에 어떤 변경 사항이 있는지 팀원들에게 충분히 알리고, 팀원들도 잘 듣기.
• try catch에서 잡을 수 있는 상태 코드에 대해서 조금 더 공부하기.
• react로 마이그레이션 해 보기.

✨ 마무리 하며...

좋은 팀원들과 끝까지 프로젝트를 마무리 할 수 있어서 좋았던 프로젝트였습니다. 리액트가 아닌 바닐라 자바스크립트로 프로젝트를 진행해 볼 일이 사실 앞으로 잘 없을 것 같아 바닐라 자바스크립트로 이 정도의 프로젝트를 해냈다는 것 자체로도 굉장히 뿌듯함을 느끼고 있습니다. 그래도 코드 작성에 많이 미숙했던 시기이기도 하고 처음 팀 프로젝트라서 팀원들과의 합이 조금은 부족하지 않았나 하는 생각도 많이 들었습니다. 멘토님들의 코드 리뷰를 통해서 우리의 코드가 어떤 문제가 있고, 어떻게 개선할 수 있을지에 대한 이야기를 듣게 되어 막 프로젝트가 끝났을 때는 다 같이 라이브 쉐어를 켜서 코드를 고치기도 했었습니다. 재미있으면서 알찬 시간들이었습니다. 고생한 팀원들에게 너무 감사드리고, 덕분에 성장할 수 있었습니다!