[쇼핑몰 사이트 만들기] #1-3. DB와의 데이터 주고 받기

이번 글에서는 파일 업로드 페이지에서 작성했던 데이터들을 DB에 올려보도록 한다.

목차

1. Product Model 제작
2. Upload File Component 가져오기
3. uploadFile 컴포넌트로 업데이트
4. onSubmit Function 구현
5. product router 추가

🆕 1. Product Model 제작

server/model/Product.js 제작

const { Schema } = require("mongoose");
const mongoose = require("mongoose");

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,
      default: 0,
    },
    views: {
      type: Number,
      default: 0,
    },
  },
  { timestamps: true }
);

const Product = mongoose.model("Product", productSchema);

module.exports = { Product };

업로드 페이지에서 넘겨줄 데이터를 DB에 저장할 수 있도록 데이터에 대한 타입 등을 정의해주는 model을 작성해준다.

2. 👍 Upload File Component 가져오기

앞서 refreshFunction을 통해 이미 해주었다!🔥

3. 👍 uploadFile 컴포넌트로 업데이트

앞서 props로 넘겨주었다!🔥

4. 🔧 onSubmit Function 구현

버튼을 눌러 데이터가 submit 되었을 때 작동할 onSubmit Function 기능을 구현해준다.

client/components/views/UploadProductPage/UploadProductPage.js 수정

function UploadProductPage(props) {

  const submitHandler = (event) => {
    event.preventDefault();

    if (!Title || !Description || !Price || !Continent || !Images) {
      return alert("모든 값을 넣어주셔야 합니다.");
    }

    const body = {
      writer: props.user.userData._id,
      title: Title,
      description: Description,
      price: Price,
      images: Images,
      continents: Continents,
    };

    axios.post("/api/product", body).then((response) => {
      if (response.data.success) {
        alert("상품 업로드에 성공했습니다.");
        props.history.push("/");
      } else {
        alert("상품 업로드에 실패했습니다.");
      }
    });

    return (
      <div>
      <form onSubmit={submitHandler}>
      //...
         <Button type="submit">확인</Button>
      </form>
      </div>
    )
  };

간단한 유효성 체크를 위해 칸이 비어있지는 않은지 조건문으로 한번 체크해준 뒤 다 채워져있다면 채운 값들을 서버에 request로 보내준다.
여기서 writer는 로그인 된 사람의 ID 이므로 props로 받아와서 함께 DB에 넘겨준다.

🆕 5. product router 추가

server/routes/product.js 수정

const { Product } = require("../models/Product");

router.post("/", (req, res) => {
  //받아온 정보들을 DB에 넣어준다.
  const product = new Product(req.body);

  product.save((err) => {
    if (err) return res.status(400).json({ success: false, err });
    return res.status(200).json({ success: true });
  });
});

router를 추가해서 받아온 정보들을 DB에 넣어준다.🔥

🥲 문제

antD 에서 제공하는 Form을 사용하니 onSubmit 이벤트를 아예 감지하지 못하는 문제가 발생했다.
공식 문서를 살펴보니 antD에서는 onSubmit이 아닌 onFinish로 바뀌었다고 한다. 그런데 수정해주어도 submit 이벤트를 감지를 못해서 우선은 기능 구현을 위해 벗겨두었다.. 추후에 다시 볼 예정!😇

➕ 참고

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기 를 공부하며 작성한 글입니다.