33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
map 함수에서 value 값 문의
안녕하세요 선생님! 이번 강의에서 map함수를 쓰실 때 보면value값에 {item.key} 값을 주셨는데, 왜 value에item.key값이 들어가야하는 건지 궁금합니다. Continents의 value값은 대륙 이름으로 들어갔으니까map함수를 써서 들어가는 item의 value 값에는 item.value로 해서 대륙 이름으로 넣어줘야 하는게 아닌가 싶은데, 제가 잘못 생각한 부분이 어떤건지 말씀주시면 감사드리겠습니다~!! <select onChange={continentsChangeHandler} value={continent}> {Continents.map((item) => ( <option key={item.key} value={item.key}> {item.value} </option> ))} </select>
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 이것을 어떻게 npm build을 하나요?
선생님 선생님 프로젝트는 벡엔드 server랑 client로 나뉘었는데 이것을 어떻게 해야 배포할수 있나요? npm build run 해도 잘 안되어서 물어봅니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
css적용 파일
선생님 안녕하세요! 처음에 upload페이지를 만들었을 때 글씨체나 사이즈가 저절로 적용되던데, 이게 어떤 css파일에서 만들어졌는지 찾아보려했는데 Navbar.css 및 index.css말고는 도저히 없는 것 같습니다. index.css에서는 값을 변경해봐도 font-size라던가 이런것들이 변하지 않는데 어떤 파일에서 적용되고 있는건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 문제
ilerplate-mern-stack-master\boilerplate-mern-stack-master> npm run dev > react-boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client" [1] [1] > client@0.1.0 start[1] > react-scripts start[1][0][0] > react-boiler-plate@1.0.0 backend[0] > nodemon server/index.js[0][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:12844) Warning: Accessing non-existent property 'count' of module exports inside circular dependency[0] (Use `node --trace-warnings ...` to show where the warning was created)[0] Server Listening on 5000[0] (node:12844) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency[0] (node:12844) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency[0] (node:12844) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependency[0] MongoDB Connected...[1] [HPM] Proxy created: / -> http://localhost:5000[1] i 「wds」: Project is running at http://192.168.1.105/[1] i 「wds」: webpack output is served from[1] i 「wds」: Content not from webpack is served from C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\public[1] i 「wds」: 404s will fallback to /[1] Starting the development server...[1][1] Error: error:0308010C:digital envelope routines::unsupported[1] at new Hash (node:internal/crypto/hash:67:19)[1] at Object.createHash (node:crypto:135:10)[1] at module.exports (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53)[1] at NormalModule._initBuildHash (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16)[1] at handleParseError (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:471:10) [1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:503:5[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:358:12[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3[1] at iterateNormalLoaders (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10)[1] at iterateNormalLoaders (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10)[1] C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\react-scripts\scripts\start.js:19[1] throw err;[1] ^[1][1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:67:19)[1] at Object.createHash (node:crypto:135:10)[1] at module.exports (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53)[1] at NormalModule._initBuildHash (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16)[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:452:10[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:323:13[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18[1] at context.callback (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)[1] at C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\client\node_modules\babel-loader\lib\index.js:59:103 {[1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],[1] library: 'digital envelope routines',[1] reason: 'unsupported',[1] code: 'ERR_OSSL_EVP_UNSUPPORTED'[1] }[1][1] Node.js v17.4.0[1] npm run start --prefix client exited with code 1 root에 처음 npm install 했을때 문제가 발생해서 npm uninstall --save bcryptnpm install --save bcryptjs 이걸로 설치는 했습니다 이후 app crash 문제가 발생해서 전부 껐다가 키니까 그건 없어졌는데 아직도 실행이 안되네요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
overflowX: "scroll" 구현이 안되용 ㅠ
안녕하세요 가로 스크롤이 안먹네용 ㅠ 어떠한 이유가 있는걸까요? 궁금합니당 강의 너무 좋아용 감사합니다
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Paypal 버튼 오류
강사님 강의를 따라하던 중 먼저 커뮤니티의 다른 분 같이 하나의 비지니스 계정만 뜨는 상황을 겪었습니다. 그 분이 진행했던 대로, 저 또한 그 비지니스 계정으로 app을 만들었고 sandbox에 ID값을 바꿔주었습니다. 하지만 그렇게 하면 바로 로그인 창이 뜨던 강사님과 달리 여전히 로그인 창이 뜨지 않는 오류를 겪었습니다. checkout.js:1664 POST https://www.sandbox.paypal.com/v1/payment-experience/web-profiles 401(익명) @ checkout.js:1664ZalgoPromise @ checkout.js:941request @ checkout.js:1603(익명) @ checkout.js:17462_proto.dispatch @ checkout.js:1016_proto.resolve @ checkout.js:968_proto.dispatch @ checkout.js:1036_proto.resolve @ checkout.js:968(익명) @ checkout.js:942(익명) @ checkout.js:1649load(비동기)(익명) @ checkout.js:1620ZalgoPromise @ checkout.js:941request @ checkout.js:1603(익명) @ checkout.js:17437(익명) @ checkout.js:6074(익명) @ checkout.js:17461(익명) @ checkout.js:6074(익명) @ checkout.js:17513ZalgoPromise.try @ checkout.js:1169(익명) @ checkout.js:17512_proto.dispatch @ checkout.js:1016_proto.resolve @ checkout.js:968_proto.dispatch @ checkout.js:1036_proto.resolve @ checkout.js:968(익명) @ checkout.js:942(익명) @ checkout.js:1649load(비동기)(익명) @ checkout.js:1620ZalgoPromise @ checkout.js:941request @ checkout.js:1603(익명) @ checkout.js:17437(익명) @ checkout.js:6074createPayment @ checkout.js:17511(익명) @ checkout.js:7031ZalgoPromise.try @ checkout.js:1169(익명) @ checkout.js:7030(익명) @ checkout.js:6454ZalgoPromise.try @ checkout.js:1169_RECEIVE_MESSAGE_TYPE.<computed> @ checkout.js:6451receiveMessage @ checkout.js:6520messageListener @ checkout.js:6542checkout.js:2088 ppxo_unhandled_error {stack: 'Error: Request to post https://www.sandbox.paypal.…s://www.paypalobjects.com/api/checkout.js:6542:9)', errtype: '[object Error]', timestamp: 1659963784699, windowID: '2526aef124', pageID: '107942d234', …}print @ checkout.js:2088log @ checkout.js:2181error @ checkout.js:2217(익명) @ checkout.js:25295(익명) @ checkout.js:988(익명) @ checkout.js:990setTimeout(비동기)_proto.reject @ checkout.js:981_proto.dispatch @ checkout.js:1022_proto.reject @ checkout.js:992_proto.dispatch @ checkout.js:1022_proto.reject @ checkout.js:992_proto.dispatch @ checkout.js:1028_proto.reject @ checkout.js:992(익명) @ checkout.js:1009_proto.dispatch @ checkout.js:1026_proto.reject @ checkout.js:992(익명) @ checkout.js:947respond @ checkout.js:6597_RECEIVE_MESSAGE_TYPE.<computed> @ checkout.js:6486receiveMessage @ checkout.js:6520messageListener @ checkout.js:6542checkout.js:6484 Uncaught Error: Request to post https://www.sandbox.paypal.com/v1/payment-experience/web-profiles failed with 401 error. Correlation id: 5a6ac701472aa { "name": "AUTHENTICATION_FAILURE", "debug_id": "5a6ac701472aa", "message": "Authentication failed due to invalid authentication credentials or a missing Authorization header", "information_link": "https://developer.paypal.com/docs/api/payment-experience/#errors", "details": []} at XMLHttpRequest.<anonymous> (checkout.js:1647:35) at _RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (checkout.js:6484:27) at receiveMessage (checkout.js:6520:60) at messageListener (checkout.js:6542:9) at _RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (checkout.js:6484:27) at receiveMessage (checkout.js:6520:60) at messageListener (checkout.js:6542:9)_RECEIVE_MESSAGE_TYPE.<computed> @ checkout.js:6484receiveMessage @ checkout.js:6520messageListener @ checkout.js:6542setTimeout(비동기)(익명) @ checkout.js:985(익명) @ checkout.js:990setTimeout(비동기)_proto.reject @ checkout.js:981_proto.dispatch @ checkout.js:1022_proto.reject @ checkout.js:992_proto.dispatch @ checkout.js:1022_proto.reject @ checkout.js:992_proto.dispatch @ checkout.js:1028_proto.reject @ checkout.js:992(익명) @ checkout.js:1009_proto.dispatch @ checkout.js:1026_proto.reject @ checkout.js:992(익명) @ checkout.js:947respond @ checkout.js:6597_RECEIVE_MESSAGE_TYPE.<computed> @ checkout.js:6486receiveMessage @ checkout.js:6520messageListener @ checkout.js:6542checkout.js:7123 Uncaught Error: Error: Request to post https://www.sandbox.paypal.com/v1/payment-experience/web-profiles failed with 401 error. Correlation id: 5a6ac701472aa { "name": "AUTHENTICATION_FAILURE", "debug_id": "5a6ac701472aa", "message": "Authentication failed due to invalid authentication credentials or a missing Authorization header", "information_link": "https://developer.paypal.com/docs/api/payment-experience/#errors", "details": []} at XMLHttpRequest.<anonymous> (checkout.js:1647:35) at _RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (checkout.js:6484:27) at receiveMessage (checkout.js:6520:60) at messageListener (checkout.js:6542:9) at _RECEIVE_MESSAGE_TYPE.<computed> [as postrobot_message_response] (checkout.js:6484:27) at receiveMessage (checkout.js:6520:60) at messageListener (checkout.js:6542:9) at checkout.js:7123:27 at checkout.js:7126:14 at checkout.js:6953:26 at checkout.js:6948:55 at checkout.js:6949:14 at replaceObject (checkout.js:6952:10) at checkout.js:6954:109 at checkout.js:6950:69 at checkout.js:6951:14 at replaceObject (checkout.js:6952:10) at checkout.js:6954:109 at checkout.js:6950:69 at checkout.js:6951:14 at replaceObject (checkout.js:6952:10) at deserializeMethods (checkout.js:7119:16) at receiveMessage (checkout.js:6519:70) at messageListener (checkout.js:6542:9) 콘솔창에는 이러한 오류가 떠있었고, 검색해봤지만 해결책을 찾진 못했습니다ㅜ 계속 고민하다 교수님의 github주소에 있는 sandboxID를 입력하니 로그인 창이 떴는데요, 제가 이대로 계속 진행해도 되는지 여쭤보고 싶습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm install이 안됩니다
ilerplate-mern-stack-master\boilerplate-mern-stack-master> 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 lockfilenpm WARN old lockfile This is a one-time fix-up, please be patient... npm WARN old lockfilenpm 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 chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependenciesnpm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecatednpm 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\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! command failednpm ERR! command C:\Windows\system32\cmd.exe /d /s /c C:\Users\SAMSUNG\AppData\Local\Temp\install-ca11b823.cmdnpm ERR! Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (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@17.4.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\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\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-v102-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-v102-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-v102-win32-x64-unknown.tar.gznpm ERR! node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.8 and node@17.4.0 (node-v102 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-v102-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@17.4.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@17.4.0 | win32 | x64npm ERR! gyp info find Python using Python version 3.10.2 found at "C:\Users\SAMSUNG\AppData\Local\Programs\Python\Python310\python.exe" npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! find VS msvs_version not set from command line or npm confignpm ERR! gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Promptnpm ERR! gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer, try re-running with '--loglevel silly' for more detailsnpm ERR! gyp ERR! find VS looking for Visual Studio 2015npm ERR! gyp ERR! find VS - not foundnpm ERR! gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! find VS **************************************************************npm ERR! gyp ERR! find VS You need to install the latest version of Visual Studionpm 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-windowsnpm ERR! gyp ERR! find VS **************************************************************npm ERR! gyp ERR! find VSnpm ERR! gyp ERR! configure errornpm ERR! gyp ERR! stack Error: Could not find any Visual Studio installation to usenpm ERR! gyp ERR! stack at VisualStudioFinder.fail (C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:122:47)npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\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\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:363:14)npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:71:14 npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\find-visualstudio.js:384:16 npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:54:7npm ERR! gyp ERR! stack at C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\util.js:33:16npm ERR! gyp ERR! stack at ChildProcess.exithandler (node:child_process:406:5)npm ERR! gyp ERR! stack at ChildProcess.emit (node:events:520:28) npm ERR! gyp ERR! stack at maybeClose (node:internal/child_process:1090:16)npm ERR! gyp ERR! System Windows_NT 10.0.19044npm ERR! gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\SAMSUNG\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "--fallback-to-build" "--module=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding\\bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=C:\\Users\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\boilerplate-mern-stack-master\\node_modules\\bcrypt\\lib\\binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v102"npm ERR! gyp ERR! cwd C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! gyp ERR! node -v v17.4.0npm ERR! gyp ERR! node-gyp -v v9.0.0npm ERR! gyp ERR! not oknpm ERR! node-pre-gyp ERR! build errornpm ERR! node-pre-gyp ERR! stack Error: Failed to execute 'C:\Program Files\nodejs\node.exe C:\Users\SAMSUNG\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js configure --fallback-to-build --module=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding\bcrypt_lib.node --module_name=bcrypt_lib --module_path=C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcrypt\lib\binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v102' (1)npm ERR! node-pre-gyp ERR! stack at ChildProcess.<anonymous> (C:\Users\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\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:520:28)npm ERR! node-pre-gyp ERR! stack at maybeClose (node:internal/child_process:1090: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\\SAMSUNG\\OneDrive\\바탕 화면\\PersonalProjects\\WebProjects\\boilerplate-mern-stack-master\\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\SAMSUNG\OneDrive\바탕 화면\PersonalProjects\WebProjects\boilerplate-mern-stack-master\boilerplate-mern-stack-master\node_modules\bcryptnpm ERR! node-pre-gyp ERR! node -v v17.4.0npm ERR! node-pre-gyp ERR! node-pre-gyp -v v0.14.0npm ERR! node-pre-gyp ERR! not ok npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\SAMSUNG\AppData\Local\npm-cache\_logs\2022-08-08T08_26_57_475Z-debug-0.log vscode는 최신버전을 사용중이고 node -v v17.4.0 npm -v 8.16.0 를 사용하고 있습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
회원가입 할때 서버 403 에러 뜹니다
회원 가입 폼 submit 을 누르면 콘솔에 첨부한 사진과 같이 403 error 가 뜨면서 페이지가 넘어가질 않습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
router query 관련 질문입니다!
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요! 강의를 듣던 도중 router주소를 정하는데 있어서 궁금증이 들어서 질문하게 되었습니다. export function removeCartItem(productId) { const request = axios.get(`/api/users/removeFromCart?id=${productId}`) .then(response => { //productInfo , cart 정보를 조합해서 CartDetail을 만든다. response.data.cart.forEach(item => { response.data.productInfo.forEach((product, index) => { if (item.id === product._id) { response.data.productInfo[index].quantity = item.quantity } }) }) return response.data; }); return { type: REMOVE_CART_ITEM, payload: request } } export function onSuccessBuy(data) { const request = axios.post(`/api/users/successBuy`, data) .then(response => response.data); return { type: ON_SUCCESS_BUY, payload: request } } 위의 코드에서 onSuccessBuy 함수에서는 data로 상품 정보등을 보내주었는데, removeCartItem함수에서도 마찬가지로 복잡하게 서버에서 query 정보를 가지고 id를 추출하는 대신, get 대신 post를 쓰고 id정보가 담긴 객체를 보내주는 방법을 사용해도 될까요?? 항상 좋은 강의해주셔서 감사합니다! 앞으로 남은 강의도 열심히 듣겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm이 설치가 안됩니다..
ㅇ 루트 디렉토리에서 npm이 설치가 안되요 client는 되는데요. 선생님 도와주세요제발요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
선생님 업로드 문제가 있습니다..
선생님 깃허브에 올린 파일 그대로 사용해 업로드해도 똑같은 504 문제가 생깁니다. 검색해보면 다른 사람들도 이 문제를 겪고 있는데 mongo db에 문제인것같은데 뭐가 문제인지 모르겠어요. 자세히 설명해주세요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 업로드하면 안나와요
이미지 업로드하면 안나와요 크롬console에는 이렇게 나오네요 ncaught (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)createError @ createError.js:16settle @ settle.js:17handleLoad @ xhr.js:61Promise.then (async)dropHandler @ FileUpload.js:19(anonymous) @ index.js:708(anonymous) @ index.js:759Promise.then (async)(anonymous) @ index.js:758(anonymous) @ index.js:831(anonymous) @ index.js:192(anonymous) @ index.js:190callCallback @ react-dom.development.js:188invokeGuardedCallbackDev @ react-dom.development.js:237invokeGuardedCallback @ react-dom.development.js:292invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306executeDispatch @ react-dom.development.js:389executeDispatchesInOrder @ react-dom.development.js:414executeDispatchesAndRelease @ react-dom.development.js:3278executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287forEachAccumulated @ react-dom.development.js:3259runEventsInBatch @ react-dom.development.js:3304runExtractedPluginEventsInBatch @ react-dom.development.js:3514handleTopLevel @ react-dom.development.js:3558batchedEventUpdates$1 @ react-dom.development.js:21871batchedEventUpdates @ react-dom.development.js:795dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568attemptToDispatchEvent @ react-dom.development.js:4267dispatchEvent @ react-dom.development.js:4189unstable_runWithPriority @ scheduler.development.js:653runWithPriority$1 @ react-dom.development.js:11039discreteUpdates$1 @ react-dom.development.js:21887discreteUpdates @ react-dom.development.js:806dispatchDiscreteEvent @ react-dom.development.js:4168xhr.js:178 POST http://localhost:3000/api/product/image 504 (Gateway Timeout)dispatchXhrRequest @ xhr.js:178xhrAdapter @ xhr.js:12dispatchRequest @ dispatchRequest.js:52Promise.then (async)request @ Axios.js:61Axios.<computed> @ Axios.js:86wrap @ bind.js:9dropHandler @ FileUpload.js:19(anonymous) @ index.js:708(anonymous) @ index.js:759Promise.then (async)(anonymous) @ index.js:758(anonymous) @ index.js:831(anonymous) @ index.js:192(anonymous) @ index.js:190callCallback @ react-dom.development.js:188invokeGuardedCallbackDev @ react-dom.development.js:237invokeGuardedCallback @ react-dom.development.js:292invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:306executeDispatch @ react-dom.development.js:389executeDispatchesInOrder @ react-dom.development.js:414executeDispatchesAndRelease @ react-dom.development.js:3278executeDispatchesAndReleaseTopLevel @ react-dom.development.js:3287forEachAccumulated @ react-dom.development.js:3259runEventsInBatch @ react-dom.development.js:3304runExtractedPluginEventsInBatch @ react-dom.development.js:3514handleTopLevel @ react-dom.development.js:3558batchedEventUpdates$1 @ react-dom.development.js:21871batchedEventUpdates @ react-dom.development.js:795dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3568attemptToDispatchEvent @ react-dom.development.js:4267dispatchEvent @ react-dom.development.js:4189unstable_runWithPriority @ scheduler.development.js:653runWithPriority$1 @ react-dom.development.js:11039discreteUpdates$1 @ react-dom.development.js:21887discreteUpdates @ react-dom.development.js:806dispatchDiscreteEvent @ react-dom.development.js:4168createError.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)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 시 nodemon app crashed 오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Icon으로 shooping-cart가 안보이면
<Icon type="shopping-cart" /> 대신import { Icon } from '@iconify/react'; <Icon icon="ant-design:shopping-cart-outlined" />사용하시면 잘 나옵니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 실행 불가
npm run de는 오류가 뜨고 npm run dev 말고 npm run backend를 통해 서버(몽고디비쪽) 만 따로 실행시키면 Server Listening on 5000MongoDB Connected... 라고 확인이 됩니다. 그러나 npm run start --prefix client 를 통해 프론트를 실행시키면 node:events:505 throw er; // Unhandled 'error' event ^ Error: spawn cmd ENOENT at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19) at onErrorNT (node:internal/child_process:478:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) Emitted 'error' event on ChildProcess instance at: at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12) at onErrorNT (node:internal/child_process:478:16) at processTicksAndRejections (node:internal/process/task_queues:83:21) { errno: -4058, code: 'ENOENT', syscall: 'spawn cmd', path: 'cmd', spawnargs: [ '/s', '/c', 'start', '""', '/b', '"http://localhost:3000"' ] 라고 뜨네요. 아래사진은 npm run dev 했을때의 상태 입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
안녕하세요! 관리자화면을 만들고 싶은데..
안녕하세요. 모든 강의를 수강했고, 저만의 포트폴리오로 만들기 위해 여기저기 손을 보고 있습니다. 기초강의를 듣긴 했지만 isAdmin 속성을 건드렸는지 기억이 안나요ㅠㅠ 근데 이미 만들어진 로그인/로그아웃 소스부터 시작할때에, user 라우터에 /auth 로 맵핑되어있는 소스를 보니 isAdmin 속성이 있고, 0과 1로 관리자를 구분하는 것 같더라구요 그런데 어느 코드를 건드려야 내가 지정한 아이디를 관리자로 설정하고 isAdmin을 1로 전송할 수 있을까요? 또, right menu에서 관리자만 Upload 메뉴를 볼 수 있게 하려면 else if(user.userData && user.userData.isAuth && user.userData.isAdmin === '1') { upload 메뉴만... } 이런식으로 적는게 맞을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev 할 때
강의에서 보면 폴더가 REACT-SHOP-KO 로 되어 있는데 전 강의에서는 BOILERPLATE 로 되어 있어서 헷갈리네요. 따로 리액트 폴더를 새로 만들어서 거기서 npm run dev 를 해야 하는 건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
질문있습니다
아직 수업을 다들은게 아니지만 제가 이 보일러플레이트를 통해 홈페이지를 만들어 배포를 하고싶다면 혹시 어떻게 해야할까요???
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드가 아닌 antd Table을 이용해서 하려는데 도와주세요ㅠㅠ
안녕하세요, 선생님. 선생님 수업 기본강의부터 쇼핑몰만들기까지하여 여러번 수강중인 학생입니다. 천천히 너무 자세하게 알려주셔서 많은 도움이 되고 있습니다 :) 제가 이 수업을 들으면서 목표한게 있는데요, 회사의 재고장을 실시간으로 확인할 수 있도록 웹기만으로 만드는 것이었습니다. 그래서 선생님 수업들으면서 이것저것 응용하고 바꿔가며 만들고 있는데요~ 문제에 봉착했습니다 ㅠㅠ ANT Design 사용하여 Card사용을 하셨는데, 저는 Table을 사용하려고 하여 쭉 코드를 작성하였습니다. 총 업로드를 5개를 하였는데, 칸은 5개가 생겼는데 테이블 안에 내용은 보이지 않아서요 ㅠㅠ 어디가 잘못된 걸까요... 컨솔창 키면 정상적으로 상품정보가 랜딩페이지로 넘어오는데 표기가 안되고 있어요. 제가 작성한 코드는 아래와 같습니다. import React, { useEffect, useState } from 'react' import { FaCode } from "react-icons/fa"; import axios from "axios"; import { Card, Button, Col, Row, Table } from 'antd'; import { SketchOutlined } from '@ant-design/icons'; function LandingPage() { const [Products, setProducts] = useState ([]); useEffect(()=> { axios.post('/api/product/products') .then(response => { if (response.data.success) { setProducts(response.data.productInfo) } else { alert("상품을 가져오는데 실패하였습니다.") } }) }, []) const data = Products.map ((product, index) => ( [{ item: product.item, grade: product.grade, price: product.price, box: product.box, key: '1' }] )) const columns = [ { title: '품명', dataIndex: 'item', key:'key', render: item =>{ return <a>{item}</a> } }, { title: '등급', dataIndex: 'grade', key:'key' }, { title: '수량', dataIndex: 'box', key:'key' }, { title: '가격(원)', dataIndex: 'price', key:'key' } ] console.log('products', Products) return ( <div style={{ width: '75%', margin: '3rem auto' }}> <div style={{ textAlign: 'center' }}> <h2> 재고자료 <SketchOutlined /></h2> <h3>재고 LIST</h3> </div> {/* Filter */} {/* Search */} {/* Table */} <Table dataSource={data} columns={columns} /> <br /> <br /> <div style={{ display: 'flex', justifyContent: 'center' }}> <Button type="primary">See More</Button> </div> </div> ) } export default LandingPage 번거로우시겠지만, 알려주시면 너무 감사드리겠습니다ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
업로드페이지만들기시작 로그인 질문
- 회원가입 시도하면 사진처럼 서버에서 에러가 나서 회원가입이 진행이 안되는데 이건 어떻게 해결해야 하나요??