/-

마켓컬리 클론 프로젝트 프론트엔드

Primary LanguageJavaScript

마켓컬리 클론코딩

MarketKurly clone Project - FrontEnd

스크린샷 2022-04-20 오후 11 17 02

🤖 구현 기능

  • 회원가입 : 회원가입 유효성 검사
  • 로그인 : 로그인 유효성 검사
  • 메인 페이지
  • 상세 페이지 : 후기 버튼 클릭시 위치 이동
  • 후기 : CRUD, 이미지 전송
  • 도움이 됐어요 : 좋아요 기능
  • 장바구니 기능

🗓 프로젝트 기간

👥 팀 소개

Frontend

Backend

(Back-end github)

📜 기술스택

🏹 Trouble Shooting

  • FormData를 보낼때 데이터 전달이 안되는 상황 발생 → 서버에 FormData를 보낼 때 FormData를 감싸고 있는 { }를 지우니 해결

  • 후기 수정하기 부분에서 useSelector을 이용하여 포스트 상세페이지 정보를 가져왔는데 find함수를 이용해 후기의 Id값과 params의 commentId값이 같은 것을 반환해야하는데 반환하지 못하는 문제 발생 → 서버에서 받아온 제이슨 형식 데이터 안의 후기 ID값은 보기엔 숫자형태처럼 보이지만 숫자가 아니었기에 ===가 아닌 ==을 써서 해결

  • 회원가입 유효성검사 → 기존 정규식이 유효성 검사의 역할을 제대로 하지 못해, 정규식을 분리하여 조건을 걸어 사용하니 해결 됨.

  • 장바구니 페이지에서 useSelector로 장바구니 리스트를 불러와 price 정보를 빼내는 과정에서 for문을 돌렸을 때 useSelector를 해 오기 전, 장바구니 리스트 반복문이 먼저 실행되어 오류 발생 → for문 대신 map함수를 사용하여 똑같이 반복문을 돌리는데 [장바구니리스트.map()]을 [장바구니리스트 && 장바구니리스트.map()]으로 써서 문제 해결

🔨 API 설계

스크린샷 2022-04-20 오후 11 00 57

스크린샷 2022-04-20 오후 11 01 10

🐳 ERD

스크린샷 2022-04-20 오후 10 16 54