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

체크한 나라에 관한 (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,//하나이상의 이미지를 제출하기때문에 여러 이미지를 저장할 수 있..

업로드 페이지에 상품이미지를 끌어와서 등록하는 dropzone기능을 만들 것이다. 업로드는 여러개의 이미지를 한번에 업로드하는 것이 가능하도록 구현한다. 또한 올라온 이미지를 한번더 클릭하면 이미지가 목록에서 제외되도록 구현한다. 파일 업로드 기능 component 는 나중에 필요하다면 재사용하기 위해서 components>utils 폴더에 저장할 것이다. 먼저 utils>FileUpload.js파일을 만들어준다. import React from 'react' function FileUpload() { return ( ) } export default FileUpload UploadProductPage에 import 해준다. import FileUpload from '../../utils/FileUplo..

온라인 쇼핑몰 만들기는 boiler-plate부터 시작한다. 아래의 링크에서 다운받을 수 있다. https://github.com/jaewonhimnae/boilerplate-mern-stack jaewonhimnae/boilerplate-mern-stack Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - jaewonhimnae/boilerplate-mern-stack github.com 서버에서 npm install을 해주고 cd client 해서 client 쪽에도 npm install 을 해준다. 그다음 dev.js파일을 생성해준다.(config) 이 안에는 mongodb의 주소를 넣어주는데, 외부에 노출되지 않도록 .gitignor..