에러가 발생합니다..ㅜ

아 드디어 해결했습니다. ㅜㅜ 저 빨간 부분에 imageUrl 앞에 ! 가 없어서 안됐던거였어요 ㅠㅠㅠㅠ 그랩님 답변보면서 다시 천천히 보다가 발견했어요ㅠㅠ 저기에 ! 붙히니까 return을 붙혀도 안붙혀도 다 정상 실행이 되더라구요!!! 그동안 많은 질문에 답변 달아주셔서 감사합니다!! 아마 강의 끝날때 까지 질문 올릴거 같아요 ㅎ.ㅎ.. app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller, imageUrl } = body; if (!name || !description || !price || !seller || !imageUrl) { res.status(400).send("모든필드를 입력해주세요."); } models.Product.create({ description, price, seller, imageUrl, name }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.status(400).send("상품 업로드에 문제가 발생했습니다."); }); });

에러가 발생합니다..ㅜ

post '/products' 로직에 return을 붙여서 다시 해봤는데 아래같이 에러가 떠요.. 밑에 소스코드 return부분 맞게 썼는지좀 봐주세요.. ! 그리고 return을 붙혔을 때 메인화면이랑 데이터베이스에 업로드 됐던것도 안돼요.. (사진) const express = require("express"); const cors = require("cors"); const app = express(); const models = require("./models"); const multer = require("multer"); const upload = multer({ storage: multer.diskStorage({ destination: function (req, file, cb) { cb(null, "uploads/"); }, filename: function (req, file, cb) { cb(null, file.originalname); }, }), }); const port = 8080; app.use(express.json()); app.use(cors()); app.use("/uploads", express.static("uploads")); app.get("/products", (req, res) => { models.Product.findAll({ order: [["createdAt", "DESC"]], attributes: ["id", "name", "price", "createdAt", "seller", "imageUrl"], }) .then((result) => { console.log("PRODUCTS: ", result); res.send({ products: result, }); }) .catch((error) => { console.error(error); res.status(400).send("에러 발생"); }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller, imageUrl } = body; if (!name || !description || !price || !seller || imageUrl) { return res.status(400).send("모든필드를 입력해주세요."); } models.Product.create({ description, price, seller, imageUrl, name }) .then((result) => { console.log("상품 생성 결과 : ", result); return res.send({ result, }); }) .catch((error) => { console.error(error); return res.status(400).send("상품 업로드에 문제가 발생했습니다."); }); }); app.get("/products/:id", (req, res) => { const params = req.params; const { id } = params; models.Product.findOne({ where: { id: id, }, }) .then((result) => { console.log("PRODUCTS :", result); res.send({ product: result, }); }) .catch((error) => { console.error(error); return res.status(400).send("상품 조회에 에러가 발생했습니다."); }); }); app.post("/image", upload.single("image"), (req, res) => { const file = req.file; console.log(file); res.send({ imageUrl: file.path, }); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공!"); }) .catch((error) => { console.error(err); console.log("DB 연결 에러"); process.exit(); }); });

에러가 발생합니다..ㅜ

네 upload 소스코드입니다.! import { Form, Divider, Input, InputNumber, Button, Upload, message, } from "antd"; import "./index.css"; import { ForkOutlined } from "@ant-design/icons"; import { useState } from "react"; import { API_URL } from "../config/constants.js"; import axios from "axios"; import { useHistory } from "react-router-dom"; function UploadPage() { const [imageUrl, setImageUrl] = useState(null); const history = useHistory(); const onSubmit = (values) => { axios .post(`${API_URL}/products`, { name: values.name, description: values.description, seller: values.seller, price: parseInt(values.price), imageUrl: imageUrl, }) .then((result) => { console.log(result); history.replace("/"); }) .catch((error) => { console.error(error); message.error(`에러가 발생했습니다.${error.message}`); }); }; const onChangeImage = (info) => { if (info.file.status === "uploading") { return; } if (info.file.status === "done") { const response = info.file.response; const imageUrl = response.imageUrl; setImageUrl(imageUrl); } }; return ( div id="upload-container"> Form name="상품 업로드" onFinish={onSubmit}> Form.Item name="upload" label={div className="upload-label">상품 사진div>} > Upload name="image" action={`${API_URL}/image`} listType="picture" showUploadList={false} onChange={onChangeImage} > {imageUrl ? ( img id="upload-img" src={`${API_URL}/${imageUrl}`} /> ) : ( div id="upload-img-placeholder"> img src="/images/icons/camera.png" /> span>이미지를 업로드해주세요.span> div> )} Upload> Form.Item> Divider /> Form.Item label={div className="upload-label">판매자 명div>} name="seller" rules={[{ required: true, message: "판매자 이름을 입력해주세요" }]} > Input className="upload-name" size="large" placeholder="이름을 입력해주세요." /> Form.Item> Divider /> Form.Item name="name" label={div className="upload-label">상품 이름div>} rules={[{ required: true, message: "상품 이름을 입력해주세요." }]} > Input className="upload-name" size="large" placeholder="상품 정보를 입력해주세요." /> Form.Item> Divider /> Form.Item name="price" label={div className="upload-label">상품 가격div>} rules={[{ required: true, message: "상품 가격을 입력해주세요" }]} > InputNumber defaultValue={0} className="upload-price" size="large" /> Form.Item> Divider /> Form.Item name="description" label={div className="upload-label">상품 소개div>} rules={[{ required: true, message: "상품 소개를 입력해주세요." }]} > Input.TextArea size="large" id="product-description" showCount maxLength={300} placeholder="상품 소개를 적어주세요." /> Form.Item> Form.Item> Button id="submit-button" size="large" htmlType="submit"> 문제 등록하기 Button> Form.Item> Form> div> ); } export default UploadPage;

에러가 발생합니다..ㅜ

client 소스코드가 main - index.js 코드 맞나요?? import React from "react"; import "./index.css"; import axios from "axios"; import { Link } from "react-router-dom"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import { API_URL } from "../config/constants.js"; dayjs.extend(relativeTime); function MainPage() { const [products, setProducts] = React.useState([]); React.useEffect(function () { axios .get(`${API_URL}/products`) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) { console.error("에러발생 : ", error); }); }, []); return ( div> div id="banner"> img src="images/banners/banner1.png" /> div> h1 id="product-headline">판매되는 상품들h1> div id="product-list"> {products.map(function (product, index) { return ( div className="product-card"> Link className="product-link" to={`/products/${product.id}`}> div> img className="product-img" src={`${API_URL}/${product.imageUrl}`} /> div> div className="product-contents"> span calssName="product-name">{product.name}span> span calssName="product-price">{product.price}원span> div className="product-footer"> div calssName="product-seller"> img className="product-avatar" src="images/icons/avatar.png" /> span>{product.seller}span> div> span calssName="product-date"> {dayjs(product.createdAt).fromNow()} span> div> div> Link> div> ); })} div> div> ); } export default MainPage;

