본문 바로가기

react-shop-web/front & back

(26)
Add To Cart 구현하기 #1 현재 server/models에서 Product 모델이나 User 모델을 보면 Cart에 관한 필드나 모델이 존재하지 않는다. 이 상태면 DB에 카트에 관한 정보를 저장할 수 없다. 이러면 카트에 관한 모델을 만들거나 따로 처리를 해줘야한다. 강의에서는 User 모델에 Cart 필드를 만들어서 관리를 했다. 가이드 라인은 다음과 같다. 위 이미지에서 history 필드는 결제를 하고 나면 어떤 상품을 샀는지 등등이 남을 건데 이것을 관리한다. User 모델에 Cart 필드랑 history 필드를 넣어주자. 더보기 const mongoose = require('mongoose'); const bcrypt = require('bcrypt'); const saltRounds = 10; const jwt ..
상품의 상세정보를 데이터베이스에서 가져오기 들어가기 전에 CheckBox 컴포넌트랑 RadioBox 컴포넌트에서 Collapse를 이용하는 부분이 있는데 여기서 dafaultActiveKey를 0으로 설정해서 처음 사이트를 들어갔을 때 패널이 접혀있도록 해주고 header도 이름에 맞춰서 바꿔주자. 그리고 카드 컴포넌트를 클릭했을 때 해당 상품의 id에 맞는 상세페이지로 갈 수 있도록 card 컴포넌트의 cover부분에 있는 imageSlider를 a태그로 감싸주자. const renderCards = Products.map((product, index) => { return ( ) }) LandingPage.js에 있는 renderCards 함수 부분이다. 빈 상품 상세 페이지 만들기 & Proudct detail page를 위한 Route 만..
검색 기능 만들기 #1 SearchFeature Component 만들기 Search 기능을 위한 UI 만들기 onChange Function 만들기 search Data를 부모 컴포넌트에 업데이트 하기 LandingPage/Sections/SearchFeature.js 파일을 만든 후에 LandingPage.js에 임포트 해오자. https://ant.design/components/input#inputsearch Input - Ant Design When Input is used in a Form.Item context, if the Form.Item has the id and options props defined then value, defaultValue, and id props of Input are autom..
라디오 박스 필터 만들기 라디오 박스 필터는 CheckBox 필터 만드는 과정과 거의 비슷하기 때문에 복습할 땐 CheckBox 필터 글을 보자. #1 RadioBox 리스트 데이터 만들기 Datas.js 더보기 const continents = [ { "_id": 1, "name": "Africa" }, { "_id": 2, "name": "Europe" }, { "_id": 3, "name": "Asia" }, { "_id": 4, "name": "North America" }, { "_id": 5, "name": "South America" }, { "_id": 6, "name": "Australia" }, { "_id": 7, "name": "Antarctica" } ] const price = [ { "_id": 0, ..
체크 박스 필터 만들기(2) 일단 중간에 강사님이 실수하신 부분이 있다. Product Model을 만들 때 continents도 넣어줬어야 됐는데 이걸 깜박하고 안넣으셨다고 한다. 그래서 필터링 된 continents들이 랜딩 페이지에 뜨질 않는다. Product Model 코드를 수정하고 파일들을 다시 업로드 해주자. server/models/Product.js 더보기 const mongoose = require('mongoose'); const Schema = mongoose.Schema; const productSchema = mongoose.Schema({ writer: { type: Schema.Types.ObjectId, ref: 'User' }, name: { type: String, maxlength: 50 }, d..
체크 박스 필터 만들기 CheckBox 리스트 만들기 & CheckBox를 위한 UI 만들기 continent 값들이 너무 많다보니까 LandingPage에 넣으면 코드가 너무 길어진다. LandingPage 폴더에서 Sections 폴더를 만들고 Datas.js 파일을 만들어서 continent 값들을 저장하여 따로 구현해주자. LandingPage/Sections/Datas.js 더보기 const continents = [ { "_id": 1, "name": "Africa" }, { "_id": 2, "name": "Europe" }, { "_id": 3, "name": "Asia" }, { "_id": 4, "name": "North America" }, { "_id": 5, "name": "South America" }..
더보기 버튼 만들기 SKIP이란? 어디서 부터 데이터를 가져오는지에 대한 위치 ex) 처음엔 0부터 시작. LIMIT이 6이라면 다음 번엔 0+6부터 LIMIT이란? 처음 데이터를 가져올 때 와 더보기 버튼을 눌러서 가져올 때 얼마나 많은 데이터를 한 번에 가져오는지 지정 더보기 버튼 onClick Function 구현 & SKIP과 LIMIT을 위한 STATE 구현 & Route 수정(1) & AXIOS 중복 코드 제거 및 loadMoreHandler function 구현(1) import axios from 'axios'; import React, { useEffect, useState } from 'react' import {Icon, Col, Row, Card, Carousel} from 'antd' import M..
이미지 슬라이더 만들기 이미지를 여러개 업로드 했을 때 LandingPage에서 자동으로 여러 개 업로드 했던 이미지들을 슬라이더처럼 보여주도록 구현하자. https://ant.design/components/carousel Carousel - Ant Design A carousel component. Scales with its container. When To Use When there is a group of content on the same level.When there is insufficient content space, it can be used to save space in the form of a revolving door.Commonly used for a group of pictures/car ant.de..