Projects

[Project] ZoopZoopMarket (줍줍마켓) 팀 프로젝트 후기

zero2-pooh 2023. 6. 20. 20:38

📄개요

🥕마켓을 본따 'ZOOPZOOP'이라는 중고거래 사이트를 제작했다.

'줍줍'의 의미는 흔히 게임에서 다른사람의 필요없는 물건을 주웠을 때, 득템 했다! 라는 의미인데,

이번 프로젝트 기획 또한 중고 거래 커머스 이기에 ZOOPZOOPMarKet으로 결정했다.    

 

 

🐈‍⬛깃허브

https://github.com/seonyeong719/ZoopzoopMarket

 

GitHub - seonyeong719/ZoopzoopMarket: FrontEnd_team1 Final Project

FrontEnd_team1 Final Project. Contribute to seonyeong719/ZoopzoopMarket development by creating an account on GitHub.

github.com

👉🏻 프로젝트 오거나이제이션에서 fork 해온 레포지토리 입니다. 

 

 

🗓️프로젝트 기간

2023년 4월 27일 ~ 6월 9일 

 

🤝🏻 협업

  • Prettier , Eslint, Husky 로 코드 컨벤션 적용.
  • Notion으로 칸반보드, 백로그를 작성하며 프로젝트 진행상황을 문서화로 진행.
  • 기획 단계에 Figma를 통해 소통 및 협업

 

👨‍👩‍👧‍👦 팀원 구성

  • 프론트엔드 6명(본인 포함)
  • 백엔드 1명

📧 배포 주소

zoopzoop-market.vercel.app

 

zoop-zoop market

 

zoopzoop-market.vercel.app

🖥️ 프로젝트 메인 화면 (Web, Mobile)

 

🖥️ Web

 

📱Mobile

 

 

🖐🏻 담당한 기능

  • 로그인/ 회원가입 전체 UI,기능 담당
  • 최근 본 상품 리스트 UI, 조회, 삭제 등 전체 기능 담당
  • 마이페이지 관심상품 리스트
  • 마이페이지 프로필 이미지 편집
  • 전체 페이지 모달창 관리

 

 

⚒️사용 기술 및 라이브러리

Stack
  • React
  • JavaScript
  • HTML
  • CSS

 

Library
  • React-Query
  • React-Hook-Form
  • Styled-Components
  • framer-motion
  • Recoil
  • Socket.io
  • Axios
  • React-Router
  • mui

해당 라이브러리를 사용한 이유?

React-Query (리액트 쿼리)
  •  React 어플리케이션 내에서 데이터 패칭, 캐싱, 동기적, 그리고 서버의 상태의 업데이트를 좀 더 용이하게 사용할 수 있어서.
  • 쿼리에서 캐싱을 해주기 때문에 유지보수에도 효율적이다. 

 

 

React-Hook-Form (리액트 훅폼)
  • React-Hook-Form은 유효성 검사, 실시간 동기화 등의 API를 제공하여 실시간 유효성 검사 및 동기화를 가능하게 해준다.
  • 적은 코드로 더 좋은 퍼포먼스를 낼 수 있고 다른 라이브러리에 비해 리렌더링이 적다. 
  • 유효성 검사를 할 때 좀 더 가독성 좋고 직관적이게 코드를 짤 수 있다.

 

 

Styled-Components
  • CSS-in-JS방식으로 스타일링 할수 있는 라이브러리이다.
  • props를 활용한 조건부 스타일링이 가능해 선호하는 스타일링 방식이기도 하여 사용하였다.

 

✍🏻 후기 및 회고

기본적인 기능은 다 동작하지만 프로젝트 기간이 끝난 후에도 짜잘한 부분에서 오류가 계속 보였다. (동작이 이상하다던가 UI적으로 미진한 부분 등). 또한 반응형 부분에서 많이 미흡한 점이 많아 초기 기획을 좀 더 탄탄하고 컨벤션을 더 정확하게 다 맞췄더라면 좀 더 좋지 않았을까 라는 생각도 든다.

 

프로젝트 경험이 있는 팀원들이 없어서 그런지 기획적인 부분과 초기 작업들에서 어떤식으로 해야 좋을지, 컨벤션도 얼마나 구체적으로 짜야할지.. 이런 부분들을 잘 몰라 초반에 시간을 많이 잡아 먹었다.😅 하지만 처음 부터 끝까지 팀원들과 함께 고민을 해가며 만들어서 그런지 기획은 앞으로 어떻게 해야하는지 감이 잡혔다! 

 

아쉬웠던 점 + 느낀 점

- 기획에서 생각보다 시간을 너무 많이 잡아먹었다. 좀 더 빠르게 끝낼 수 있었는데 아쉽다.

- 백엔드가 나오기 전에 msw를 사용하여 기능 구현을 하려고 했으나, 기획이 늦춰지다 보니 msw를 사용하지 못하였다.

- 프론트단에서 우리가 필요한 api 데이터가 무엇인지 생각하고 백엔드에게 요청을 했어야 했는데 그땐 필요한게 없다고 생각을 했으나,

기능 구현에 들어가니 필요한 데이터가 쏟아졌다.. 

- 인원이 많다 보니 다들 조금 느슨해진 경향도 있었던 것 같은데, 다같이 마음을 잡고 꾸준한 백로그 작성과 주기적인 qa시간을 가지며 소통을 많이 한 덕에 무사히 마무리 할 수 있었던 것 같다. (단합과 협동이 중요한걸 다시 한번 깨달았다!)

- 기간이 길어져 리팩토링을 할 시간이 거의 없었다. 이 부분은 추후에 각자 리팩토링을 해보자고 하고 마무리가 되었다.