제공된 API 를 이용한 오픈마켓 프로젝트입니다.
바닐라 스크립트로 구현하여, JavaScript 동작원리를 공부하기 위해 진행하였습니다.
배포 : https://crops-farm.netlify.app
Test ID :
Test PW :
메인 상품 페이지
상품 상세 페이지
로그인 및 회원가입 페이지
판매자 센터 페이지 (판매회원만 진입가능)
장바구니 페이지 (비 로그인 상태 및 구매회원만 진입가능)
메인 페이지 상품 무한 스크롤 구현
장바구니 담기 (local storage 활용)
상품검색 (API 이용하여, 키워드 입력시 데이터 불러오기)
판매자 센터 내, 상품 데이터 제공
로그인 및 회원가입 시, 유효성검사 필요
판매회원 상품 수정 기능
로그인 회원의 장바구니 기능을 데이터베이스 활용하는 방식으로 변경
문의 리뷰기능
현재 intersectionObserver API 활용하여 구현 완료 페이지 첫 로드시, 상품 1페이지를 보여줌 intersectionObserver 사용하여 스크롤이 끝에 다다르면, 다음 페이지 로드 -> 현재까지 로드된 페이지를 상태관리 -> 페이지 로드 함수 추가 작성 -> 함수시작시 관측하던 자식들 관측 종료 &함수 종료시 마지막 자식 관측
쿠키 vs 세션 세션의 경우 서버측에서 데이터관리를 하게 되므로, 사용자가 많아지면 서버에 부하를 줄 수 있게 된다. 그리고 브라우저 닫으면 사라짐
쿠키 vs 로컬 저장공간 삭제여부 쿠키 4kb 기간만료시 삭제 로컬 5~10 kb 삭제명령 없으면 영구 우선 로컬 이용
Hash History 이용하여, 라우팅 기능을 구현
웹 접근성과 SEO를 최대한 고려하여 아래와 같은 점수 획득
#5a6186 (sub-color)
#858cbc (main-color)
#ddacbb (accent-color & interAction-color)
#ebebeb (line-color)
#ffffff (bg-color)
발생오류 : 판매상품 등록시, API 서버에 이미지파일 전송 오류
동작시 상황 : 판매 회원이 판매 상품 등록시, 이미지와 상품정보를 API 서버로 전송하게 된다. 서버에서 올바른 형식의 포맷이 아니라고 에러메시지를 반환함
기존 구현 방식 : 이미지 파일과 데이터를 따로 API 서버로 전송
시도 1 : 이미지만 FormData 포맷으로 전송 후, 실패
시도 2 : 이미지만 base64로 인코딩하여 전송 후, 실패
해결 방식 : FormData 를 통해 이미지 파일과 다른 정보도 같이 묶어서 API 서버로 전송하여 해결