[Project] ZOOPZOOP (줍줍마켓) 후기

🚀  프로젝트에 대하여

< 프로젝트 개요 >

요즘 핫한 중고거래 사이트인 당근마켓을 본따 [ ZOOPZOOP ]이라는 중고거래 사이트를 제작.

줍줍이라는 이름의 의미는 게임에서 아이디어를 얻었다. 좋은 혹은 필요한(때로는 무료의) 아이템을 발견하고 내 인벤토리에 넣을 때 사용하는 "줍줍한다"라는 표현이 기획한 프로젝트의 컨셉과 잘 맞아 웹사이트 이름을 [ ZOOPZOOP ]으로 결정했다.

 

< 프로젝트 기간 >

2023년 4월 9일 ~ 2023년 6월 8일 ( 총 2달 )

 

< 프로젝트 깃허브 >

GitHub - Frontend-TEAM1/ZoopzoopMarket: FrontEnd_team1 Final Project

 

< 프로젝트 배포 사이트 >

zoop-zoop market

 

< 팀원 소개 >

프론트엔드 개발자 6명과 함께 프로젝트를 진행.

 

< 협력 툴 >

vsCode 내에 prettier와 esLint, husky를 적용시켜 코드 컨벤션 적용.

기획 단계에서 Figma를 통한 회의 및 협업.

Notion의 다양한 기능을 이용한 문서화 및 칸반보드 진행.

 

---

좌) ZOOPZOOP   /   우) https://www.daangn.com/

---

✨  사용 기술 스택

< MAIN >	< CSS >
JavaScript, React	styled-components, media-query(반응형)
< Library >
react-query, axios, react-router, recoil, react-hook-form, kakao map, slick-slider, socket.io,dayjs, framer-motion, mui, recharts

---

리액트를 사용한 이유?
작게 컴포넌트 단위로 유지보수하면 되는 점이 가장 좋았고, 랜더링 최적화를 위한 좋은 옵션이라 생각하여 리액트로 프로젝트를 만들게 되었다.

유효성 검사를 react-hook-form으로 한 이유?
리액트 훅폼을 사용하지 않고 유효성 검사를 할 경우에는 각 입력값을 state로 관리하게 되고, onChange 이벤트에 유효성 검사를 설정해두면 과도한 랜더링을 야기하게 된다. 또한 길어지는 코드로 인해 가독성이 떨어지게 될 것이다.
하지만 리액트 훅폼을 사용한다면 좀 더 직관적이고 일관되게 코딩이 가능해진다. 적은 코드로 훨씬 효율적이고 랜더링 최적화도 할 수 있어 러닝커브가 있음에도 불구하고 리액트 훅폼을 사용하기로 했다.

react-query를 사용한 이유?
상태를 관리하는 라이브러리에는 redux, recoil 등 많지만 캐싱 작업 뿐 아니라 원하는 시기에 최신화를 할 수 있어서 선택하게 되었다.

---

📖  페이지에 대하여

< 페이지 설명 >  (🥕표시는 직접 구현한 페이지)

• 랜딩 페이지 : 회원에 한해서만 서비스 페이지로 이동이 가능하게 구현
• 회원가입/로그인 페이지 : react-hook-form을 사용하여 유효성 검사와 랜더링 최적화 진행  🥕
• 메인 페이지 : 로그인 후 처음 접하는 페이지
  • 스켈레톤 UI를 활용하여 사용자가 느끼는 지루함을 최소화
  • slick-slider를 사용하여 슬라이드 기능 구현
• 거래 목록 및 시세 검색 페이지
  • 판매중인 아이템들을 중고와 무료나눔으로 구분하여 표시 (판매완료된 아이템들은 마이페이지에서 확인 가능)
  • 입력받은 키워드가 포함된 판매 완료 내역들의 평균 가격 = 시세 (제목, 본문, 태그에서 일치하는 내용으로 검색)
• 아이템 등록 페이지  🥕
  • 이미지는 최대 5장(첫번째 사진이 대표사진), 제목, 가격, 태그, 거래장소, 본문으로 구성
  • formdata에 데이터를 실어 axios 요청
  • 메인 페이지 내 카테고리 검색과 연동시키기 위한 태그 옵션 제공과 자유로운 태그 입력 가능하도록 구현
  • kakaoMap api와 daum-post api를 이용한 주소입력시 지도 동기화
• 아이템 조회(상세) 페이지 (+삭제 로직, 판매완료 로직 포함)  🥕
  • 서버에 등록된 아이템 정보를 바탕으로 상세 페이지 구현
  • 삭제버튼을 포함하고 있어 버튼 클릭시 삭제 기능까지 구현
  • 페이지 내 판매완료 버튼 클릭시 해당 게시글에 채팅 이력이 있는 사용자 리스트 중 구매자 선정. (리뷰 로직과 연관되어 있음)
• 아이템 수정 페이지  🥕
  • formdata에 데이터를 실어 axios 요청
  • 아이템 등록 페이지와 동일한 페이지에 기존 등록한 정보가 미리 기입된 화면으로 표현
  • 수정(업데이트)이 발생한 후, 저장 버튼 클릭 이벤트를 통한 백엔드 서버 내 정보 업데이트
