33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
카드 만드는거 질문있습니다
렌딩페이지만들기 - 카드만들기 강의 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가 안된대요 이럴땐 어떻게 해야하나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
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를 입력하니 로그인 창이 떴는데요, 제가 이대로 계속 진행해도 되는지 여쭤보고 싶습니다.