2차 프로젝트 회고록

프로젝트 소개

 

- 오늘의 집 클론코딩

- 커뮤니티와 커머스 위주로 구현된 웹 사이트 

- 20~30대 이사를 준비하는 인테리어에 관심이 많은 사람들 대상으로 서비스 구현

- 닉네임을 가지고 커뮤니티 활동을 하면서 소비자의 구매까지의 과정 구현

- 해당 인테리어에 대한 상품을 다른 웹 사이트와 다르게 상품을 전시

 

 

 

 

 

팀명 : 콤배콤(comebackhome)

개발기간 : 2023.3.24 ~ 2023.4.7 (약 2주)

 

개발 인원 

- Front : 신정호, 문은빈, 이기태

- Back : 임수정, 류승준

 

기술스택

- Front : JavaScript, React, esLint, Prettier

- Back : JavaScript, Nodejs, MySql, Rest, Jest

- Communication : Slack, Trello, Git, Github, VScode

 

각 페이지별 주요 구현 사항

- Nav : LocalStorage 의 token 유무에 따른 UI 구현

- Login : Kakao Social Login

- Main : carousel

- Product List : Pagenation, Filter

- Product Detail : 재고에 따른 주문 수량 관리

- 집들이 Detail

  : image 마커 라이브러리 이용하여 마우스 hover시 Back 에서 보내주는 좌표값에 + Button이 나오도록 구현

  댓글, 대댓글 기능   

- Cart : checkbox 기능 

- Order : Point 를 이용한 결제 기능

- Footer : icon click 시 팀 프로젝트에서 활용한 git, notion, trello 페이지 이동

 

https://thenutcracker.tistory.com/59

2차 프로젝트 기능구현

 

 

 

 

1차 프로젝트와 달랐던 점

 

- 사전 작업 : ERD 작업을 할 때, 대댓글 기능을 위해서는 댓글에 대한 id 값이 같은 id만 담기도록 짜야했다. 댓글 테이블에서

id를 self join 할 수 있도록 ERD를 만든 점이 1차와는 가장 큰 다른점 이었다.

 

- Login : 1차 프로젝트 때와는 다르게 social login을 구현했다. 카카오 API를 접근해서 사용하는데 어려웠다. 특히 token을 받아서 필요한 정보를 가지고 다시 token 을 만들어서 보내는 과정이 어려웠다. 

 

- 집들이 Detail :  상품 이미지에 좌표 값을 관리해주는 테이블을  ERD 작업할때 별도로 만들어 주었다. Back에서 좌표 값을 받아서 이미지에 button을 생성할때 이미지 안에 모든 상품 데이터가 다 생성되는 어려움도 있었다. 상품 id값을 통해서 같은 id 일 때만 해당 데이터가 생성되도록 관리해줬다.

댓글, 대댓글 기능에서 해당 댓글에만 대댓글이 달려야 하는데 모든 댓글에 대댓글이 달리는 경우도 있었고

대댓글을 달면 댓글로 달리는 경우도 있었다.

렌더링 문제였고 렌더링 관련 문제를 하나식 해결해가면서 대댓글 기능을 구현 할 수 있었다.

 

- 재고 관리 : 수량을 조절하는 기능이 들어간 모든 페이지, Product Detail, Cart, Order 페이지에서 동일하게 기능을 구현했다. 재고 수량보다 많은 수량을 주문할 수 없게 기능을 구현했고, Back에서도 에러핸들링을 할 수 있도록 기능을 구현했다. 

 

- Pagination : Product List 페이지에서 한 페이지에서 나오는 상품수를 계산하면서 기능을 구현했다. Back에서도 offset과 limit 을 설정하여 대량의 데이터가 한번에 넘어가지 않고 나누어서 전달 될 수 있도록 기능을 구현했다.

 

- Order : cart에 담은 가격만큼 point를 제공해서 해당 가격만큼만 포인트로 결제 될 수 있도록 기능을 구현했다.

 

- Library : 메인페이지에서 carousel 을 library로 구현했다.

 

 

느낀점

- Back 팀원 한명이 개인 사정으로 인해 끝까지 함께 진행하지 못하는 경우가 생겼다. 중간에 결원이 생겼음에도 팀원들 전부 동요하지 않고 끝까지 책임감 있게 해주는 덕분에 무사히 마칠 수 있어서 이 부분이 제일 감사했다. 

- styled component를 처음 사용하면서 처음에는 이걸 왜 사용하는지 의문이었지만 차츰 적응해가면서 익숙해질 수 있는 시간이었다. 

- 본격적으로 code를 짜기 전에 구현하고자 하는 서비스를 잘 분석한 결과, 선택과 집중을 잘 해서 주어진 시간을 알맞게 활용하여 프로젝트를 끝낼 수 있었다. 팀원 모두의 노력의 결과 인것 같다. 

- Back 과의 통신을 이번 프로젝트때 조금 더 해볼 수 있었다. 물론 아직 미비한 점이 많았지만 1차 때보다는 Back과의 통신을 해보면서 이 과정이 얼마나 힘든?!! 과정인지 또 한번더 알게 되었다. 

- 내가 맡은 페이지는 cart 페이지 였는데 다른 팀원들이 구현한 기능에 대해서는 아직 모르는 부분이 많다. 추후 보완하고 공부할 부분이 많다. 프로젝트가 끝났지만 내 공부는 아직 끝나지 않은 기분이다. 

- 이번에도 운 좋게 Product Manager를 하게 되어 발표까지 하게 되었다. 발표 준비하면서 단순히 code만을 위한 작업이 아닌 전체적인 흐름을 바라볼수 있는 유익한 시간이었다. 

 

 

https://github.com/wecode-bootcamp-korea/43-2nd-comebackhome-frontend.git

GitHub - wecode-bootcamp-korea/43-2nd-comebackhome-frontend: 이기태, 문은빈, 신정호

 

https://github.com/wecode-bootcamp-korea/43-2nd-comebackhome-backend.git

GitHub - wecode-bootcamp-korea/43-2nd-comebackhome-backend: 임수정, 류승준

 

1차 프로젝트 회고록(feat.원툴)

https://thenutcracker.tistory.com/61