미해결
따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
xhr.js:178 GET http://localhost:3000/api/users/auth 504 (Gateway Timeout)
계속 504에러가 떠서 온갖 검색을 다하여 따라해봐도 되지않았습니다. 그래서 새로 다운받아서 정말 한글자한글자 비교해가며 다시 해보았더니 사진이 잘 들어왔습니다! 다음것을 따라라치려고 vs코드로 돌아왔다가 다시한번 확인차 페이지를 봤더니 또다시 504에러가 뜹니다..! 분명히! 잘 됬는데 사진도 들어왔는데!! 꿈을 꾼건가요 제가?? 이게 되다가 안되는 경우도 있나요??? ㅠㅠ
GET http://localhost:3000/api/users/auth 504 (Gateway Timeout)
dispatchXhrRequest @ xhr.js:178
xhrAdapter @ xhr.js:12
dispatchRequest @ dispatchRequest.js:52
Promise.then (async)
request @ Axios.js:61
Axios.<computed> @ Axios.js:76
wrap @ bind.js:9
auth @ user_actions.js:31
(anonymous) @ auth.js:14
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
performSyncWorkOnRoot @ react-dom.development.js:21737
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
unbatchedUpdates @ react-dom.development.js:21909
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
./src/index.js @ index.js:20
__webpack_require__ @ bootstrap:784
fn @ bootstrap:150
1 @ serviceWorker.js:135
__webpack_require__ @ bootstrap:784
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1
createError.js:16 Uncaught (in promise) Error: Request failed with status code 504
at createError (createError.js:16:1)
at settle (settle.js:17:1)
at XMLHttpRequest.handleLoad (xhr.js:61:1)
콘솔창에 뜨는 빨간 에러 코드입니다. 사진을 올리기 전에도 계속해서 떠있습니다.!!! 분명히 이 에러가 없었는데 갑자기 떠서 원인을 더 모르겠습니다 !! ㅠㅠ
+동영상에서는 product.js파일에서 req.json이라고 되어있었는데 다른게시글을 보고 req.json을 res.json로 고쳐야한다는 것을 보고 고치고 새로 npm run dev를 했습니다. 그랬더니 이번엔
GET http://localhost:5000//var/folders/xr/kqrr20dn4yv307hpyc916qfr0000gn/T/2e37de435ad620ba0840cef7c263dd65 404 (Not Found)
이렇게 404에러가 뜹니다!
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 })
})
<FileUpload.js코드>
import React, { useState } from 'react';
import Dropzone from 'react-dropzone';
import { Icon } from 'antd'
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) {
setImages([...Images, response.data.filePath])
}else {
alert ('파일저장실패')
}
})
}
return (
<div style={{display: 'flex', justifyContent: 'space-between'}}>
<Dropzone onDrop={dropHandler}>
{({getRootProps, getInputProps}) => (
<div
style={{
width: 300, height: 240, border: '1px solid lightgray',
display: 'flex', alignItems: 'center', justifyContent: 'center'
}}
{...getRootProps()}>
<input {...getInputProps()} />
<Icon type='plus' style={{fontSize: '3rem'}} />
</div>
)}
</Dropzone>
<div style={{display: 'flex', width: '350px', height: '240px', overflowX: 'scroll' }}>
{Images.map((image, index) => (
<div>
<img style={{minWidth: '300px', height: '240px'}}
src={`http://localhost:5000/${image}`}
/>
</div>
))}
</div >
</div>
);
}
export default FileUpload;
<product.js코드>
const express = require('express');
const router = express.Router();
const multer = require('multer');
//=================================
// 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 req.json({ success: false, err })
}
return res.json({ success:true, filePath: res.req.file.path, fileName: res.req.file.filename })
})
})
module.exports = router;