flask 서버, ajax, mongoDB 이용해서 마이나이키 페이지 만들기
(사이트에 이용한 사진 출처 - 나이키 공식홈페이지)
📅 기간 : 2020.10.31 ~ 11.01
나이키 공식사이트를 클론코딩해보려다가 너무 난이도가 높아서
부트스트랩으로 프론트엔드 잡고 그냥 시작.
Carousel 사용해보고싶어서 메인에 적용했다.
flask 서버에서 페이지 이동, 검색, 장바구니 만드는 것을 목표로 시작한 프로젝트
📖 구상
나이키 공홈은 메인에 carousel이 없어서 그냥 공홈 사진 3개로 만들었다.
카테고리 6개 (신발, 재킷, 후디, 팬츠, 탑, 용품)만 선택하고
카테고리당 상품 40개씩 긁어와서 총 240개로 db를 만들었다.
부트스트랩 목표는 carousel, dropdown 사용해보기.
전체 목표는 flask 서버에서 페이지 이동, 검색 기능, 장바구니 기능 구현
📖 DB 세팅
나이키 공홈에서 6개 카테고리당 40개씩 상품별 url, 이미지, 이름, 가격을 스크래핑했다.
이걸 카테고리별로 보여줄거라서 컬렉션을 카테고리별로 하나씩 만들고,
전체 240개 담긴 컬렉션을 만들었는데, 생각해보니 카테고리라는 key를 만들어서 카테고리 부여했으면 컬렉션 하나로 해결됐을텐데....
코드가 지저분해져서 아쉽다😭
db 만들면서 mongoDB 에서 database, collection,document 개념이 잡혔다.
server -> database -> collection -> document
📖 API 설계
| 목적 | API주소 (요청방법) | 서버 | 클라이언트 |
|---|---|---|---|
| 상품 불러오기 | /api/home(GET) | 전체 collection에서 상품 리스트를 불러온다 | 상품들로 카드를 만든다 |
| 카트 불러오기 | /api/cart(GET) | 카트 collection에서 상품 리스트를 불러온다 | 상품들로 카드를 만든다 |
| 카트에 저장하기 | /api/cart(POST) | 해당 상품을 카트 collection에 저장한다 | 장바구니 버튼 눌린 상품의 이름을 전달한다 |
| 카트에서 삭제하기 | /api/cart/del(POST) | 해당 상품을 카트 collection에서 삭제한다 | 삭제 버튼 눌린 상품의 이름을 전달한다 |
| 검색하기 | /api/search(POST) | 전달된 검색어가 포함된 상품을 전체 collection에서 찾아 검색결과 collection에 저장한다 | 검색창에 입력한 값을 전달한다 |
| 검색결과 보여주기 | /api/search(GET) | 검색결과 collection에서 상품 리스트를 불러온다 | 상품들로 카드를 만든다 |
API 설계하면서 부족함을 뼈저리게 느꼈다.
하지만 만들면서 느낀점은 어려워도 계속 고민하다보면 어떻게든 된다는거😎
검색 구현하는데 정말 어려워서 그냥 버릴까 생각도 했지만
다른거 하면서도 하루종일 검색 기능 구현만 생각하다보니 갑자기 로직이 떠올랐다.
최선의 방법은 아니겠지만 어찌 됐든 구현했으니까ㅠㅠ 기특해😭
다 만들고나니 아쉬운 점이 많이 보여서 이번에는 프로젝트 글 마지막에
아쉬웠던 점들도 정리해봐야겠다.
