작년 22년 8월부터 수강한 6개월간의 프론트엔드 교육과정의 종착지로 이제껏 배운 내용을 총망라하여 final 프로젝트를 만들어보았습니다. 진행과정에서 배운 점들과 느낀점들을 정리해보겠습니다 :)
📜 Zoopzoop Market 소개
줍줍마켓은 사용자가 활동 지역을 설정하고 상품을 등록하여 유저간 판매 및 구매 활동을 할 수 있도록 서비스를 제공하는 중고거래 웹사이트입니다. 자유롭게 거래할 수 있도록 실시간 채팅과 가계부 확인, 시세 조회 및 리뷰 등록 기능을 제공합니다.
🧚♀️ 구경하기
🪄 주요기능
- 회원가입 / 로그인을 통해 계정 관리 및 활동지역 설정
- 카테고리별 상품 모아보기
- 상품 등록 및 수정 삭제
- 상품 구매를 위한 실시간 채팅
- 판매자일 경우 구매확정
- 개인 정보 & 비밀번호 변경
- 물품 시세 조회
- 가계부 조회
- 리뷰 등록, 수정, 삭제
- 최근 본 상품 조회 및 삭제
👥 진행 내역
- 진행 기간
-
W/F & UX/UI 기획, 컨벤션 지정 : 23/04/17 ~ 23/04/22
🎨 피그마 https://www.figma.com/file/q7b02izl7kucudDRoXtmav/Untitled?type=design&node-id=1-2&mode=design
📝 노션
https://www.notion.so/541d2d034e264fddadc6b9ca87217430 -
퍼블리싱, 기능 개발 : 23/04/23 ~ 23/06/04
- 팀 구성 및 역할 분담
- 총 6명으로 3인 1팀, 총 2팀 (+ 외부 백엔드 개발자 1인)
- 백엔드 개발자가 작성한 swagger 문서를 바탕으로 기능별 서버 api를 분담하여 개발 진행했습니다.
Team1 : user api 관련 기능 (로그인 / 회원가입, 마이페이지, 채팅 기능)
Team2 : product api 관련 기능 (메인페이지, 상품등록/상세, 리뷰 기능)
🙋🏻♀️ 진행 방식
✅ Agile 개발론 채택을 통한 팀원간 진행상황 공유
백로그 및 데일리 스크럼 작성을 통해 팀원들간의 소통 시간을 줄이고, 타 팀원간 진행상황 및 어려움을 공유하며 개발 전후 일정 계획 수립 및 실행.
🗓️ 백로그 및 데일리 스크럼
https://www.notion.so/156cac8588fe4068aaf11ae1d2f1638c
✅ 일주일 1회 온라인 회의 진행
각자 개발하며 대면한 문제를 공유하고 기획 단계에서 부실했던 정책 및 w/f을 보강. 매 회의시간마다 놓치는 내용이 없도록 회의록 작성.
📝 주간 회의록
https://www.notion.so/db03ec83585042419be5bdc16fb3ab34
✅ Pull Request & Merge
1차 : [개인 function 브랜치 → 팀별 feature 브랜치] pr & merge
2차 : [팀별 feature 브랜치 → main 브랜치] pr & merge
✅ 코드리뷰
깃허브 reviewer를 통한 상대팀 코드 확인 후 피드백 공유
기여 포인트
-
팀 내 역할
: scrum master로서 팀원들과 정한 완성일을 기점으로 팀원별 주간 일정 체크. 기능별 개발 기간을 산정하여 다음 스텝을 짜고 개발 과정이 루즈해지지 않도록 일정 관리. -
기능 개발
(1) 회원가입 / 유저 개인정보 및 비밀번호 수정 기능 개발
: hook form을 사용하여 사용자가 정보를 입력할 때 발생하는 불필요한 랜더링을 막고자 했습니다. 유효성 검사를 통해 사용자에게 기입할 정보 기준을 명확히 전달함으로써 보다 편리하고 안전한 정보 기입을 유도했습니다.
(2) 마이페이지 _ 내 등록템 모아보기
: 사용자가 등록한 상품을 공용 카드 컴포넌트를 사용하여 props로 원하는 정보를 카드에 담아 모아보기 기능을 구현했습니다. grid를 사용하여 반응형으로 구현했습니다.
(3) 마이페이지 _ 가계부
: dayJS와 react-calendar 라이브러리를 활용하여 가계부를 구현했습니다. 사용자가 선택할 수 있도록 년, 월, 판매/구매 셀렉터를 만들어서 해당하는 내역을 달력 형태로 표시하며, 월별 세부 내역을 카드형태로 확인할 수 있도록 구현했습니다.
(4) 마이페이지 _ 토글 메뉴바
: react-router-dom 라이브러리를 사용하여 마이페이지 메뉴바를 구현했습니다. 어떤 메뉴바를 클릭하더라도 상단에 유저 프로필 정보가 나오고 아래의 내용만 바뀌도록 구현하기 위해 outlet 속성을 활용했습니다.
💡What I Learned ?
-
애자일 개발론의 중요성
프로젝트 진행 초반에는 백로그와 데일리 스크럼과 같이 문서로 소통하기보다는 일주일에 4시간 넘는 온라인 회의시간을 가지며 효율적이지 않은 방식으로 소통했습니다. 즉각적으로 논의가 필요한 주제에 대해 직접 소통할 수 있었지만 긴 시간의 회의로 몰입도가 떨어지고 타이트한 일정 관리가 어려웠습니다.
이를 개선하고자 애자일 개발 방식을 도입하였고 주1회 회의 시 주간 백로그를 정하고, 팀원별 스크럼을 기재했습니다. 어려움이 있을 경우 코드로 소통하고 다른 팀원들의 일정을 확인하며 본인 일정 역시 짤수 있어 전체적인 진행 속도와 일정을 맞출수 있었습니다. 타이트한 일정관리와 몰입도 향상을 위해 애자일이 필요하다는 점을 배웠습니다. -
코드 리뷰 방식
pr & merge 과정에서 다른 팀원들의 코드를 리뷰하며 비효율적으로 작성한 코드를 어떻게 하면 리팩토링할 수 있을지에 대한 시각을 배울 수 있었습니다. 다른 사람들의 의견을 듣고 수정하는 과정에서 몰랐던 지식을 얻고, 기능 구현이 잘 되지 않을 때 도움을 얻으며 혼자 해결하지 않고 빠르게 진행할 수 있어 효율적이었습니다.
이번 포스팅은 대략적인 프로젝트 진행방식과 느낀점 위주를 기재했습니다:)