에러가 발생합니다..ㅜ

상품등록하면 브라우저랑 데이터베이스에 정상적으로 업로드는 됩니다. 등록 후 에 자동으로 메인페이지로 돌아가는것만 안되고 있어요 ㅠ

질문있습니다.

server.js 소스 코드 입니다~! const express = require("express"); const cors = require("cors"); const app = express(); const models = require("./models"); const port = 8080; app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { models.Product.findAll() .then((result) => { console.log("PRODUCTS: ", result); res.send({ products: result, }); }) .catch((error) => { console.error(error); res.send("에러 발생"); }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; if (!name || !description || !price || !seller) { res.send("모든필드를 입력해주세요."); } models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 발생했습니다."); }); }); app.get("/products/:id", (req, res) => { const params = req.params; const { id } = params; models.Product.findOne({ vhere: { id: id, }, }) .then((result) => { console.log("PRODUCTS :", result); res.send({ product: result, }); }) .catch((error) => { console.error(error); res.send("상품 조회에 에러가 발생했습니다."); }); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공!"); }) .catch((error) => { console.error(err); console.log("DB 연결 에러"); process.exit(); }); }); 그리고 postman에서 id를 10으로 했을 때( http://localhost:8080/products/10 ) 아래 사진처럼 응답이 나옵니다. (사진)

질문있습니다.

id 에 다른 값을 넣어도 내용이 변하질 않고 계속 키보드에 대한 내용만 나와요.. 그리고 DB목록에 내용이 많아졌는데 삭제를 해도 될까요??? (사진)

postman에서 결과가 제대로 나오지 않습니다.

또 질문 있습니다.!상품정보를 덜 입력했을 때 '모든 필드를 입력해주세요.' 라는 문구가 떠야하는데 아래 사진처럼 코드로 뜹니다. (사진) 서버실행 했을 때 코드는 이렇게 뜨는데... 어느부분이 잘못된 걸 까요..ㅜㅜ (사진)

postman에서 결과가 제대로 나오지 않습니다.

서버실행 할 때 로그에요! (사진)

오류 확인좀 해주세요.

헉 대문자.. 생각지도 못했네요ㅜㅜ 해결했어요 감사합니다!