33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입 안되시는분들
https://yamea-guide.tistory.com/entry/atlas-MongoError-user-is-not-allowed-to-do-action-find-on 이거땜에 2시간을 욕하고 힘들었네요 후... 어떤글도 해결이 안됐습니다 이거 따라하세요....
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
상세정보페이지 클릭시 400 bad request 에러 뜹니다
[깃헙주소]https://github.com/Dongha922/reservation/tree/main/guestshop[에러 콘솔창]xhr.js:178 GET http://localhost:3000/api/product/products_by_id?id=6372c02521d17f4108aac938$type=single 400 (Bad Request) Uncaught (in promise) Error: Request failed with status code 400 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1) [해본 방법 ]변수 명 확인 -> 이상없음방법을 알려주시면 감사하겠습니다. 강의 잘 듣고있습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
데이터베이스에서 가져온 상품 정보들 보여주기 파트 관련 질문
안녕하세요 강사님. 강의를 수강 중인 학생입니다.console.log을 통해서는 현재 user가 담은 상품들이 잘 보여지는데 table에는 표시가 안됩니다. 혹시 왜 이런 결과가 나오는지 알 수 있을까요?UserCardBlock.js 코드CartPage.js 코드MongoDB
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
multer 이미지 업로드 오류 질문드립니다
드롭존을 사용하여 이미지 업로드를 했을때,서버 단에서TypeError: Cannot read properties of undefined (reading 'path')라는 에러 메시지와 함께 업로드가 완료되지 않는 문제가 발생했습니다.클라이언트 단에서는POST http://localhost:3000/api/products/image 500 (Internal Server Error)라는 500 서버 에러가 발생했다고 나왔었구요 한가지 의문인 것은,여러 방법을 시도해보다가FileUpload 유틸에서 axios headers config를 삭제하고 시도하니 제대로 잘 동작을 하였습니다.. 유추해보건데, 다른 코드들은 잘 작성되어 동작하지만 해당 config 부분에서 문제가 생긴 것 같습니다, 그렇다면 이유가 무엇인지 궁금합니다 FileUpload.jsimport React from "react"; import Dropzone from "react-dropzone"; import axios from "axios"; const FileUpload = () => { const dropHandler = (files) => { // console.log("dropped file", files); // 파일은 잘 들어옴 console.log(files); let formData = new FormData(); // const config = { // headers: { "content-type": "multipart/form-data" }, // }; formData.append("file", files[0]); // axios.post("/api/products/image", formData, config).then((res) => { axios.post("/api/products/image", formData).then((res) => { if (res.data.success) { console.log(res.data); } else { alert("파일을 저장하는데 실패하였습니다"); } }); }; return ( <Dropzone onDrop={dropHandler}> {({ getRootProps, getInputProps }) => ( <section> <div style={{ width: "400px", height: "400px", backgroundColor: "white", border: "1px solid lightgray", display: "flex", alignItems: "center", justifyContent: "center", }} {...getRootProps()} > <input {...getInputProps()} /> <p style={{ fontSize: "5rem" }}>+</p> </div> </section> )} </Dropzone> ); }; export default FileUpload; products.js (강의와 다르게 product"s"로 바꾸고 관련 코드들도 수정하였었습니다)const express = require("express"); const router = express.Router(); const multer = require("multer"); //================================= // Product //================================= const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, "uploads/"); }, // 파일이 어디에 저장이 되는가에 대한 부분 filename: function (req, file, cb) { cb(null, file.originalname); }, }); const upload = multer({ storage: storage }).single("file"); router.post("/image", (req, res) => { console.log(storage.filename); 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, }); }); }); module.exports = router;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[해결 글] 회원가입 DB 연결 오류 해결
결론: 와이파이 가 바뀌면 ip 주소 바뀌니까 mongoDB 에 network access 에 create Ip 해서 새 ip 등록해줬습니다.공용와이파이 일 경우 2시간마다 ip 주소가 바뀌니 편집으로 바꿔보세요 ip4 주소 찾는법 구글링해도 나오고 window 는 cmd(관리자권한 실행) - ipconfig 입력 상황:콘솔창에는 504 게이트 웨이 오류가터미널에는 HRM 로컬호스트 3000 로컬호스트 5000 뭐시기랑app chashed 도 동시에 떳었습니다.HRM 앞줄에는Error: Cannot find module '../models/Product' 이거는 models 에 product 파일 생성하니 사라짐 파일을 아직 만들지는 않았지만 auth.js 파일에서 위 파일을 호출하니 강사님 깃헙 완성코드 에서 ../models/product.js 파일 복붙해주니 해결되었으나또 다음으로 HRM throw er 이런식으로 떠서 HRM 다시뜸 504 gateawqy 발생 npm run dev 는 client 폴더가 아닌 (server 폴더 안에서도 아님!) root 폴더에서 실행하기혹시 클론을 해서 실행시킨다면, root folder > npm install client folder > npm install install을 먼저 하는 것 잊지 않기 위 강의처럼 다른 옵션들 ... dropzone 같은 모듈을 사용했다면 해당 모듈에 대한 install들도 한 번씩 더 해보기 npm install bcrypt --save 다시 시도하기 4-1. bcrypt 버전을 5.0.0 으로 dependencies에서 수정 -> npm install -> npm run 컴퓨터 껐다 키기위에 해결방법 다해도 몽고디비 연결이 안되는 거같아몽고디비에서 새마음으로 처음부터 클러스터, 몽고 uri 사용자 이름, 비밀번호 새로하고 ip 주소 추가해주니모든 에러 사라졌습니다. 저도 매 초마다 떨리는 순간으로 코드 작성하고 run 하고 있습니다. 여러분 모두에게 행운을 빕니다. ^^*
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요 강사님 카트에 집어넣었는데 카트 내역이 뜨지 않아요
https://github.com/mjpark401/vegan-mall.git깃허브 주소입니다무엇이 문제일까요? ㅠㅠ 그대로 따라했는데 카트 내역이 안뜨네요..카트를 누르면 콘솔창 오류로는index.js:1 Warning: validateDOMNesting(...): <tr> cannot appear as a child of <thread>. in tr (at UserCardBlock.js:38) in thread (at UserCardBlock.js:37) in table (at UserCardBlock.js:36) in div (at UserCardBlock.js:35) in UserCardBlock (at CartPage.js:35) in div (at CartPage.js:34) in div (at CartPage.js:30) in CartPage (at auth.js:39) in AuthenticationCheck (created by Context.Consumer) in Route (at App.js:28) in Switch (at App.js:22) in div (at App.js:21) in Suspense (at App.js:19) in App (at src/index.js:29) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:28) in Provider (at src/index.js:21)console.<computed> @ index.js:1index.js:1 Warning: validateDOMNesting(...): <thread> cannot appear as a child of <table>. in thread (at UserCardBlock.js:37) in table (at UserCardBlock.js:36) in div (at UserCardBlock.js:35) in UserCardBlock (at CartPage.js:35) in div (at CartPage.js:34) in div (at CartPage.js:30) in CartPage (at auth.js:39) in AuthenticationCheck (created by Context.Consumer) in Route (at App.js:28) in Switch (at App.js:22) in div (at App.js:21) in Suspense (at App.js:19) in App (at src/index.js:29) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:28) in Provider (at src/index.js:21)console.<computed> @ index.js:1index.js:1 Warning: The tag <thread> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter. in thread (at UserCardBlock.js:37) in table (at UserCardBlock.js:36) in div (at UserCardBlock.js:35) in UserCardBlock (at CartPage.js:35) in div (at CartPage.js:34) in div (at CartPage.js:30) in CartPage (at auth.js:39) in AuthenticationCheck (created by Context.Consumer) in Route (at App.js:28) in Switch (at App.js:22) in div (at App.js:21) in Suspense (at App.js:19) in App (at src/index.js:29) in Router (created by BrowserRouter) in BrowserRouter (at src/index.js:28) in Provider (at src/index.js:21)console.<computed> @ index.js:1 이렇게뜹니다 ㅠㅠ 저게 왜 오류라는건지....모르겠어요 ㅠㅠ 답변 기다리겠습니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드 만드는거 질문있습니다
렌딩페이지만들기 - 카드만들기 강의 3분40분에컴포넌트 return 안에 Products.map을 돌리는게 아니고 따로 함수를 빼서 renderCards를 처리하셨는데따로 빼는 이유가 있나요?실무에선 return에서 map으로 거의 돌렸어서 궁금해졌습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
2강 npm install 오류
안녕하세요 강사님2강을 듣는중 boilerplace-mern stack master을 다운받고 압축해제를 한 후npm install을 하는데 이러한 오류가 나옵니다.Windows PowerShellCopyright (C) Microsoft Corporation. All rights reserved.새로운 크로스 플랫폼 PowerShell 사용 https://aka.ms/pscore6PS C:\Users\park\Documents\boilerplate-mern-stack-master> npm installnpm WARN old lockfilenpm WARN old lockfile The package-lock.json file was created with an old version of npm,npm WARN old lockfile so supplemental metadata must be fetched from the registry. npm WARN old lockfile npm WARN old lockfile This is a one-time fix-up, please be patient...npm WARN old lockfile npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issuenpm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecatednpm WARN deprecated mkdirp@0.5.4: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependenciesnpm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecatednpm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecatednpm WARN deprecated debug@4.1.1: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated debug@3.2.6: Debug versions >=3.2.0 <3.2.7 || >=4 <4.3.1 have a low-severity ReDos regression when used in a Node.js environment. It is recommended you upgrade to 3.2.7 or 4.3.1. (https://github.com/visionmedia/debug/issues/797)npm WARN deprecated bcrypt@3.0.8: versions < v5.0.0 do not handle NUL in passwords properlynpm WARN deprecated node-pre-gyp@0.14.0: Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the futurenpm ERR! code 1npm ERR! path C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! command failednpm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c C:\Users\park\AppData\Local\Temp\install-8386daeb.cmdnpm ERR! 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=C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)npm ERR! node-pre-gyp info it worked if it ends with oknpm ERR! node-pre-gyp info using node-pre-gyp@0.14.0npm ERR! node-pre-gyp info using node@16.17.0 | win32 | x64npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https downloadnpm ERR! node-pre-gyp info check checked for "C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node" (not found)npm ERR! node-pre-gyp http GET https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp http 404 https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.17.0 (node-v93 ABI, unknown) (falling back to source compile with node-gyp)npm ERR! node-pre-gyp http 404 status code downloading tarball https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.8/bcrypt_lib-v3.0.8-node-v93-win32-x64-unknown.tar.gznpm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using node-gyp@9.0.0npm ERR! gyp info using node@16.17.0 | win32 | x64npm ERR! gyp info oknpm ERR! gyp info it worked if it ends with oknpm ERR! gyp info using node-gyp@9.0.0npm ERR! gyp info using node@16.17.0 | win32 | x64npm ERR! gyp ERR! find Python npm ERR! gyp ERR! find Python Python is not set from command line or npm configurationnpm ERR! gyp ERR! find Python Python is not set from environment variable PYTHONnpm ERR! gyp ERR! find Python checking if "python3" can be usednpm ERR! gyp ERR! find Python - "python3" is not in PATH or produced an errornpm ERR! gyp ERR! find Python checking if "python" can be usednpm ERR! gyp ERR! find Python - "python" is not in PATH or produced an errornpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python39\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python39\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python39\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python39-32\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python39-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python39-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python39-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python39-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python39-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python38\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python38\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python38\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python38-32\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python38-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python38-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python38-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python38-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python38-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python37\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python37\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python37\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python37-32\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python37-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python37-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python37-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python37-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python37-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python36\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python36\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python36\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Users\park\AppData\Local\Programs\Python\Python36-32\python.exenpm ERR! gyp ERR! find Python - "C:\Users\park\AppData\Local\Programs\Python\Python36-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files\Python36-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files\Python36-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if Python is C:\Program Files (x86)\Python36-32\python.exenpm ERR! gyp ERR! find Python - "C:\Program Files (x86)\Python36-32\python.exe" could not be runnpm ERR! gyp ERR! find Python checking if the py launcher can be used to find Python 3npm ERR! gyp ERR! find Python - "py.exe" is not in PATH or produced an errornpm ERR! gyp ERR! find Pythonnpm ERR! gyp ERR! find Python **********************************************************npm ERR! gyp ERR! find Python You need to install the latest version of Python.npm ERR! gyp ERR! find Python Node-gyp should be able to find and use Python. If not,npm ERR! gyp ERR! find Python you can try one of the following options:npm ERR! gyp ERR! find Python - Use the switch --python="C:\Path\To\python.exe"npm ERR! gyp ERR! find Python (accepted by both node-gyp and npm)npm ERR! gyp ERR! find Python - Set the environment variable PYTHONnpm ERR! gyp ERR! find Python - Set the npm configuration variable python:npm ERR! gyp ERR! find Python npm config set python "C:\Path\To\python.exe"npm ERR! gyp ERR! find Python For more information consult the documentation at:npm ERR! gyp ERR! find Python https://github.com/nodejs/node-gyp#installationnpm ERR! gyp ERR! find Python **********************************************************npm ERR! gyp ERR! find Pythonnpm ERR! gyp ERR! configure errornpm ERR! gyp ERR! stack Error: Could not find any Python installation to usenpm ERR! gyp ERR! stack at PythonFinder.fail (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:330:47)npm ERR! gyp ERR! stack at PythonFinder.runChecks (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:159:21)npm ERR! gyp ERR! stack at PythonFinder.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:228:18)npm ERR! gyp ERR! stack at PythonFinder.execFileCallback (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\find-python.js:294:16)npm ERR! gyp ERR! stack at exithandler (node:child_process:408:5)npm ERR! gyp ERR! stack at ChildProcess.errorhandler (node:child_process:420:5)npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:513:28)npm ERR! gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)npm ERR! gyp ERR! stack at onErrorNT (node:internal/child_process:478:16)npm ERR! gyp ERR! stack at processTicksAndRejections (node:internal/process/task_queues:83:21)npm ERR! gyp ERR! System Windows_NT 10.0.19044npm ERR! 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=C:\\Users\\park\\Documents\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\park\\Documents\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v93"npm ERR! gyp ERR! cwd C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! gyp ERR! node -v v16.17.0api_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v93' (1)npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\node-pre-gyp\lib\util\compile.js:83:29)npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:513:28)npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1093:16)npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:302:5)npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.19044npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\park\\Documents\\boilerplate-mern-stack-master\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build"npm ERR! node-pre-gyp ERR! cwd C:\Users\park\Documents\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! node-pre-gyp ERR! node -v v16.17.0npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0npm ERR! node-pre-gyp ERR! not oknpm ERR! A complete log of this run can be found in:npm ERR! C:\Users\park\AppData\Local\npm-cache\_logs\2022-09-28T10_16_33_214Z-debug-0.logPS C:\Users\park\Documents\boilerplate-mern-stack-master> 이유를 알 수 있을까요..ㅠㅠ 답변 기다리고 있습니다..ㅠㅠㅠ 처음부터 이래버려서 진도를 나갈수가 없어요 흑흑
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
최종프로젝트 빌드방법
선생님 강좌를 전부 구독하여 열심히 공부하고있는 학생입니다.강의를 따라하면서 의문사항이 드는건요. 전 dothome 무료계정을 사용하고있는대요. 파일질라에 최종 프로젝트가 완료된 사항을 올리고 싶은대요. 프로젝트가 Client / Server 로 나뉘어있잖아요~Client 부분만 npm run build 하니 화면은 보이는대, upload버튼클릭시 404페이지가 뜨네요. 초보라서 ...해결방법 부탁드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
확인에서 안 넘어갔는데 해결했어요
<Form onSubmit={submitHandler}> <Button onClick={submitHandler}>확인</Button> </Form> Button에 "onClick={submitHandler}" 넣어주니까 제대로 저장이 되었네요! 일주일동안 못넘어가고 있었는데 다행이에요 허허
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
FileUpload 컴포넌트 오류
강의 내용과 동일하게 react dropzone 페이지에서 동일하게 소스를 복사해 컴포넌트를 생성 후 UploadProductPage에 import를 했는데 다음과 같은 오류가 발생합니다.Hook은 함수 컴포넌트 내부에 선언되어야 한다는 오류인데 코드 내용을 보아 Hook이 적용된 부분은 딱히 없는것 같습니다.Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
react 오류가 납니다.
따라하며 배우는 노드, 리액트 시리즈 -쇼핑몰 사이트 말들기 를 듣고있는 수강생입니다.FileUpload.js를 작성하는도중 아래 오류가 납니다. react 버젼과 reactdom버전이 같은걸 확인하고 github 소스를 가져와 써서 오타일 확률도 없는데 어떤 오류일까요 ㅜㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
파일을 저장하는데 실패했다고 뜹니다.
서버쪽에 문제가 있는 것일까요? uploads 폴더에 들어가보면 사진은 저장이 잘 되어 있습니다.FileUpload.jsimport 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) => { // 파일을 backend에 전달해줘야 한다. // 그리고 파일을 전달 할 때 따로 해줘야 하는게 있다. 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){ setImages([...Images, response.data.filePath]) } else { alert('파일을 저장하는데 실패했습니다.') } }); // formData와 config를 넣어주지 않으면은 파일을 보낼 때 에러가 발생하게 된다. }; 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:5000/${image}`} /> </div> ))} </div> </div> ) } export default FileUploadproduct.jsconst express = require('express'); const router = express.Router(); const multer = require('multer'); //================================= // Product //================================= const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, 'uploads/') }, filename: function (req, file, cb) { const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9) cb(null, `${Date.now()}_${file.originalname}`) } }) const 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({ seuccess: true, filePath: res.req.file.path, fileName: res.req.file.filename }) // 파일을 어디에, 무슨 이름으로 저장했는지 전달해주는 역할 }) }) module.exports = router; index.js
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
저도 계속 회원가입이 안됐는데 해결이 됐어요
npm install -g node-gypbcrypt 지웠다가 다시 깔았음둘 중 뭐때문에 정상작동하는지는 모르겠지만 저렇게 해서 해결했습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
컴포넌트props 전달
HistoryPage 컴포넌트에 props 들은 어디서 받아오는 건가요?? 부모가 전달해주는게 App.js에 Auth인가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
게시판 글쓰기에 editor(summer note)를 달아서 쓰고 있습니다.
입력하는 곳에 editor(summer note)를 달아서 쓰고 있습니다.editor에서 이미지를 첨부할때 server로 formData 전송하여 임시 장소에 저장한 다음그 결과를 json으로 받아 화면에 출력하고 있습니다.그리고 하단에 다시 input file을 하나 만들어서 대표 이미지로 업로드하여 쓰게끔 구성되어 있는데두가지를 동시에 하면 MulterError: Unexpected field 가 나는 현상이 발생하고 있습니다.editor에 이비지 첨부를 하지 않소 대표 이미지만 보내면 전송이 잘되는데두가지를 동시에 하면 오류가납니다.해결 방법이 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
깃허브 ghpages 배포
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 선생님 오늘 깃허브 ghpages로 배포했는데 상단 네비게이션 메뉴에 메뉴를 눌러서 해당 페이지로 가면 404페이지가 나오는데 혹시 따로 설정을 더 해줘야 할까요?? 아래 사진과 같이 메인화면은 나오고, 사진 및 정보 업로드한 card 모음은 안나오네요 😭 링크 이동한 화면의 url 은 404가 뜹니다. 코드 상으로 뭔가를 더 해줘야할까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
HistoryPage 테이블 데이터 구현
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요. 드디어 마지막 페이지 강의 들으면서 하고 있는데 history 데이터 저장할때 푸시를 잘못한 걸까요?? 테이블의 tr 갯수는 history 들어간 갯수에 맞게 나오는데 해당 tr의 데이터 값들이 전혀 안나와서 ㅠㅜ 질문드립니다 // 해당 페이지 코드 import React, { useEffect, useState } from "react"; function HistoryPage(props) { console.log(props.user.userData && props.user.userData); return ( <div style={{ width: "80%", margin: "3rem auto" }}> <div style={{ textAlign: "center" }}> <h1>History</h1> </div> <br /> <table> <thead> <tr> <th>Payment Id</th> <th>Price</th> <th>Quantity</th> <th>Date of Purchase</th> </tr> </thead> <tbody> {props.user.userData && props.user.userData.history && props.user.userData.history.map((item) => ( <tr key={item.id}> <td>{item.id}</td> <td>{item.price}</td> <td>{item.quantity}</td> <td>{item.dateOfPurchase}</td> </tr> ))} </tbody> </table> </div> ); } export default HistoryPage;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 업로드 문제 질문드립니다.
product.js UploadProdcutPage.js FileUpload.js 몽고 db 문제인거 같아서 네트워크에 IP 0.0.0/0 추가해도 여전히 이미지 업로드하면 문제가 생깁니다 해결 방안 좀 알려주세요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 client말고 server는 어떻게 해결하나요?
선생님 안녕하세요 말씀대로 client에서 run build해서 올려지긴 했는데 client가서 run build해서 프론트엔드는 배포가 되는데요 server쪽은 run build가 안되어서 client 배포한 홈페이지에서 다른 섹션 클릭하면 오류가 떠요 server쪽은 client처럼 src가 없어서 run build가 안된대요 이럴땐 어떻게 해야하나요?