33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
multer관련 질문입니다.
안녕하세요. 강의 진행 중 질문있어 남깁니다.! 1. //파일 보내기 const dropHandler = (files) => { let formData = new FormData(); const config = { header: { "content-type": "multipart/form-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]); //원래 있던것을 넣고(spread문법) -> 이후 새로운 것을 추가. } else { alert("파일을 저장하는데 실패했습니다."); } }); }; 위 코드에서 fromData객체는 ajax통신에서 사용하는 keyvalue값을 갖는 formData인것인가요? 그렇다면append()코드로 인해서, file이 key, files[0]이 value인것인가요? 2. multer과 관련하여 공식문서를 읽어보니 아래 주석과 같이 .single을 설명하였습니다. .single(fieldname) fieldname 인자에 명시된 이름의 단수 파일을 전달 받습니다. 이 파일은 req.file 에 저장될 것 입니다 */ const upload = multer({ storage: storage }).single("file"); 저 단수 파일 이름을 전달 받는다는 의미를 잘 모르겠습니다. 어째서("file")이라고 주신거죠?? multer와 single함수의 이용을 잘 모르겠습니다 ㅠ 3. 2번 직후에 실행되는 코드입니다. 아래 코드가 이해가 가질않습니다 ㅠ router.post("/image", (req, res) => { //가져온 이미지를 저장해준다. upload(req, res, (err) => { if (err) { return req.json({ success: false, err }); //이부분은 req.json이 맞나요 ? } return res.json({ success: true, filePath: res.req.file.path, fileName: res.req.file.filename, }); }); }); post입력을 받는다 -> 콜백을 실행 -> upload()실행 ? ->upload는 어떤 행위를 하는 코드인가요? 제가 이해한 흐름은 2번의 multer()함수는 파일이 어디로 업로드 될 지 알려주는 코드이고, storage를 통해 파일에 대한 정보를 갖는다. -> 따라서 post작업을 보낸 후, 콜백으로 실행된 upload함수로 인해 앞서 말한 파일 정보를 res으로 받는다.(이때 .single()로 인해 req.body안에 정보가 담겨온다.) -> 따라서 res.req.file.****을 사용 하는데, 이 ****은 아래 api에 나타나있는 파일 정보에 해당하는 부분이다. 이 흐름이 맞을까요?? 4. 왜인지 모르겠지만 저는 이미지 업로드를 콘솔창에 찍어볼 경우 아래처럼 path가 나옵니다. 상관없을까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
TypeError: Images.map is not a function 업로드 파일저장완료후 웹에 보여지는 부분 오류가 나옵니다.
TypeError: Images.map is not a function FileUpload src/components/utils/FileUpload.js:42 39 | </div> 40 | )} 41 | </Dropzone>> 42 | <div style={{ display: 'flex', width: '350px', height: '240px', overflowX: 'scroll'}}> | ^ 43 | {Images.map((image, index) => ( 44 | <div key={index}> 45 | <img style={{ minWidth:'300px', width:'300px', height: '240px'}}View compiled ▶ 17 stack frames were collapsed. (anonymous function) src/components/utils/FileUpload.js:20 17 | .then(response => { 18 | if(response.data.success) { 19 | console.log(response.data);> 20 | setImages(...Images, response.data.filePath) | ^ 21 | } else { 22 | alert('파일을 저장하는데 실패했습니다.'); 23 | }View compiled This screen is visible only in development. It will not appear if the app crashes in production. 파일업로드 후 웹에 보여지는 부분이 오류가 납니다. 몇시간째 원본코리 비교 중인데요.. Images.map. <== type 오류가 나네요.. 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) { console.log(response.data); 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 key={index}> <img style={{ minWidth:'300px', width:'300px', height: '240px'}} src={`http://localhost:5001/${image}`} /> </div> ))} </div> </div> ) } export default FileUpload 소스코드는 이상없는거 같은데 오류가 나네요.. {success: true, filePath: 'uploads/1644901338521_스크린샷 2022-02-15 오후 1.49.37.png', fileName: '1644901338521_스크린샷 2022-02-15 오후 1.49.37.png'} FileUpload.js:42 Uncaught TypeError: Images.map is not a function at FileUpload (FileUpload.js:42:1) at renderWithHooks (react-dom.development.js:14803:1) at updateFunctionComponent (react-dom.development.js:17034:1) at beginWork (react-dom.development.js:18610:1) at HTMLUnknownElement.callCallback (react-dom.development.js:188:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1) at invokeGuardedCallback (react-dom.development.js:292:1) at beginWork$1 (react-dom.development.js:23203:1) at performUnitOfWork (react-dom.development.js:22154:1) at workLoopSync (react-dom.development.js:22130:1) at performSyncWorkOnRoot (react-dom.development.js:21756:1) at react-dom.development.js:11089:1 at unstable_runWithPriority (scheduler.development.js:653:1) at runWithPriority$1 (react-dom.development.js:11039:1) at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1) at flushSyncCallbackQueue (react-dom.development.js:11072:1) at scheduleUpdateOnFiber (react-dom.development.js:21199:1) at dispatchAction (react-dom.development.js:15660:1) at FileUpload.js:20:1
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
MongoDB에서
MongoDB에서 M0 SandBox가 없어요...그래서 강의를 따라 만들고 싶은데 어떻게 해야하나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Failed to load resource: the server responded with a status of 404 (Not Found) (파일업로드시 오류)
파일업로드 하면 오류가 발생합니다. Failed to load resource: the server responded with a status of 404 (Not Found) createError.js:16 Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) 콘솔창에 위와 같이 나옵니다. 서버포트 5000번이 맥에서 안되서 5001포트 사용하였고 클라이언트는 3000번포트 프록시 문제인가요? 아니면 경로 문제인가요? 둘다 확인했는데 로그인 정상으로 되고 업로드에서만 문제가 발생합니다. 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]); console.log("1111"); 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()}/> <Icon type = "plus" style={{ fontSize:'3rem'}} /> </div> </section> )} </Dropzone> <div style={{ display: 'flex', width: '350px', height: '240px', overflowX: 'scroll'}}> {Images.map((image, index) => ( <div key={index}> <img style={{ minWidth:'300px', width:'300px', height: '240px'}} src={`http://localhost:5001/${image}`} /> </div> ))} </div> </div> ) } export default FileUpload index.js app.use('/api/users', require('./routes/users')); app.post('/api/product', require('./routes/product')); 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;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
upload 할때 국가를 africa 말고 다른 국가로 선택할때 오류
업로드 할때 Africa 이외에 나라를 선택하면 저런 오류가 발생하면서 업로드가 안됩니다. 뜬금 없는 강의에서 질문하는 거지만 앞전 강의에서는 업로드가 잘되었는데 product.js 코드를 바꾼 후 이런 오류가 나는 것 같아 질문드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
skip limit 질문
제코드는 이런데요 화면에 limit 8이 안걸리고 계속 출력되는데 해결방법이 있을까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm install 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Boiler Plate 가져올 때 npm install 에서 오류있습니다. 혹시 해결방법을 알 수 있을까요? PS E:\React_Git\boilerplate-mern-stack> node -v v12.18.3 PS E:\React_Git\boilerplate-mern-stack> python -v Python PS E:\React_Git\boilerplate-mern-stack> npm install > bcrypt@3.0.8 install E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt > node-pre-gyp install --fallback-to-build node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Pre-built binaries not installable for bcrypt@3.0.8 and node@12.18.3 (node-v72 ABI, unknown) (falling back to source compile with node-gyp) node-pre-gyp WARN Hit error Remote end closed socket abruptly. gyp ERR! find Python gyp ERR! find Python Python is not set from command line or npm configuration gyp ERR! find Python Python is not set from environment variable PYTHON gyp ERR! find Python checking if "python" can be used gyp ERR! find Python - "python" is not in PATH or produced an error gyp ERR! find Python checking if "python2" can be used gyp ERR! find Python - "python2" is not in PATH or produced an error gyp ERR! find Python checking if "python3" can be used gyp ERR! find Python - "python3" is not in PATH or produced an error gyp ERR! find Python checking if the py launcher can be used to find Python 2 gyp ERR! find Python - "py.exe" is not in PATH or produced an error gyp ERR! find Python checking if Python is C:\Python27\python.exe gyp ERR! find Python - "C:\Python27\python.exe" could not be run gyp ERR! find Python checking if Python is C:\Python37\python.exe gyp ERR! find Python - "C:\Python37\python.exe" could not be run gyp ERR! find Python gyp ERR! find Python ********************************************************** gyp ERR! find Python You need to install the latest version of Python. gyp ERR! find Python Node-gyp should be able to find and use Python. If not, gyp ERR! find Python you can try one of the following options: gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe" gyp ERR! find Python (accepted by both node-gyp and npm) gyp ERR! find Python - Set the environment variable PYTHON gyp ERR! find Python - Set the npm configuration variable python: gyp ERR! find Python npm config set python "C:\Path\To\python.exe" gyp ERR! find Python For more information consult the documentation at: gyp ERR! find Python https://github.com/nodejs/node-gyp#installation gyp ERR! find Python ********************************************************** gyp ERR! find Python gyp ERR! configure error gyp ERR! stack Error: Could not find any Python installation to use gyp ERR! stack at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:307:47) gyp ERR! stack at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:136:21) gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:225:16) gyp ERR! stack at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:271:16) gyp ERR! stack at exithandler (child_process.js:310:5) gyp ERR! stack at ChildProcess.errorhandler (child_process.js:322:5) gyp ERR! stack at ChildProcess.emit (events.js:315:20) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:273:12) gyp ERR! stack at onErrorNT (internal/child_process.js:469:16) gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:84:21) gyp ERR! System Windows_NT 10.0.19042 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=E:\\React_Git\\boilerplate-mern-stack\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=E:\\React_Git\\boilerplate-mern-stack\\node_modules\\bcrypt\\lib\\binding" "--napi_version=6" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v72" gyp ERR! cwd E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt gyp ERR! node -v v12.18.3 gyp ERR! node-gyp -v v5.1.0 gyp ERR! not ok node-pre-gyp ERR! build error node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt\lib\binding --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (E:\React_Git\boilerplate-mern-stack\node_modules\node-pre-gyp\lib\util\compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (events.js:315:20) node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1021:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5) node-pre-gyp ERR! System Windows_NT 10.0.19042 node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "E:\\React_Git\\boilerplate-mern-stack\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt node-pre-gyp ERR! node -v v12.18.3 node-pre-gyp ERR! node-pre-gyp -v v0.14.0 node-pre-gyp ERR! not ok Failed to execute 'C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=E:\React_Git\boilerplate-mern-stack\node_modules\bcrypt\lib\binding --napi_version=6 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v72' (1) npm WARN react-redux@5.1.2 requires a peer of react@^0.14.0 || ^15.0.0-0 || ^16.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-redux@5.1.2 requires a peer of redux@^2.0.0 || ^3.0.0 || ^4.0.0-0 but none is installed. You must install peer dependencies yourself. npm WARN react-boiler-plate@1.0.0 No repository field. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bcrypt@3.0.8 install: `node-pre-gyp install --fallback-to-build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bcrypt@3.0.8 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\woong\AppData\Roaming\npm-cache\_logs\2022-02-07T04_24_25_876Z-debug.log
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
궁금한 것이 있는데 관리자 페이지도 배우나요?
개인 쇼핑몰을 만들고 싶은 학생입니다. 유저들이 들어가 쇼핑몰 페이지, 관리자만 볼 수 있는 페이지를 만들어서 패션 쇼핑몰을 만들고 싶은데요 여기서 배울 수 있는 건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
axios.post(
import axios from "axios"; import React, { useEffect } from "react"; function LandingPage() { useEffect(() => { axios.post("/api/product/products"); }, []); return <div>LandingPage</div>; } export default LandingPage; 랜딩페이지에 axios.post("/api/product/products"); 를 추가 한후 밑에 에러가 계속 뜹니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
sign up 회원가입 문제
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
sing up 회원가입이 안되요
에러코드 입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
AddToCart
회원가입, 로그인 등 DB와 연결된 다른 기능들은 제대로 작동하나 AddToCart 버튼 클릭 시 dedux devTools과 mongodb에 들어가서 확인했을 때 cart에 아무값도 담기지 않습니다,, 오류가 뜨는 부분도 없습니다. 다만 가끔 프로젝트 저장 시 [HPM] Error occurred while trying to proxy request /api/users/addToCart from localhost:3000 to http://localhost:5000 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors) 해당 에러가 뜹니다.. 원인이 뭔지 알 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
let newImages 및 splice() 질문 + 삭제질문
선생님 안녕하세요, new images에 질문이 있습니다~ 1. let newImages = [...images]; newImages.splice(currentIdx, 1); setImages(newImages); 선생님이 써 주신 상단의 원래코드에서 let newImages = [...images].splice(currentIdx, 1); setImages(newImages); 이렇게 줄일 수 있지 않을까 싶어 저렇게 코드를 짰더니반대로 클릭한 것만 남고 나머지가 사라지더라구요. 찾아보니까 splice()를 하면 삭제한 값이 return되는 것 같은데, 리턴한 값으로(=즉 내가 클릭한 인덱스) images가 새롭게 정의되어서 그런게 맞나요??? 그렇다면 원래 코드와의 차이는 미리 선언을 하고 이후에 splice()를 하느냐 아니냐인 것인데, 선언을 먼저한 배열은 리턴 값이 아닌, 이미 선언되었던 배열이라 splice로 삭제된 값만 남고, 리턴 값은 그대로 리턴이 되는건가요?.. 정리하자면 1. 배열 선언 먼저 -> 선언된 배열에서 splice함 -> 삭제한 idx제외하고 배열에 남음 -> 배열은 배열대로 남아있고 삭제한 값은 리턴으로 출력할수잇음(?) 2. 배열 선언과 splice 동시 -> 배열을 splice한 return값이 배열로 선언됨 -> 나머지값은 그냥 없어짐(?).. 이게 맞나요....???? 대충 감은 알겠지만 확실한 차이를 잘 몰라서 질문드립니다 ㅜ... 제 질문을 부디 이해하셨으면 ....! 참고용으로 테스트했던 콘솔이미지 첨부드려요! 2. 추가질문 images.splice(currentIdx, 1); setImages([...images]); 이렇게도 시도해봤는데 원래 코드와 똑같이 동작하더라구요.newImages 배열을 새로 만들어 사용하는 이유는 원본은 그대로 두고 객체(?)처럼 쓰려고 하신게 맞는건가요?? 3. 밑에 다른 분 질문에서 서버 사진 삭제관한 질문인데요 ----------- 파일 삭제는 노드 부분에서 const fs = require('fs') const path = 'yourPath(경로)' try { fs.unlinkSync(path) } catch(err) { console.error(err) } ---------- 이렇게 답변 주셨었는데 노드부분은 혹 production.js를 말하는건가요?좀 더 자세히 알려주시면 감사드리겠습니다.. :) 답변 기다리겠습니다~ 고맙습니다!~!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입부터 다시 하면
안녕하세요 새로운 계정으로 사용하려고 기존 DB 정보를 다 지우고 새롭게 회원가입 해서 사용하니 Add Cart 버튼 클릭 시에도 cart 내부에 아무 값도 저장되지 않아요 오류도 없네요,, 혹시 예상가는 원인이 있을까요?ㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
캐리지 리턴 관련 문의 드립니다
안녕하세요. 수차례에 걸쳐서 강의를 반복해서 듣고 있습니다.캐리지 리턴 관련 질문 드립니다.상품상세에서 description(상품설명)이 있는데 문자열의 캐리지 리턴을 <br />로 바꾸어서 화면에 출력을 하면 화면에는 <br />을 포함한 아래와 같은 문자열로 표시 됩니다.확인 부탁 드리겠습니다. Descriptionプラセンタ配合のエイジングケアトニック!<br />ジェットスプレーが直撃!頭皮と毛髪をトータルケア<br />※年齢に応じた栄養補給によるケア<br /><br />アルコールを含む※제가 예전에 AWS관련 질문을 드렸는데 알기 쉽게 쓸려고 몇번을 지우고 다시쓰고 했는데 지웠던 질문에 대한 답변을 주신것 같습니다 번거로우시겠지만 다시한번 확인 부탁 드릴께요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Dropzone 이미지 삭제 관련해서 문의가 있습니다
Dropzone을 이용해 이미지를 넣고 삭제할때 지금 코드는 DB 리스상에서만 삭제하게 되게 되어있고 결국 AWS S3 상에서는 그대로 남아있게 되어 라우터에 delete 를 추가해서 삭제 하려고 하는데요. delete를 어떤식으로 짜야할까요? 보통 삭제의 경우 /:imageId 이런식으로 특정 id 값으로 삭제하는건 알겠는데 지금처럼 아직 DB가 다 완성되지 않은 상태에서 delete 하는것은 잘 모르겠어서요.. 혹시 어떤 강의를 들으면 알 수 있는지 예시 강의나 이런걸 알려주시면 참조하고 싶습니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
multer관련 path오류
현재 multer부분 실습중인데요ㅠ 어째서인지 이미지도 다 멀쩡히 저장되고 모든것이 다 잘 저장이 되는데 문제가 filepath가 file: "1641991261555_239.jpg" filePath: "server\\uploads\\1641991261555_239.jpg" success: true 로 저장이 되서 src부분이 경로가 제대로 안되는것 같더라구요ㅠ multer문제인 것 같은데 혹시 뭐가 문제인지 알수 있을까요...? 참고로 router에 넣지않고 index.js에 작업하고 있습니다 server쪽 코드 const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'server/uploads') }, filename: function (req, file, cb) { cb(null,`${Date.now()}_${file.originalname}`) } }) const upload = multer({ storage: storage }).single("file") app.post('/api/product/image', (req, res)=>{ //가져온 이미지를 저장을 해주면 된다. upload(req, res, err =>{ if(err) { return res.json({success: false, err}) } return res.json({success:true, filePath:req.file.path, file:req.file.filename}) }) }) react 컴포넌트 부분 코드 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.filePath]) }else{ alert('파일을 저장하는데 실패했습니다') } }) console.log(Images) }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
heroku 배포후 master 브랜치에 push 할때마다 이미지가 날라가는거 해결방법이 있을까요??
배포한 앱에서 사진을 업로드하면 서버의 upload 폴더에 사진이 저장되어있을텐데 수정할 부분이 있어서 수정하고 다시 push 하면 서버의 upload 폴더가 local의 upload 폴더로 바뀌기 때문에 날라가는거 같은데 다시 push 했을때 서버가 가지고있는 이미지를 안날라가게 하는 방법이 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
AWS 배포관련 문의 드립니다.
수고하십니다. 강의 열심히 듣고 있습니다.항상 친절한 답변 감사하게 생각하고 있습니다.아울러 너무 많은 질문을 드려서 죄송하게 생각하고 있습니다. 이 챕터와는 무관한 내용의 질문을 드립니다. 배포관련 유투브에서 강사님의 영상을 보고 AWS에 배포를 해 보았습니다. 결론은 실패?^^했습니다.몽고디비에 접속은 된다고 콘솔 메세지는 나오는데 405에러로 실제 로그인 및 회원가입도 안되네요 AWS 배포 관련 질문 드립니다.1. 소스내에 있는 localhost를 AWS의 퍼블릭 도메인으로 변경해야 하죠? 예를 들어 FileUpload.js의 아래와 같은 localhost구문을 54.249.xx.xxx 처럼 변경하는거죠? 변경전 : src={`http://localhost:5000/${image}`}/> 변경후 : src={`http://54.249.xx.xxx/${image}`}/> ※localhost를 수정한 파일 setupProxy.js FileUpload.js ImageSlider.js ProductImage.js 2. 몽고디비 접속정보는 AWS에 올리면 prod.js를 볼것같은데 헤로쿠에서 MONGO_URI를 설정했던것 처럼 AWS에서도 별도의 설정이 필요하지 않나요? prod.js :mongoURI:process.env.MONGO_URI3. 시스템 폴더 구조가 개발때와 틀려져서 서버의 index.js를 아래와 같이 수정했습니다. 그리고 강사님은 server안에 server 폴더를 복사하셨는데 전 개발과 동일하게 server 폴더는 하나만 두었습니다. 수정한 내용이 맞는지 확인 부탁 드립니다. app.use(express.static("client/build") → client/deploy ~path.resolve(__dirname, "../client", "build"~ → ..client", "deploy"~ 4. 마지막으로 커멘트 보니깐 어떤분이 default.config에 proxy by pass를 지정해야 한다고 해서 동일하게 했지만 해결되지 않았습니다. 도움 부탁 드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 오류
1. npm run dev 하면 >react-boiler-plate@1.1.0dev >concurrently "npm run backend" "npm run start --prefix client" 2. 순서대로 명령어 입력시