프로젝트 회고


프로젝트 소개


  • 쇼핑몰 ( E-commerce )

    • 배민 문방구 (배달의민족) 사이트 클론 코딩

  • 개발인원

    • FrontEnd (3명)
    • BackEnd (3명)

  • 개발 기간

    • 2023.02.06 ~ 2023.02.17

적용 기술


FrontEnd

  • React.js, sass, JavaScript, HTML, CSS

BackEnd

  • Node.js, Express, Json Web Token, Bcrypt, MySQL, uuid

Common

  • Restful API, Git, Github, Trello, Slack, Notion, Postman

팀원들과 협업


NOTION

  • Notion 을 통해서 프로젝트 기간동안 구성원들 간 일별 할 일 / 한 일에 대해서 내용을 공유하고 Block 사항이 발생하는 일들에 대하여 공유하여 같이 해결할 수 있는 일들에 대하여 고민할 수 있는 시간이었다.

TRELLO

  • Trello 를 통해 매일 DSM 을 진행하면서 프로젝트 구성원들의 스케줄을 정리하고 팀원들과 공유를 했다.

회원가입, 로그인, 리스트페이지, 장바구니, 결제 페이지등을 맡아서 진행했다.

사진


장바구니, 결체 페이지

  • 이번 프로젝트에서 내가 맡은 부분은 장바구니와 주문서 페이지 이다.



사진


장바구니

  • 상세피이지 에서 장바구니로 담은 상품들 결제할 제품 목록들 을 받아와서 제품 목록과 가격 총합을 보여줄 수 있도록 기능 구현을 했고, 각 상품마다 수량을 올리고 내리는 기능을 구현 했다. 기본 수량 값은 back 서버 쪽에서 받아올 수 있도록 하였고, 수량을 내리는 경우 0 미만으로 내려가지 않도록 프론트/ 백 양측에서 검증을 하였다. 각 상품의 수량이 올라 감에 따라 각 상품 각각의 가격이 올라가거나 내려갈 수 있도록 구현 하였다.

장바구니 기능에서 가장 어렵고 힘들었던 부분은 상태관리 부분이었다. 각 상품들 마다 체크 박스 선택을 하게 되면 전체 선택 체크박스 부분이 체크 될수 있도록 만들었고, 선택된 상품만 삭제 할 수 있는 선택 삭제 부분도 구현을 했다.
이외 여러 자잘한 기능들도 많아서 시간이 좀 걸리는 부분이 많았고 그래서 많이 해맸던 부분들이 있었다.

주문서

  • 주문서 페이지는 비교적 어려운 부분은 많이 없었다.

장바구니 우측 가격 + 배송비등 총합이 나오는 것은 주문서에서도 동일하게 적용되었기 때문에 장바구니에서 사용한 부분을 그대로 사용 하였다. 주문서에서의 중요한 부분은 장바구니에서의 상품 데이터등 수량 가격등을 주문하기 버튼을 눌러 서버로 보내 주었을때 그정보들을 서버에서 다시 받아와 리스트에 담아 내었고 주문서에서 배송지 버튼을 눌러 사용자가 상품을 받을 정보등을 적으면 그 데이터를 서버로 보낼 수 있게 만들었다.



프로젝트 회고


프로젝트가 시작이 되고 장바구니 페이지를 먼저 맡게 되었는데, 처음에는 너무 막막했었다. 무엇을 어떻게 어디서 부터 진행을 해야하는지 아직까지 모든게 서툴고 코드를 치는거 자체가 쉽게 머리속에서 그려지지 않았다.
우선 장바구니 에 어떤 기능들이 들어있는지 하나하나 정리해보았고, 그기능들을 하나하나 먼저 만들어 보았다.
기능들을 하나하나 만들어보면서 너무 힘들었다. 분명 배웠던 기능들인것 같은데 …
그래도 비교적 엄청 어렵지않게 구글링도 하면서 만들어갔다…
가장 어렵고 막혔던 부분은 체크 박스 부분이었다. 상세페이지에서 받아온 상품들 체크박스에 전부 체크를 하면 전체선택 체크박스가 체크가 되고 하는 상태관리 부분이 너무 어려웠다… 멘토님들께 여쭈어보고, 같은 동기 분들께도 물어보고 구글링도 해보면서 겨우겨우 만들어 내긴했지만 아직까지도 이해가 잘 안되는 부분이다. ..( 공부하고 조금더 살펴야겠다.. )

이런 기능 구현 이외에 힘들었다기 보다 조금더 신경을 썼어야 하는 부분은…
프로젝트를 진행 하면서 매일 같이 DSM 을 진행했고, DSM 이외에도 여러번 회의를 진행을 했고 중간중간 팀원 끼리 소통도 많이했다고 생각을 했는데, 프로젝트 마지막날 알게된사실… 소통이 조금 부족했나 ?
서버에서 만들어준 데이터의 key 를 제대로 맞추지 못하였던것.. ;;
그래서 허겁지겁 마지막날 맞추어보면서 진땀을 뺀 기억이 ;;
앞으로는 Backend 분들과의 이러한 소통이 정말 중요하다는 것을 깨닳았다.

다음 2차 프로젝트가 기대가 된다. 분명 또 막힐것이고 답답하고 힘들겠지.. 그래도 팀원 들과 함께 소통하면서 함께 만들어 나가는 재미와 완성하고 난후에 희열 못참취~