• 검색 페이지
  • 검색창에 키워드 입력하면 제목 / 본문 / 태그에서 일치하는 내용으로 검색 결과 보여주는 화면
  • useInfiniteQuery를 이용한 무한스크롤 지원
• 채팅 페이지
  • socket.io(websocket)를 이용한 실시간 채팅 기능
  • useContext를 사용하여 socket 지정
  • 어느 페이지에서나 새로운 채팅 알림창 표시 기능
• 마이페이지
  • 내 등록템, 개인정보 수정, 관심템, 가계부, 내 후기 탭으로 구성된 페이지
  • 내 등록템과 관심템 : useInfiniteQuery를 이용한 무한스크롤 지원
  • 개인정보 수정 : react-hook-form을 사용하여 유효성 검사와 랜더링 최적화 진행  🥕
  • 가계부 : react-calendar를 사용하여 월단위 내용을 달력으로 표시
  • 내 후기 : 리뷰를 작성할 수 있는(= 내가 구매자로 지정된) 리스트 표시. 리뷰 작성에 필요한 구매 상품 정보는 recoil로 관리하여 props drilling 최소화  🥕
• 리뷰 작성 페이지  🥕
  • formdata에 데이터를 실어 axios 요청
  • 판매자가 아이템 상세 페이지에 있는 판매완료 버튼 클릭 후 나를 구매자로 지정한 경우에만 리뷰 작성하기가 활성화 됨 (마이페이지/내 후기 탭에서 확인 가능)
  • 마이페이지/내 후기 탭의 각 카드에 있는 리뷰 작성하기 버튼 클릭시 리뷰 작성 페이지로 이동.
  • 점수와 내용, 사진 등록가능
• 리뷰 조회(상세) 페이지 (+삭제 로직 포함)  🥕
  • 서버에 등록된 리뷰 정보를 바탕으로 리뷰 상세 페이지 구현
  • 삭제 버튼을 포함하고 있어 버튼 클릭시 삭제 기능까지 구현 ➡ 삭제가 되면 마이페이지/내 후기 탭 내 카드의 리뷰 작성하기 버튼이 다시 활성화 되도록 구현
• 리뷰 수정 페이지  🥕
  • formdata에 데이터를 실어 axios 요청
  • 리뷰 상세 페이지 내 수정 버튼을 포함하고 있어 버튼 클릭시 수정 페이지로 이동
  • 리뷰 작성 페이지와 동일한 페이지에 기존 서버에 저장된 후기 정보가 미리 기입된 화면으로 표현
  • 수정(업데이트)이 발생한 후, 저장 버튼 클릭 이벤트를 통한 백엔드 서버 내 정보 업데이트

---

< 시현 영상 >

회원가입 및 로그인   /   메인 페이지   /   거래 목록 및 시세검색

 

아이템 등록   /   아이템 수정 및 삭제   /   키워드 검색 및 채팅

 

마이페이지   /   리뷰 등록하기   /   리뷰 수정 및 삭제

 

---

💭  후기 및 회고

< 좋았던 점 >

🔹 혼자 낑낑대던 기능 구현도 같이 고민하여 다른 접근들을 생각해내니 빨리 해결할 수 있었다.

🔹 같은 목표를 향해 다같이 노력하다보니 텐션이 루즈해지지 않았다.

🔹 내가 목표한 기간까지 개발해가지 않는다면 일어날 일들을 생각하며 개발에 임하니 책임감을 기를 수 있었다.

🔹 다른 분들에게 배울 점이 많았다.

 

< 아쉬웠던 점 >

🔸 프로젝트 경험이 없는 6명이 모이다보니 초반 기획단계에서 2주가 날라갔다. 그래도 다행히 방향성을 잡고 개발 진행했었다.

🔸 백엔드에서 필요한 데이터가 있을 경우 말해달라고 했는데 그때 당시에는 어떤게 필요한지 몰랐다. 지금 기억으로 그때로 돌아간다면 자잘하지만 꽤나 매력적인 field를 요청했을 것 같다.

🔸  axios로 body나 header에 데이터를 실어보내다가 처음 formdata를 써봤는데 이때 들인 시간만 일주일이었다.

🔸 프로젝트 진행이 2달이 되가다보니 뒤에는 많이 지쳐 리팩토링을 제대로 하지 못했다. 물론 각자 추후에 리팩토링 해보기로 하긴 했지만 아쉬움은 어쩔 수 없는 것 같다.

 

프로젝트를 진행하면서 가장 신경 쓴 부분은?
첫번째 팀 프로젝트다 보니 신경을 안쓴 부분을 찾기란 어렵다. 하지만 그중에서 가장 신경쓴 부분은 단연 협업 및 의사소통인 것 같다. 프로젝트가 진행되면서 처음에 내가 담당하던 컴포넌트나 페이지를 다른 팀원이 하고 있고 그 반대도 비일비재했다. 덕분에 일부가 아닌 전체적인 프로젝트를 알 수 있어서 좋았다.
하지만 개발에 바빠져 의사소통이 소홀해진 적이 있는데 그때 main 브랜치에 머지하는 과정에서 서로 오해하는 일이 생겨서 다시 한 번 의사소통을 잘하자! 다짐한 적이 있다. 🤣🤣