🔥 첫 프로젝트 마켓컬리 클론코딩 'market zero'

🟣 프로젝트 소개

내가 처음으로 진행한 개인 프로젝트 래퍼런스는 마켓컬리 이다.
왜 마켓컬리로 정하였는가? 라고 한다면,
내가 MD로 근무하면서 가장 많이 참고했던 쇼핑 사이트였다. 그래서 부트캠프 하는 동안 마켓컬리를 한번 나도 만들어보고 싶다 라는 생각을 하고 있었고
사용자가 보기에 가장 UI가 깔끔하면서 가장 한눈에 보기 쉽고 이용하는 서비스 또한 기능도 충실하다고 생각했다.

⚒️ 기술 스택

FrontEnd

• React CRA
• JavaScript
• ReactRouter
• CSS modules

DB

• Firebase

👩🏻‍💻 프로젝트 기간

2023.07.03 ~ 2023.07.30

프로젝트 페이지 구성 및 기능 구현 목표

1. 메인 페이지
   Carousel (배너, 추천 상품)
   하루 특가 타임 기능
   카테고리 2depth 구현
   카테고리 페이지 이동
   회원가입 , 로그인

2. 회원가입 , 로그인
   중복확인 기능
   유효성 검사
   소셜 로그인 (구글 로그인)
   로그인 시에는 메인페이지 OO님, 로그아웃 추가

3. 카테고리 페이지
   추천순 / 낮은 가격순 / 높은 가격순 필터링
   페이지네이션

4. 디테일 페이지
   검색창 키워드 입력 시 상품명 자동 완성
   상품 상세 페이지
   위시리스트 클릭 시 모달 및 이동
   장바구니 담기 클릭 시 모달 및 이동
   
   

💭 프로젝트를 하며 느낀점

1. 기초의 중요성과 리액트 패키지의 중요성
리액트를 사용하면서 다시 기초부터 자바스크립트 공부 해야겠다..하다가 기간에 쫓기다보니 소홀히 했는데 드디어 왜 자바스크립트 공부가 중요한지 뼈저리게 몸소 깨달았다.

특히 검색 기능, 필터링도 그렇고 회원가입 폼에는 유효성 검사가 필수이니 자바스크립트로 로직을 잘 짜야 된다는 것, 기초가 없으면 구글링을 해도 한계가 있었고 힘든 부분이 많았던것 같다.

작업하면서 생각하지 못했던 종속성 충돌 에러 문제가 계속 발생했다.
처음에는 뭐가 문제인지 모르고 계속 작업했었다. Vercel로 배포했을 때 에러가 자꾸 나와서 되게 난감했었다.. node_modules 폴더를 삭제하고 다시 설치도 해보고, 충돌 무시하고 설치해보고..
package.json 파일을 수정하면서 의존성 버전을 직접 수정하는것도 이번에 알게되었다.

2. 트러블슈팅
레이아웃만 보면 그럴싸한것 같지만 내가 원하던 기능을 제대로 구현하지 못했다.
메인에서 아이템 추천 영역 캐러셀 기능도 제대로 안되었고 검색결과 기능이나 장바구니 페이지, 위시리스트 페이지, 비회원 처리도 제대로 완성하지 못했다.

'상품명' 기준으로 검색했을 때 키워드가 계속 빈값으로 출력되고 모든 데이터가 결과 페이지에 렌더링 되고 있는데 이 문제를 아직 해결못했다.

3. 리팩토링 예정이라면 구체적으로
상태관리 라이브러리 활용 : 장바구니, 위시리스트 페이지 및 비회원 처리 문제 해결할 것.
검색 결과 컴포넌트 재수정
위시리스트 페이지에서 삭제 담기 버튼까지 구현하고, 장바구니 페이지에서는 토탈 금액까지 구현
메인페이지 아이템 장바구니 버튼 클릭 시 modal 구현까지 목표로 하고 있다.
거의 이정도면 전반적으로 리팩토리 예정이지 않을까...싶다..ㅎㅎ

💫 앞으로의 계획

개인프로젝트가 끝나자마자 바로 백엔드와 프론트엔드 협업 프로젝트가 시작된다.
제대로된 프로젝트가 시작되다니!! 설렘반 긴장반 걱정반.. 내가 잘 따라갈 수 있을지 걱정이다.
이번 팀프로젝트 하면서, 하루에 꼭 한시간 이라도 기술 면접도 준비하고 공부할 시간을 가지면서 계획을 잘 세워야겠다.
이번 개인 프로젝트에 너무 시간 분배를 못했던것 같아 계획도 엉망이었던것 같다.
오류 투성이지만 그래도 아예 몰랐던 부분들도 새롭게 알아가면서 나 혼자 할줄 아는것이 생기고 동작 되는거 보면서 제일 재밌었고 뿌듯했다. 팀프로젝트 이후에 개인프로젝트 리팩토링도 하면서 할 줄 아는 것들이 더 늘어나면 진짜 재밌어질 것 같다. 앞으로도 화이팅 🔥