이미지 로딩 오류(ERR_SSL_PROTOCOL_ERROR)

강의 처음부터 따라서 다시 작성하고 다른 분들의 글을 보면서 해결했습니다 참고한 글 : https://www.inflearn.com/questions/445195 Client - FileUpload.js import React, { useState } from "react"; import Dropzone from "react-dropzone"; import { PlusOutlined } from "@ant-design/icons"; import axios from "axios"; function FileUpload() { const [Images, setImages] = useState([]); const dropHandler = (files) => { let formData = new FormData(); const config = { header: { "content-type": "multipart/fomr-data" }, }; formData.append("file", files[0]); axios .post("/api/product/image", formData, config) .then((response) => { if (response.data.success) { console.log(response.data); setImages([...Images, response.data.filePath]); } else { alert("파일을 저장하는데 실패했습니다."); } }); }; return ( div style={{ display: "flex", justifyContent: "space-between" }}> Dropzone onDrop={dropHandler}> {({ getRootProps, getInputProps }) => ( section> div style={{ width: 300, height: 240, border: "1px solid lightgray", display: "flex", alignItems: "center", justifyContent: "center", }} {...getRootProps()} > input {...getInputProps()} /> PlusOutlined style={{ fontSize: "3rem", display: "flex", alignSelf: "center", }} /> div> section> )} Dropzone> div style={{ display: "flex", width: "350px", height: "240px", overflowX: "scroll", }} > {Images.map((image, index) => { return ( div key={index}> img style={{ minWidth: "300px", width: "300px", height: "240px" }} src={`http://localhost:5000/${image}`} /> div> ); })} div> div> ); } export default FileUpload; Server - index.js app.use("/api/product", require("./routes/product")); app.use("/uploads", express.static("uploads")); - routes/product const express = require("express"); const router = express.Router(); const multer = require("multer"); 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 req.json({ success: false, err }); } return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename, }); }); }); module.exports = router;

prop.history.push('/')가 작동이 안되시는 분들 참고하세요

감사합니다 덕분에 해결할 수 있었습니다. 저는 이런 식으로 고쳤습니다. import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { registerUser } from "../../../_action/user_action"; import { useNavigate } from "react-router-dom"; function RegisterPage(props) { const dispatch = useDispatch(); const navigate = useNavigate(); const [Email, setEmail] = useState(""); const [Name, setName] = useState(""); const [Password, setPassword] = useState(""); const [ConfirmPassword, setConfirmPassword] = useState(""); const onEmailHandler = (event) => { setEmail(event.currentTarget.value); }; const onNameHandler = (event) => { setName(event.currentTarget.value); }; const onPasswordHandler = (event) => { setPassword(event.currentTarget.value); }; const onConfirmPasswordHandler = (event) => { setConfirmPassword(event.currentTarget.value); }; const onSubmitHandler = (event) => { event.preventDefault(); if (Password !== ConfirmPassword) { return alert("비밀번호와 비밀번호 확인은 같아야 합니다."); } let body = { email: Email, password: Password, name: Name, }; dispatch(registerUser(body)).then((response) => { if (response.payload.success) { alert("회원가입이 완료되었습니다."); navigate("/login"); } else { alert("회원가입 중 오류가 발생했습니다."); } }); }; return ( Email Name Password Confirm Password 회원 가입 ); } export default RegisterPage;