본문 바로가기

WEB

(60)
모든 상품 정보를 데이터베이스에 저장하기 Product Model 만들기 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, default:[] }, sold: { type: Number, maxlength: 100, ..
이미지 지우기 & 이미지 State를 부모 컴포넌트로 업데이트 하기 이미지 지우기 dropzone 오른쪽에 이미지들이 표시됐을 때 특정 이미지를 클릭하면 삭제 되도록 구현한다. 이때 삭제하는 방법은 이미지 변수들의 인덱스를 이용한다. 일단 이미지를 클릭했을 때 이벤트가 발생해야되므로 div태그에 onClick 이벤트를 넣어주자. deleteHandler에서 위의 코드처럼 indexOf를 사용하면 특정 이미지를 클릭했을 때 해당 이미지의 인덱스 값을 받아올 수 있다. 이미지 삭제를 구현할 때 먼저 Images state를 모두 복사해와서 이 배열의 splice 함수를 이용하여 클릭해서 얻은 이미지 인덱스 값을 제거한다. const deleteHandler = (image) => { const currentIndex = Images.indexOf(image); let new..
multer를 이용하여 이미지 저장 https://www.npmjs.com/package/multer multer Middleware for handling `multipart/form-data`.. Latest version: 1.4.5-lts.1, last published: 8 months ago. Start using multer in your project by running `npm i multer`. There are 3566 other projects in the npm registry using multer. www.npmjs.com muter npm 페이지에 나와있는 다음 코드를 product.js 파일에 갖고오자. const storage = multer.diskStorage({ destination: function ..
이미지 파일을 서버로 보내기 이 게시글에선 dropzone을 통해 파일을 올리면 그 파일을 백엔드에서 multer라는 라이브러리를 이용해서 저장해주고, 그 저장해준 파일의 정보를 프론트로 갖고 올 것이다. onDrop Function 만들기 import React from 'react' import Dropzone from 'react-dropzone' import {Icon} from 'antd' import axios from 'axios' function FileUpload() { const dropHandler = (files) => { let formData = new FormData(); const config = { header: {'content-type': 'multierpart/form-data'} } formDa..
Drop-Zone 적용하기 Drop-Zone을 구현할 때 코드가 매우 길기도하고 이 기능을 다른 페이지에서도 사용할 수 있다. 그래서 이 부분을 다른 곳에 컴포넌트로 만들어 놓은 다음 필요한 곳에서 가져다 쓸 수 있게 구현하자. Utils 폴더 안에 파일 업로드 파일 만들기 components 폴더에 utils라는 폴더 하나를 만들어주자. 여기에 들어가는 파일들은 한 곳에서만 쓰이는게 아니라, 여러 페이지에서 쓸 수 있는 페이지를 넣어준다. utils 폴더 안에 FileUpload.js 파일을 만들어주자. 그리고 만든 FileUpload 파일을 UploadProudctPage로 갖고오자. Drop-Zone 라이브러리 다운받기 다음으로 client경로에서 dropzone 라이브러리를 다운로드 받아주자. File 업로드 컴포넌트를 위..
Select Option 처리하기 import React, { useState } from 'react' import {Typography, Button, Form, Input} from 'antd'; const { Title } = Typography; const { TextArea } = Input; const Continents = [ { key: 1, value: "Africa" }, { key: 2, value: "Europe" }, { key: 3, value: "Asia" }, { key: 4, value: "North America" }, { key: 5, value: "South America" }, { key: 6, value: "Australia" }, { key: 7, value: "Antarctica" } ] fu..
업로드 페이지 만들기 업로드 페이지 만들기 시작 비어있는 업로드 페이지 생성 components 폴더에 UploadProductPage 폴더를 만들고 안에 UploadProductPage.js 파일을 만들어주자. 업로드 페이지 Route 만들기 import React, { Suspense } from 'react'; import { Route, Switch } from "react-router-dom"; import Auth from "../hoc/auth"; // pages for this product import LandingPage from "./views/LandingPage/LandingPage.js"; import LoginPage from "./views/LoginPage/LoginPage.js"; import..
git clone code 새로운 react-shop-web project를 만들 깃허브 레포지터리를 만들고, 시작하기 전에 존안 강사님의 boilerPlate 코드를 갖고오자. https://github.com/jaewonhimnae/boilerplate-mern-stack GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX Boilerplate when you use REACT JS, MONG DB, EXPRESS JS, REDUX - GitHub - jaewonhimnae/boilerplate-mern-stack: Boilerplate when you use REACT JS, MONG ..