강의를 두세번 돌려봤는데요.
uploadProductPage.js에서 맨 하단에
<Form onSubmit={submitHandler}>
<Button type="submit">확인</Button>
이렇게 하셨는데요. 확인버튼에 onClick를 안해주셔도되는건가요? 실제로 테스트해보니까 저는 확인버튼을 누르면 아무 동작도 일어나지 않아요.
강사님 깃허브 코드 참고해봤는데 강사님꺼는
<Button onClick={onSubmit}>Submit</Button>;
이렇게 되어있네요.
똑같이 따라해봤는데요,
모든 값을 안넣어주고 확인을 누르면 alert는 잘 나오는데,
제대로 값을 넣어주고 확인을 넣어주면 400 에러가 나옵니다.
이 밖에도 server > models > Product.js 파일에서
continents: {
type: Number,
default: 1,
},
위의 코드도 이번 강의에서 찾아볼수없고, 강사님 깃허브 코드에는 있습니다. ㅠ 이번 강의에서 없는건 맞는건지 궁금합니다..
그리고 강의 코드와 제 코드를 아무리 비교해봐도 400에러 발생지를 못찾겠는데.. 도움좀 부탁드릴께요 ㅠㅠ
UploadProductPage.js
import React, { useState } from "react";
import { Typography, Button, Form, Input } from "antd";
import FileUpload from "../../utils/FileUpload";
import Axios from "axios";
const { TextArea } = Input;
const Continents = [
{ key: 1, value: "Africa" },
{ key: 2, value: "Europe" },
{ key: 3, value: "North America" },
{ key: 4, value: "South America" },
{ key: 5, value: "Australia" },
{ key: 6, value: "Australia" },
{ key: 1, value: "Antarctica" },
];
function UploadProductPage(props) {
const [Title, setTitle] = useState("");
const [Description, setDescription] = useState("");
const [Price, setPrice] = useState(0);
const [Continent, setContinent] = useState(1);
const [Images, setImages] = useState([]);
const titleChangeHandler = (event) => {
setTitle(event.currentTarget.value);
};
const descriptionChangeHandler = (event) => {
setDescription(event.currentTarget.value);
};
const priceChangeHandler = (event) => {
setPrice(event.currentTarget.value);
};
const continentChangeHandler = (event) => {
setContinent(event.currentTarget.value);
};
const updateImages = (newImages) => {
setImages(newImages);
};
const submitHandler = (event) => {
event.preventDefault();
if (!Title || !Description || !Price || !Continent || !Images) {
return alert("모든 값을 넣어주셔야 합니다.");
}
// 서버에 채운 값들을 request로 보낸다.
const body = {
// 로그인 된 사람의 ID
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 style={{ maxWidth: "700px", margin: "2rem auto" }}>
<div style={{ textAlign: "center", marginBottom: "2rem" }}>
<h2>여행 상품 업로드</h2>
</div>
<Form onSubmit={submitHandler}>
{/*Drop-Zone */}
<FileUpload refreshFunction={updateImages} />
<br />
<br />
<label>이름</label>
<Input onChange={titleChangeHandler} value={Title} />
<br />
<br />
<labe>설명</labe>
<TextArea onChange={descriptionChangeHandler} value={Description} />
<br />
<br />
<labe>가격($)</labe>
<Input type="number" onChange={priceChangeHandler} value={Price} />
<br />
<br />
<select onChange={continentChangeHandler} value={Continent}>
{Continents.map((item) => (
<option key={item.key} value={item.key}>
{item.value}
</option>
))}
</select>
<br />
<br />
<Button type="submit" onClick={submitHandler}>
확인
</Button>
</Form>
</div>
);
}
export default UploadProductPage;
routes>product.js
const express = require("express");
const router = express.Router();
const multer = require("multer");
const { Product } = require("../models/Product");
//=================================
// Product
//=================================
var storage = multer.diskStorage({
/* 어디에 파일이 저장되는지 */
destination: function (req, file, cb) {
cb(null, "uploads/");
},
/* 어떤 이름으로 파일을 저장할지 */
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`);
},
});
var upload = multer({ storage: storage }).single("file");
router.post("/image", (req, res) => {
// 가져온 이미지를 저장을 해주면 된다.
upload(req, res, (err) => {
if (err) {
return res.json({ success: false, err });
}
return res.json({
success: true,
filePath: res.req.file.path,
fileName: res.req.file.filename,
});
});
});
router.post("/", (req, res) => {
// UploadProductPage.js에서 받아온 정보들을 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 });
});
});
module.exports = router;
