합니다, 개발공부📝 합니다, 개발공부📝

장바구니 페이지를 만들 것이다. 여기서 user컬렉션에는 cart quantity 정보가 있지만 product collection에는 quantity정보가 없다. 그래서 둘의 컬렉션을 종합해서 fetch하고 사용해서 정보를 나타내야 한다. 제일먼저 카트 페이지를 만들어준다. views>CartPage>CartPage.js import React from 'react' function CartPage() { return ( ) } export default CartPage App.js에 가서 route 추가해준다. 로그인 한사람만 자신의 장바구니 볼 수 있게 true로 바꿔준다. import CartPage from './views/CartPage/CartPage'; header부분에 장바구니모양을 추가해..

이번에는 상품 디테일 페이지에서 장바구니에 상품을 담을 수 있는 add to cart 기능을 만든다. cart는 로그인된 유저에 한해서 하나의 장바구니 만을 가질 수 있다. (user 모델에 cart가 존재(카트가 사용자에게 속하므로)) 우리는 이를 구현할 때 리덕스를 이용해서 사용자 정보를 관리하는 식으로 진행한다. 또한 장바구니에 담기를 클릭했을때 이미 장바구니에 존재하는 상품이라면 장바구니 아이콘 위의 수는 변함이없지만 장바구니에 들어가면 상품의 갯수가 증가하는 식으로 진행한다. user모델에 cart 정보를 넣어주자. 추가로 나중에 사용할 history 정보도 넣어주자.(본 제품들 기록할 것) const userSchema = mongoose.Schema({ name: { type: String,..

상품에 대한 디테일 정보를 나타내는 페이지를 만들 것이다. 상품 사진란과 설명을 하는 란 2가지로 나위어서 진행한다. views>DetailProductPage>DetailProductPage.js파일을 만든다. import React from 'react' function DetailProductPage() { return ( ) } export default DetailProductPage 우선 app.js에 route를 만들어준다. import DetailProductPage from './views/DetailProductPage/DetailProductPage'; //아무나 상세페이지 확인 가능하도록 null로 만들어준다. 우리는 이미 랜딩페이지에서 카드를 누르면 다음의 링크로 (productI..

검색해서 상품을 찾는 기능을 만든다. searchFeature 컴포넌트를 먼저 만든다. src>components>views>LandingPage>Sections>SearchFeature.js파일을 만든다. import React from 'react' function SearchFeature() { return ( ) } export default SearchFeature 랜딩페이지에 포함시켜준다. import SearchFeature from './Sections/SearchFeature'; {/* Search */} antd를 이용해서 템플릿을 만들어준다. import React, { useState } from 'react' import { Input } from 'antd'; const { Se..

체크한 나라에 관한 (continents) 자료들만 로드되도록 한다. checkbox에 관한 내용들은 sections폴더안에 따로 생성한다. src>components>views>LandingPage>Sections>CheckBox.js파일을 생성한다. import React from 'react' import { Checkbox, Collapse } from 'antd'; const continents = [ { "_id": 1, "name": "Africa" }, { "_id": 2, "name": "Europe" }, { "_id": 3, "name": "Asia" }, { "_id": 4, "name": "North America" }, { "_id": 5, "name": "South Americ..

loadmore 버튼을 만들고 몇가지 특징을 더해주자. 여기서 skip은 우리가 가져온 데이터 다음 순서부터 limit개의 데이터를 가져와서 로드해줘야 한다는 뜻이다. 먼저 loadmore 기능을 구현한다. 여기서 skip과 limit의 state이 필요하다(어디서부터 어디까지 몇개의 데이터를 로드해줄지 나타내야 하기 때문에) const [Skip, setSkip] = useState(0) const [Limit, setLimit] = useState(8) const onLoadMore = () => { let skip = Skip + Limit; const variables = { skip: skip, limit: Limit, loadMore: true, filters: Filters, searchTe..

이제 홈페이지를 들어오면 가장 먼저 이동하는 landing page를 만들 것이다. 먼저랜딩페이지에서 상품리스트를 가져와야 보여줄 수 있다. import React, {useEffect} from 'react' import { FaCode } from "react-icons/fa"; import Axios from 'axios'; function LandingPage() { useEffect(() => { //먼저 상품리스트를 가져와야 랜딩페이지에 나타낼 수 있다. Axios.post('/api/product/getProducts') .then(response=>{ if(response.data.success){ }else{ alert('상품리스트를 가져오는데 실패했습니다.') } }) }, []) re..

업로드 페이지에 제출 기능을 만들어서 페이지를 완성하자. 먼저 프로덕트 모델을 만들자. models>product.js파일을 만들어준다. const mongoose = require('mongoose'); const Schema = mongoose.Schema; const productSchema = mongoose.Schema({ writer: { type: Schema.Types.ObjectId, ref:'User' }, title: { type: String, maxlength:50 }, description:{ type:String }, price:{ type:Number, default:0 }, images:{ type:Array,//하나이상의 이미지를 제출하기때문에 여러 이미지를 저장할 수 있..