33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
영상 5분 쯤 Product 에 대한 자동완성(intellisense) 기능
너무 초보적인 질문 같아서 죄송합니다^^ 선언부분 const { Product } = require("../models/Product"); Product.find().populate("writer").exec().... 부분에서 강사님은 Product. 까지 누르면 find() 메소드를 포함한 그 외 메소드가 활성화 되는데(populate도 마찬가지) 저는 자동완성이 안됩니다. user.js 파일의 User. 와 관련된 findOne(), findOneAndUpdate() 같은 메소드도 자동 완서으로 보이지 않습니다. product.js 파일에서 express 모듈, router모듈, multer모듈 은 모두 자동완성 기능이 됩니다. express. 하면 메소드 자동 완성 기능이 활성화 됩니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
오타 수정(회원가입 오류 나시는분들 포함)
오타 때문에 몽고DB연결이 안되는것 같은데 수정해주셔야 할것 같아요!연결할떄 : mongoURI dev.js : MONGO_URI dev.js에서 mongoURI 로 변경하시면 디비 연결 오류는 해결됩니다~! 오타떄문에 디비연결이 안되서 회원가입이 안되었네요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
업로드 페이지 후 로그아웃화면(LandingPage)로 강제 이동되는 경우 해결책
안녕하세요 강사님이 올려주신 git을 다운 받으신 분들은 상관 없으시겠지만, 저처럼 강사님의 기본강의(로그인, 회원가입, 로그아웃, 인증 부분)으로 바로 넘어오신 분들 중 혹시 막히신 분들이 계실까 해서 남깁니다 * 문제 1 : App.js에서 uploadProductPage를 true로 했으나 로그인 후 'localhost:3000/'으로 강제 이동하는 경우 * 해결책 : hoc/auth 수정할 것 [hoc/auth.js] - else 부분에 추가 import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { auth } from "../_actions/user_action"; import { useNavigate } from "react-router-dom"; export default function (SpecificComponent, option, adminRoute = null) { //backned의 그 사람의 현재 상태 확인 //api/user/auth로 정보 보내기 //null : 아무나 출입 가능 //option이 true : 로그인 한 사람만 출입 가능 //option이 false : 로그인한 유저는 출입 불가능 function AuthentificationCheck(props) { const dispatch = useDispatch(); const navigate = useNavigate(); let user = useSelector((state) => state.user); useEffect(() => { dispatch(auth()).then(async (response) => { console.log(response); //로그인 하지 않은 상태 if (await !response.payload.isAuth) { if (option === true) { //로그인으로 이동 시 navigate("/login"); //로그인페이지로 가게 함 } } else { //response.payload.isAuth = true //로그인한 상태(로그인페이지, 회원가입 페이지 이동하지 않아야 함) if (adminRoute && !response.payload.isAdmin) { //option이 true일 때 navigate("/"); } else { //option이 false일 때 //false상태 if (option === false) { props.history.push("/"); } } } }); }, []); return <SpecificComponent />; } return <AuthentificationCheck />; } * 문제 2 : RightMenu.js와 LeftMenu.js에서 warning.js:6 Warning: [antd: Menu] `children` will be removed in next major version. Please use `items` instead. 발생하는 경우 * 해결책 : https://ant.design/components/menu/ 참고하기 [RightMenu.js] import React from "react"; import { Menu } from "antd"; import axios from "axios"; import { USER_SERVER } from "../../../../Config"; // import { withRouter } from "react-router-dom"; import { useSelector } from "react-redux"; import { useNavigate } from "react-router-dom"; const items = [ { label: <a href="/login">Signin</a>, key: "mail" }, { label: <a href="/register">Signup</a>, key: "app" }, ]; const logInItems = [ { label: <a href="/product/upload">upload</a>, key: "upload" }, { label: <a href="/">logout</a>, key: "logout", }, ]; function RightMenu(props) { const navigate = useNavigate(); const user = useSelector((state) => state.user); const logoutHandler = () => { axios.get(`${USER_SERVER}/logout`).then((response) => { if (response.status === 200) { navigate("/login"); } else { alert("Log Out Failed"); } }); }; if (user.userData && !user.userData.isAuth) { return <Menu mode="horizontal" items={items} />; } else { return ( <Menu mode="horizontal" items={logInItems} onClick={logoutHandler} /> ); } } export default RightMenu; // export default withRouter(RightMenu); [ LeftMenu.js] import React from "react"; import { Menu } from "antd"; const items = [ { label: <a href="/">Home</a>, key: "mail" }, { label: <a href="/blog">Blogs</a>, key: "app" }, ]; function LeftMenu(props) { return <Menu mode="horizontal" items={items} />; } export default LeftMenu;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
이미지 로딩 오류(ERR_SSL_PROTOCOL_ERROR)
안녕하세요 강의를 듣다가 이미지 로딩에 계속 문제가 생겨 문의 드립니다. * 오류 (ERR_SSL_PROTOCOL_ERROR) - 이미지 등록 시 uploads 폴더에서 이미지 확인됨 - ERR_SSL_PROTOCOL_ERROR -> 해당 출처(https://onna.kr/484)를 통해 한 번씩 다 시도해봄 Client - FileUpload.js import React, { useState } from "react"; import Dropzone from "react-dropzone"; import { PlusOutlined } from "@ant-design/icons"; import axios from "axios"; function FilUpload() { //저장하기 전 state에 저장 const [Images, setImages] = useState([]); const dropHandler = (files) => { let formData = new FormData(); const config = { header: { "content-type": "multipart/form-data" }, }; formData.append("file", files[0]); axios.post("/api/product/image", formData, config).then((response) => { if (response.data.success) { // console.log(response.data); //원래있던 이미지 다 넣게 됨 setImages([...Images, response.data.filePath]); } 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", alignSelf: "center", justifyContent: "center", }} {...getRootProps()} > <input {...getInputProps()} /> <PlusOutlined style={{ fontSize: "3rem", display: "flex", alignSelf: "center" }} /> </div> )} </Dropzone> <div style={{ display: "flex", width: "350px", height: "240px", overflow: "scroll", }} > {Images.map((image, index) => { return ( //key 없으면Each child in a list should have a unique "key" prop. 오류 발생 <div key={index}> <img style={{ minWidth: "300px", width: "300px", height: "240px" }} src={`https://localhost:5000/${image}`} /> </div> ); })} </div> </div> ); } export default FilUpload; Server - index.js app.use("/api/product", require("./routes/product")); app.use("/uploads", express.static("uploads")); - routes/product const express = require("express"); const router = express.Router(); const multer = require("multer"); const storage = multer.diskStorage({ destination: (req, file, cb) => { cb(null, "uploads/"); }, filename: function (req, file, cb) { cb(null, `${Date.now()}_${file.originalname}`); }, }); const upload = multer({ storage: storage }).single("file"); router.post("/image", (req, res) => { upload(req, res, (err) => { console.log("filePath", res.req.file.path); console.log("fileName", res.req.file.filename); 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;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
검색할 때
SearchFeature에서 부모컴퍼넌트로 값을 넘겨줄때요 LandingPage에서는 한단계씩 느리게 받는데 이걸 어떻게 해결해야하나요?? searchFeatrue에서 12를 state값에 넣으면 landingPage SearchTerm State값은 1밖에 안들어와있어요 그래서 사이트에서 검색할때 12를 검색하려면 12 스페이스바 눌러야 12검색이되는데 제가 실수를해서 저만 그런건가요>?? 원래그런거면 무슨방법이있을까요? 부모컴퍼넌트로 넘기지말고 searchfeature.js에서 바로 서버로 보내야할까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
maxHeight 질문
Upload를 여러개해보니 card들이 이상하게 보여서 maxHeight를 낮춰보니 화면에 제대로 나왔습니다. 이런 px단위 문제는 어떻게 하면 되는지 궁금합니다.!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
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 연결은 잘 되있습니다...