본문 바로가기

react-shop-web/front & back

 (26)
카드 만들기 카드를 만들기 전에 틀을 조금 짜주자. 밑에 코드는 LandingPage.js의 return 부분이다. return ( Let's Travel Anywhere {/* Filter */} {/* Search */} 더보기 ) 카드 컴포넌트를 사용할 때 저런식으로 넣어주면 되지만, 여러 개를 사용할 경우 일일이 컴포넌트를 계속해서 추가해 줄 필요가 없다. 그래서 useState를 이용하여 서버로부터 받은 product들을 state로 저장해서 map함수를 이용하여 간결하게 코드를 구현해 줄 수 있다. 강의에서는 해당 구현 파트를 따로 함수로 구현해서 더욱 간결하게 코드를 구현했다. import axios from 'axios'; import React, { useEffect, useState } from '..
데이터베이스에 들어있는 모든 상품을 가져오기 import axios from 'axios'; import React, { useEffect } from 'react' function LandingPage() { useEffect(() => { // 원래라면 필터 기능을 위해 axios에 요청할 때 body 객체를 함께 보내주는데 현재 단계에선 모든 // 상품을 갖고오기 때문에 아직까진 필요없다. axios.post('/api/product/products') .then(response => { if(response.data.success){ console.log(response.data) }else { alert('상품들을 갖고오는데 실패') } }) }) return ( LandingPage ) } export default LandingPage..
모든 상품 정보를 데이터베이스에 저장하기 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..

티스토리툴바