깃헙주소: https://github.com/wecode-bootcamp-korea/justcode-7-1st-goomeongmarket-front
베포주소: http://54.180.128.213:3000/
Project Overview
why 마켓컬리?
보라색으로 통일된 직관적인 UI와 인터넷 쇼핑몰 자체로서의 기능이 가장 충실하다고 느껴서 첫 프로젝트로 선정하였다
작업기간
2022/10/31-2022/11/11
기술스택
백엔드3명
- EXPRESS
- MYSQL
- NODE.JS
프론트4명
- HTML/CSS
- JavaScript(ES6+)
- React
- SASS
협업도구
- Git
- Github
- Slack
- 디스코드
개인별로 담당한 기능
하이라이트 => 내가 구현한 기능!!
페이지별로 나눠서 기능구현=>로그인,메인,메뉴바별,장바구니,상세
-
회원가입/로그인페이지
-
main페이지
Nav,footer
캐러셀기능구현
장바구니 담기 기능구현 -
장바구니 페이지
장바구니 수량증가 기능구현 -
메뉴 페이지
메뉴바 기능 구현(신상,베스트,알뜰쇼핑)
검색기능 구현
드랍다운 목록 필터 구현(제품별,신상품순,가격순,이름순서)
미니필터 구현(신상품, 판매량순, 낮은가격순, 높은가격순) -
상세페이지
상세페이지 내 찜버튼, 장바구니 버튼 UI구현
상세페이지 후기 구현
AWS,EC2 배포진행
결과화면
1.메뉴바기능
2.드랍다운목록필터
3.미니필터
미니 필터링 기능으로 각 카테고리의 상품들이 신상품, 판매량순, 낮은가격순, 높은가격순으로 필터링 될 수 있도록 구현하였습니다
4.검색기능
메인검색창과 서브검색창 두곳에서 검색으로 제품을 찾을 수 있도록 만들었습니다
검색 시, 띄어쓰기나 대문자가 들어가도 검색이 될 수 있도록 하였습니다
Project Review
가장 어려웠던 기능구현은 무엇이였나요?
-1차 코드-
쿼리파라미터에 조건을 주는 부분이다.
쿼리 뒤에 &를 붙여 조건을 계속 만들어나가는 부분에 대해 이해가 부족했음에도 익숙하지 않은 useSearchParms를 사용해서 어려움에 어려움이 가중되었다
수정 하기에는 시간이 부족하여서 fetch를 두 번 사용해서 필터링하는 비효율적인 코드를 사용하게 되었다
또한 이중필터링 부분을 완벽하게 구현하지 못한것도 아쉬움으로 남았다
-2차 코드-
method를 post에서 -> get으로 수정하고 axios를 통해서 params를 넣어주었다
리팩토링을 통해 &로 조건이 더 필요해지더라도 fetch를 여러번 할 필요없이 계속해서 조건을 추가할 수 있는 방법을 알게 되었다
코드리팩토링으로 배운 것들~~!
-1차 코드-
처음에 메뉴를 보여줄때 상세페이지의 탭을 만들어 주는 방식으로 코드를 만들었다. 탭0을 클릭하면 "신상품", 탭1을 클릭하면 "베스트", 탭2 클릭하면 "알뜰쇼핑"이 나타날 수 있게 하였다. 원하는 방식으로 동작은 하였지만 <TabContent>가 중복되는 비효율적인 코드가 되었다
-2차 코드 -
tabId에 따라 fetch를 통해 "신상품","베스트","알뜰쇼핑"으로 이동할 수 있게 수정하였으며
useState의 값인 tabList를 props로 넘겨 각각 탭에 맞는 상품을 rendering할 수 있도록 수정하였다
이번 프로젝트로 인해 어느정도 성장했다고 생각하나요 ?
처음 딱 프로젝트를 마주 했을때 운전면허학원에서 느낀 감정이 떠올랐습니다
필기를 합격하자 바로 운전석에서 운전대를 잡으라고 하셔서 네? 제가요?? 지금요😳😳?? 라고 걱정하며 반문한 기억이 있습니다
첫 프로젝트는 아직 운전하기에 미숙하지만 어느새 운전면허를 취득하고 도로에 나갈 준비가 된 상태까지 스스로를 끌어 올렸다고 생각합니다
두려움보다 설레임으로 시작할 수 있게 되었다는 것에서 많은 성장을 이뤘다고 생각하고 앞으로 잘 나아갈 수 있게 좋은 발판으로 기억에 남을 프로젝트라고 생각합니다
