33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
handleFilters 질문 ㅠㅠ
newFilters[category] = filters 여기부분이 왜이렇게 되나요? 이 줄이 해당 카테고리에 filters값을 넣는 의미가아닌가요? Filters의 init값이 { continents = [], price=[] } 인데 newFilters.category = filters 이런식으로 대야하는거 아닌가요?? 그리고 setSkip(0)은 왜해주는건가요?? body에 skip:0은 useState Skip이랑 상관없지안나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
paypal install 해로쿠에서 설치시 에러
안녕하세요 강의 잘 듣고 있습니다.페이팔 설치할때 에러가 대책방안으로 다른분이 남기신 글대로 [npm install --save react-paypal-express-checkout --force] 로컬에는 설치를 했지만 헤로쿠에 올릴때는 역시 에러가 나네요.조언 부탁 드리겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
업로드페이지만들기 강좌에서요 회원가입하고 로그인하라고 하셔서 했는데요
업로드페이지만들기 강좌에서요 회원가입하고 로그인하라고 하셔서 했는데요 [HPM] Error occurred while trying to proxy request /api/users/login from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 회원가입하고 로그인하니까 계속 이런 오류가 나서요 해결 방법 좀 알려주실수 있을까요? 보니까 회원가입 자체가 안되는거 같아서요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 질문입니당
PS C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master> npm run dev > react-boiler-plate@1.0.0 dev > concurrently "npm run backend" "npm run start --prefix client" [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter `rs` [0] [nodemon] watching dir(s): *.* [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting `node server/index.js` [0] internal/modules/cjs/loader.js:905 [0] throw err; [0] ^ [0] [0] Error: Cannot find module 'C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node' [0] Require stack: [0] - C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master\node_modules\bcrypt\bcrypt.js [0] - C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master\server\models\User.js [0] - C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master\server\routes\users.js [0] - C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master\server\index.js [0] at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15) [0] at Function.Module._load (internal/modules/cjs/loader.js:746:27) [0] at Module.require (internal/modules/cjs/loader.js:974:19) [0] 'C:\\Users\\bumre\\OneDrive\\바탕 화면\\React_Shopping_Mall\\boilerplate-mern-stack-master\\server\\index.js' [0] ] [0] } [0] [nodemon] app crashed - waiting for file changes before starting... [1] [HPM] Proxy created: / -> http://localhost:5000 [1] i 「wds」: Project is running at http://192.168.68.161/ [1] i 「wds」: webpack output is served from [1] i 「wds」: Content not from webpack is served from C:\Users\bumre\OneDrive\바탕 화면\React_Shopping_Mall\boilerplate-mern-stack-master\client\public [1] i 「wds」: 404s will fallback to / [1] Starting the development server... [1] [1] Compiled with warnings. [1] [1] ./src/components/views/LoginPage/LoginPage.js [1] Line 74:11: 'dirty' is assigned a value but never used no-unused-vars [1] Line 79:11: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] ./src/components/views/RegisterPage/RegisterPage.js [1] Line 92:11: 'dirty' is assigned a value but never used no-unused-vars [1] Line 97:11: 'handleReset' is assigned a value but never used no-unused-vars [1] [1] Search for the keywords to learn more about each warning. [1] To ignore, add // eslint-disable-next-line to the line before. [1] [1] [HPM] Error occurred while proxying request localhost:3000/api/users/auth to http://localhost:5000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while proxying request localhost:3000/api/users/auth to http://localhost:5000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) [1] [HPM] Error occurred while proxying request localhost:3000/api/users/register to http://localhost:5000/ [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors) 이런 오류가 발생했는데 bcryptjs 를 다운받았는데도 안됩니다 ㅜㅜ 그리고 localhost:5000 으로 연결이 안된다고 해여 ㅜㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm install 에러
왜 계속 에러가 나는걸까요?! npm WARN old lockfile npm 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 issue npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm 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#deprecated npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated npm 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 properly npm 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 future npm ERR! code 1 npm ERR! path C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\node_modules\bcrypt npm ERR! command failed npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node-pre-gyp install --fallback-to-build npm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\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 ok npm ERR! node-pre-gyp info using node-pre-gyp@0.14.0 npm ERR! node-pre-gyp info using node@16.13.1 | win32 | x64 npm ERR! node-pre-gyp WARN Using needle for node-pre-gyp https download npm ERR! node-pre-gyp info check checked for "C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\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.gz npm 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.gz npm 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.gz npm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@16.13.1 (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.gz npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.13.1 | win32 | x64 npm ERR! gyp info ok npm ERR! gyp info it worked if it ends with ok npm ERR! gyp info using node-gyp@9.0.0 npm ERR! gyp info using node@16.13.1 | win32 | x64 npm ERR! gyp info find Python using Python version 3.10.1 found at "C:\Users\ravio\AppData\Local\Programs\Python\Python310\python.exe" npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS msvs_version not set from command line or npm config npm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt npm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more details npm ERR! gyp ERR! find VS looking for Visual Studio 2015 npm ERR! gyp ERR! find VS - not found npm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8 npm ERR! gyp ERR! find VS npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studio npm ERR! gyp ERR! find VS including the "Desktop development with C++" workload. npm ERR! gyp ERR! find VS For more information consult the documentation at: npm ERR! gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows npm ERR! gyp ERR! find VS ************************************************************** npm ERR! gyp ERR! find VS npm ERR! gyp ERR! configure error npm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to use npm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47) npm ERR! gyp ERR! stack at C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:75:16 npm ERR! gyp ERR! stack at VisualStudioFinder.findVisualStudio2013 (C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14) npm ERR! gyp ERR! stack at C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14 npm ERR! gyp ERR! stack at C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16 npm ERR! gyp ERR! stack at C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7 npm ERR! gyp ERR! stack at C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16 npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:404:5) npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1064:16) npm ERR! gyp ERR! System Windows_NT 10.0.22000 npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\ravio\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\ravio\\Desktop\\myProj\\clonefile\\boilerplate-mern-stack\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\ravio\\Desktop\\myProj\\clonefile\\boilerplate-mern-stack\\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\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\node_modules\bcrypt npm ERR! gyp ERR! node -v v16.13.1 npm ERR! gyp ERR! node-gyp -v v9.0.0 npm ERR! gyp ERR! not ok npm ERR! node-pre-gyp ERR! build error npm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\ravio\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\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 ERR! stack at ChildProcess.<anonymous> (C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\node_modules\node-pre-gyp\lib\util\compile.js:83:29) npm ERR! node-pre-gyp ERR! stack at ChildProcess.emit (node:events:390:28) npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1064:16) npm ERR! node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5) npm ERR! node-pre-gyp ERR! System Windows_NT 10.0.22000 npm ERR! node-pre-gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\ravio\\Desktop\\myProj\\clonefile\\boilerplate-mern-stack\\node_modules\\node-pre-gyp\\bin\\node-pre-gyp" "install" "--fallback-to-build" npm ERR! node-pre-gyp ERR! cwd C:\Users\ravio\Desktop\myProj\clonefile\boilerplate-mern-stack\node_modules\bcrypt npm ERR! node-pre-gyp ERR! node -v v16.13.1 npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0 npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\ravio\AppData\Local\npm-cache\_logs\2022-04-20T07_09_46_710Z-debug-0.log
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
nav bar 메뉴에 로그인 유무에 따라 ui를 다르게 하고싶습니다.
완강은 아직 안했지만 강의에는 해당 내용이 없는것 같아서 질문드립니다. 로그인한 상태에서는 nav bar 에 로그인 및 회원가입 페이지로 이동하는 링크나 태그를 보이지 않게 하고싶습니다. 혹시 user state의 isAuth를 가져와서 삼항식으로 구현하면될까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
로그인버튼 생성시간이 너무 오래걸립니다.
안녕하세요 홈페이지에 다른건 다 잘 뜨는데 로그인버튼이 너무 나중에 뜹니다. 어떻게 수정해야되나요? 그리고 회원정보입력후 다음창으로 이동이 안됩니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
사진을 Dropzone에 올려도 배열에 추가되지 않습니다
formData.append가 실행이 안 되는 것 같습니다 상품 업로드 버튼을 누르면 자꾸 모든 항목을 채워야 한다는 alert가 나와서 console.log로 일일이 확인해 보니 사진을 올려도 Images가 비어 있더군요 FileUpload.js의 dropHandler 부분에서 formData.append 후 console.log로 formData를 출력해 보았는데 아무것도 없다고 나옵니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
antd import하는 과정에서 오류가 발생합니다 ㅠㅠ
안녕하세요, 선생님! 올려주신 수업 늦었지만 잘 듣고 있습니다. 따라하는 과정에서 문제가 있어서요 ㅠㅠ import React from 'react'; import { Typography, Button, Form , Input } from 'antd'; const { Title } = Typography; const { Textarea } = Input; function UploadProductPage() { return ( <div style={{ maxWidth: '700px', margin: '2rem auto' }}> <div style={{ textAligh: 'center', marginBottom: '2rem' }}> <Title level={2}>여행 상품 업로드</Title> </div> <br /> <br /> <Form> {/* Drop Zone */} <br /> <br /> <label>이름</label> <Input /> <br /> <br /> <label>설명</label> <Textarea /> <br /> <br /> <label>가격($)</label> <Input /> <br /> <br /> <select> <option></option> </select> <br /> <br /> <Button> 확인 </Button> </Form> </div> ) } export default UploadProductPage 업로드 페이지에 이동시, 아래와 같은 오류가 떠서요... 비슷한 사례가 있었길래 그거 참고해서 해도 문제가 있어서 방법을 잘 모르겠습니다ㅠㅠ 어떻게 하면 좋을지 도움 요청드립니다.
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 오류 질문이용
이렇게뜨는데.. 뭐가잘못된건가요?ㅠㅠ > concurrently "npm run backend" "npm run start --prefix client" [0] [0] > react-boiler-plate@1.0.0 backend [0] > nodemon server/index.js [0] [1] [1] > client@0.1.0 start [1] > react-scripts start [1] [1] [1] There might be a problem with the project dependency tree. [1] It is likely not a bug in Create React App, but something you need to fix locally. [1] [1] The react-scripts package provided by Create React App requires a dependency: [1] [1] "babel-loader": "8.1.0" [1] [1] Don't try to install it manually: your package manager does it automatically. [1] However, a different version of babel-loader was detected higher up in the tree: [1] [1] C:\Users\82109\node_modules\babel-loader (version: 8.2.3) [1] [1] Manually installing incompatible versions is known to cause hard-to-debug issues. [1] [1] If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. [1] That will permanently disable this message but you might encounter other issues. [1] [1] To fix the dependency tree, try following the steps below in the exact order: [1] [1] 1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder. [1] 2. Delete node_modules in your project folder. [1] 3. Remove "babel-loader" from dependencies and/or devDependencies in the package.json file in your project folder. [1] 4. Run npm install or yarn, depending on the package manager you use. [1] [1] In most cases, this should be enough to fix the problem. [1] If this has not helped, there are a few other things you can try: [1] [1] 5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead. [1] This may help because npm has known issues with package hoisting which may get resolved in future versions. [1] [1] 6. Check if C:\Users\82109\node_modules\babel-loader is outside your project directory. [1] For example, you might have accidentally installed something in your home folder. [1] [1] 7. Try running npm ls babel-loader in your project folder. [1] This will tell you which other package (apart from the expected react-scripts) installed babel-loader. [1] [1] If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. [1] That would permanently disable this preflight check in case you want to proceed anyway. [1] [1] P.S. We know this message is long but please read the steps above :-) We hope you find them helpful! [1] [1] npm run start --prefix client exited with code 1 [0] [nodemon] 1.19.4 [0] [nodemon] to restart at any time, enter `rs` [0] [nodemon] watching dir(s): *.* [0] [nodemon] watching extensions: js,mjs,json [0] [nodemon] starting `node server/index.js` [0] node:internal/modules/cjs/loader:936 [0] throw err; [0] ^ [0] [0] Error: Cannot find module 'bcrypt' [0] Require stack: [0] - C:\Users\82109\Downloads\boilerplate-mern-stack-master\server\models\User.js [0] - C:\Users\82109\Downloads\boilerplate-mern-stack-master\server\routes\users.js [0] - C:\Users\82109\Downloads\boilerplate-mern-stack-master\server\index.js [0] at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) [0] at Function.Module._load (node:internal/modules/cjs/loader:778:27) [0] at Module.require (node:internal/modules/cjs/loader:1005:19) [0] at require (node:internal/modules/cjs/helpers:102:18) [0] at Object.<anonymous> (C:\Users\82109\Downloads\boilerplate-mern-stack-master\server\models\User.js:2:16) [0] at Module._compile (node:internal/modules/cjs/loader:1103:14) [0] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) [0] at Module.load (node:internal/modules/cjs/loader:981:32) [0] at Function.Module._load (node:internal/modules/cjs/loader:822:12) [0] at Module.require (node:internal/modules/cjs/loader:1005:19) [0] at require (node:internal/modules/cjs/helpers:102:18) [0] at Object.<anonymous> (C:\Users\82109\Downloads\boilerplate-mern-stack-master\server\routes\users.js:3:18) [0] at Module._compile (node:internal/modules/cjs/loader:1103:14) [0] at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) [0] at Module.load (node:internal/modules/cjs/loader:981:32) [0] at Function.Module._load (node:internal/modules/cjs/loader:822:12) { [0] code: 'MODULE_NOT_FOUND', [0] requireStack: [ [0] 'C:\\Users\\82109\\Downloads\\boilerplate-mern-stack-master\\server\\models\\User.js', [0] 'C:\\Users\\82109\\Downloads\\boilerplate-mern-stack-master\\server\\routes\\users.js', [0] 'C:\\Users\\82109\\Downloads\\boilerplate-mern-stack-master\\server\\index.js' [0] ] [0] } [0] [nodemon] app crashed - waiting for file changes before starting...
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm install오류 질문드려요
질문이요 처음부터 이런오류가뜨는데 npm install하면뜨네요 ..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
서버에 추천 알고리즘을 삽입해보고 싶어서 질문드립니다.
제가 클라이언트에서 userNumber 을 서버로 보내고 이를 서버의 index.js 에서 받아 위의 하이라이트 되어있는 코드의 2번째 줄에 넣어주고 싶은데 이를 어떡게 해야할지 잘 모르겠어서 질문 드립니다. 계속 시도를 해봐도 userNumber 이 undefine 되어있다고만 나오고 있습니다. 또한 POST로 보내줘야할 경로도 어떻게 설정해야할지 잘 모르겠습니다. 강의내용과 연관이 없는 내용이라 질문드리기 조심스러웠지만 해당 문제가 일주일 넘게 저를 괴롭히고 있는데 너무 답답하고 따로 물어볼 곳이 없어서 질문드리게 되었습니다. 답변해주신다면 정말 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 태그 src 경로 설정시 CORS 이슈가 발생하는 분들
질문은 아니지만 간단히 해결할 수 있어 글 남기고 갑니다. 저의 경우 상품등록 페이지를 만들다 localhost:5000/${file} 이 cors 이슈가 있어 이미지 미리보기 기능이 구현이 안되었습니다. 아래와 같이 백엔드 서버에 cors를 해결하는 access control 부분을 추가 해보시길 바랍니다. app.get('*', (req, res) => { res.header("Access-Control-Allow-Origin","*"); res.sendFile(path.join(__dirname, '/public/index.html')); });
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
혹시 403에러 해결하려면 어떻게 해야할까요?
mongodb 연결은 잘 되있습니다...
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Boiler Plate 기본 코드의 대한 설명은 따로 없는건가요??
제목 그대로 입니다. 예를 들면 models의 user.js는 왜 이렇게했고 하는 설명은 따로 없는건가요?? 만약 다른 강의에 있다면 그 강의는 무엇인지 알수있나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
FileUpload.js에서. UploadProductPage로 데이터 전송시에
안녕하세요 개인 프로젝트를 진행중이다가 살짝 어려운 부분에 있어서 해결하려고 구글링도 해보고 했는데 해결이 되지 않아서 문의드려봅니다. 강의 내용과도 연관된거라 괜찮을듯해서요. 지금 강의에선 FileUpload에서 실제 사진전송을 서버로 요청하고, 서버에서 요청을 완료하면 response로 이미지 정보를 반환한 후 이것을 다시 Parent인 UploadProductPage에 해당 파일의 path 정보를 반환해서 이것을 Parent에서 디스플레이하는 형식인데, 전 썸네일을 추가했습니다. 결과적으로 FileUpload에서 서버로부터 받아서 Parent 컴포넌드로 전송해주는 정보가 2가지로 imagePath와 thumbnailPath이렇게 입니다. 따라서 Parent로 전송하는 것이 단순한 string 데이터가 아니고 variables 객체 안에 image: Images / thumbnail: Thumbnails 이렇게 2개 항목을 state로 정의해주고 있는데요. 문제는 이렇게 전송할시 Parent에서 처음 읽을시에 제대로 값을 읽지 못한다는 점입니다. 처음을 제외하면 그 다음부턴 undefined가 아니라 제대로 값을 읽어오는데요. 이것이 요청처리로 인한 delay 때문인지 정확히 모르겠습니다. 따라서 image값을 Images state가 아닌 직접 response.data.imagePath로 정의해주면 처음부터 이상없이 값을 읽어오지만 아무래도 variable의 관리상 state으로 정의해주는게 좋을듯해서요. 혹시 delay 때문인가 해서 방법을 알아보니 새로 useTransition이란 훅이 있던데 이건 리액트18부터 적용되는 거라 아직 불안해서 17에서 해결할 방법을 고민중입니다 코드를 직접 넣은게 아니라 헥깔리실 수도 있는데 거의 동일한 코드라 괜찮으실꺼 같아요. 이 부분만 다시 적으면, Axios.post('/api/gallery/upload/image', formData, config).then(response => { if (response.data.success) { setImages(response.data.filePath); setThumbnails(response.data.thumbnailPath); let variables = { image: Images, thumbnail: Thumbnails } props.refreshFunction(variables); } else { alert('Failed to save images on the server'); } }); 처음에는 Thumbnail 생성을 따로 Axios 안의 Axios로 추가로 서버에 요청해서 처리해줬었는데 굳이 각각 따로 요청할 필요가 있을까 하는 생각도 들고, 그냥 서버에서 직접 썸네일이미지를 생성하주고 그 정보를 받아왔는데요, 이때 오류생기면 또 그에 따른 오류메세지만 전송하면 될듯해서 이렇게 했는데 바로 variables을 정상적으로 update하는데 문제가 있는듯합니다. 정확한 답이 아니더라도 해결책이 될 수 있는 조언이라도 해주실 수 있나요? 감사합니다
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
버튼을 눌러야 검색하는 기능
안녕하세요 검색버튼을 눌러야 검색이 되게 하고 싶은데 어떻게 해야될 지 모르겠습니다.. 이렇게 하면 검색창을 눌러야 검색이 되고 검색버튼을 누르면 아무 반응이 없습니다.. ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
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;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
서버에서 토큰 발급시
로그인시 서버에서 토큰생성후 쿠키로 클라이언트에 보넀는데 토큰은 쿠키를 사용하지않고 클라이언트로 보내는게 불가능한가요? 또 쿠키말고 클라이언트에서 localstorage에 저장이 가능한지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입 오류
회원가입 할때 가입이 안되고 다음화면으로 넘어가지 않아요. 콘솔창을 보면 이게 계속 떠있네요. 터미널 상에서는 아무런 오류가 없습니다.