무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인은 되는데 로그아웃이 안되네요
이렇게 에러가 뜨는데 어떻게 해야하나요 ㅜ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
dispatch 뒤에 .then(response ~~~)에서 response 가 리듀서가 return 하는 값인가요?
dispatch 하면 dispatch(), ( ) 사이에 액션이 들어가고 리듀서함수를 호출하면 결과적으로 리듀서가 리턴하는 현재로선 case LOGIN_USER: return { ...state, loginSuccess: action.payload } <-- 이부분이 resonse로 나오는 건가요? break;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run start시 new TextEncoder(); 에러 납니다.ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.{ "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node index.js", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "express": "^4.17.1", "mongodb": "^4.1.4", "body-parser": "^1.19.0", "mongoose": "^6.0.13" } } 위에는 package.json이고 index.js에 const mongoose = require('mongoose'); 넣기만해도 아래와같이 에러납니다. 왜그런걸까요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
userSchema.statics.findByToken
userSchema.statics.findByToken 에서 왜 이거는 정적함수로 만드는건가요? 앞에 comparePassword, generateToken 메소드 만드는것과 왜 방법이 다른가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
monggoose schema instance methods 작성시 화살표함수
Do not declare methods using ES6 arrow functions (=>). Arrow functions explicitly prevent binding this, so your method will not have access to the document and the above examples will not work. monggoose schema instance methods 작성시 화살표함수를 쓰게 되면 this는 무엇을 가르키나요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
redux devtools 에 action 은 넘어오는데 넘어온 payload가 state에 가지는 않습니다.
일단 본론 부터 말씀드리면 redux devtools 에 action 은 넘어오는데, 넘어온 값이 state 에 가지는 않습니다. 과정을 나열해보자면, user_action 에서 post 로 로그인 정보를 보내고 requset 를 받아와서 그 값을 LoginPage(로그인페이지)에서 onSubmitHandler에서 dispatch 해주는 과정에서는 이상이 없는 것 같습니다. 그래서 redux devtools 에서도 정상적으로 action 이 나오구요, db도 잘 연결되어 있는 것 같습니다. 그러면 reducer 쪽이 문제란 소린데, 정상적으로 action 객체 받아와서 그냥 state에 action.payload를 넣어주기만 하면 되는데 안된단 말이죠? ;; 왜 그럴까요?... 정말 궁금합니다. 깃헙 주소입니닫 https://github.com/BomUlUL/NodeReact 위 사진들로만 보셔도 될 것 같습니다!
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
push 에러 나오시는 분들~
버전 문제인데, 리액트 라우터 버전 v6 사용하시면 아래처럼 하시면 됩니다. 1.import import { useNavigate } from 'react-router-dom'; 2. 함수 안에 변수 추가 let navigate = useNavigate(); 3. dispatch -> then navigate('/home'); 관련 링크 입니다. https://www.digitalocean.com/community/tutorials/react-react-router-v6
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
e.currentTarget.value 가 안먹히면 e.target.value 로 하시면 됩니다.
그렇습니다 하하하
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
express 4.x버전부터는 express에 bodyParser가 내장됩니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. .
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
덕분에 완강하였습니다.
허나 강의를 촬영하신 시기와 지금의 차이가 있어서 그런지 강의 내용보다 버전차이에서 오는 다름을 찾는 것이 더욱 어려웠던 강의입니다. 그래서 강사님의 깃 중 https://github.com/jaewonhimnae/boiler-plate-ko을 클론하여 완벽히 돌아가는 상태를 보려고 하는데 config폴더에 dev.js를 잘 넣고 맞는 디렉토리에서 npm install을 하였습니다. 하지만 이리저리 시도를 해봐도 npm install에서 다량의 오류가 발생하여 답답해하던 중 여기에 질문을 올려봅니다. ero@Kimui-MacBookAir:~/Downloads/boiler-plate-ko-master » npm install > bcrypt@3.0.7 install /Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt > node-pre-gyp install --fallback-to-build node-pre-gyp WARN Using needle for node-pre-gyp https download node-pre-gyp WARN Tried to download(404): https://github.com/kelektiv/node.bcrypt.js/releases/download/v3.0.7/bcrypt_lib-v3.0.7-node-v83-darwin-x64-unknown.tar.gz node-pre-gyp WARN Pre-built binaries not found for bcrypt@3.0.7 and node@14.18.1 (node-v83 ABI, unknown) (falling back to source compile with node-gyp) No receipt for 'com.apple.pkg.CLTools_Executables' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLILeo' found at '/'. No receipt for 'com.apple.pkg.DeveloperToolsCLI' found at '/'. gyp: No Xcode or CLT version detected! gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit (/usr/local/lib/node_modules/npm/node_modules/node-gyp/lib/configure.js:351:16) gyp ERR! stack at ChildProcess.emit (events.js:400:28) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:282:12) gyp ERR! System Darwin 20.6.0 gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js" "configure" "--fallback-to-build" "--module=/Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt/lib/binding/bcrypt_lib.node" "--module_name=bcrypt_lib" "--module_path=/Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt/lib/binding" "--napi_version=8" "--node_abi_napi=napi" "--napi_build_version=0" "--node_napi_label=node-v83" gyp ERR! cwd /Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt gyp ERR! node -v v14.18.1 gyp ERR! node-gyp -v v5.1.0 gyp ERR! not ok node-pre-gyp ERR! build error node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt/lib/binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) node-pre-gyp ERR! stack at ChildProcess.<anonymous> (/Users/ero/Downloads/boiler-plate-ko-master/node_modules/node-pre-gyp/lib/util/compile.js:83:29) node-pre-gyp ERR! stack at ChildProcess.emit (events.js:400:28) node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1058:16) node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:293:5) node-pre-gyp ERR! System Darwin 20.6.0 node-pre-gyp ERR! command "/usr/local/bin/node" "/Users/ero/Downloads/boiler-plate-ko-master/node_modules/.bin/node-pre-gyp" "install" "--fallback-to-build" node-pre-gyp ERR! cwd /Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt node-pre-gyp ERR! node -v v14.18.1 node-pre-gyp ERR! node-pre-gyp -v v0.13.0 node-pre-gyp ERR! not ok Failed to execute '/usr/local/bin/node /usr/local/lib/node_modules/npm/node_modules/node-gyp/bin/node-gyp.js configure --fallback-to-build --module=/Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt/lib/binding/bcrypt_lib.node --module_name=bcrypt_lib --module_path=/Users/ero/Downloads/boiler-plate-ko-master/node_modules/bcrypt/lib/binding --napi_version=8 --node_abi_napi=napi --napi_build_version=0 --node_napi_label=node-v83' (1) npm WARN boiler-plate@1.0.0 No description npm WARN boiler-plate@1.0.0 No repository field. npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! bcrypt@3.0.7 install: `node-pre-gyp install --fallback-to-build` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the bcrypt@3.0.7 install script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. npm ERR! A complete log of this run can be found in: npm ERR! /Users/ero/.npm/_logs/2021-11-12T19_29_54_727Z-debug.log
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하세요 Error occurred while proxying request 에러 발생. 3시간째 고민중입니다ㅠ
proxy가 정상작동하는 건 확인했습니다만 아래 에러와 같이 requeset가 실패했다고 하고 status 500 에러가 뜨는데 500 에러는 주로 서버 문제라고 들었습니다.. 그래서 서버랑 클라이언트 둘다 올려봅니다. 클라이언트 랜딩페이지 글이 잘 나오는 걸로 봐서는 서버 문제인것 같습니다..! index.js(서버) 깃헙주소입니다! https://github.com/BomUlUL/NodeReact 항상 감사합니다! ----추가!!!! 다시 보니 proxy문제인것 같습니다 "Error occurred while proxying request noderea tlogin-yqvpb.run.goorm.io/api/hello to https://localhost:5000/" 이렇게 뜨네요 서버랑 클라이언트 둘다 켜져있는데 도대체 왜 안되는건지.. 머리 터질것 같습니단 ㅠ 브라우저 ide를 쓰니 주소가 nodereatlogin-yqvpb.run.goorm.io/api/hello 이렇게 뜹니다. 여기서 localhost5000으로 돌려주는게 아닌가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
인증 체크 부분 app..js 부분 질문이요
안녕하세요 좋은 강의 잘 들었습니다:) 다름이 아니라 제가 강의를 들으며 실습을 병행해 공부를 하는 중인데요 강의가 열리고 react-router-dom이 업데이트되어서 인지 제 컴퓨터에서는 app.js에서 Switch를 사용하면 진행이 되지 않아 구글링 한 결과로 <Routes>를 사용하고 <Rounte component >대신 < element >를 사용해서 학습을 진행해왔었습니다. 그런데 마지막 인증 체크 부분 강의를 들으면서 문제가 생겼는데요 app.js에서 auth를 어떻게 적용해야 할 지 잘 모르겠습니다. 강사님의 코드를 따라하기엔 저는 component를 사용해서 적용이 안되는 것 같습니다. 구글링을 해봐도 해결할 수 없어 질문글을 남깁니다 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그아웃 시 success 뜨는데 DB에서 토큰이 안지워져요ㅠㅠ
postman에서 log out을 하면 success message는 뜨는데 DB의 token은 안지워져서요ㅠㅠ 전에 다른분이 올리신 문의글에 답변주신 것 보고 코드 복사해서 실행해봤는데도 DB에서 토큰이 안지워져요ㅠㅠㅠㅠ체크해야할 부분이 또 있을까요? 아래는 포스트맨 결과값입니다..!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
reducer관련 질문 드립니다.
강의 감사하게 잘 듣고 있습니다.action에서 reducer로 어떻게 연결되는지 몰라서 같은 질문이 있나 찾아 봤는데 아래와 같은 답변을 해 주셨습니다만 잘 이해가 안되서 다시 문의 드립니다.1. action파일에서 return을 하면 user_reducer.js의 function이 호출되는 이유를 모르겠습니다. 2. 그리고 덧붙여서 user_reducer.js의 함수의 첫번째 인자는 prestate가 들어온다고 배웠는데 여기서 state = {} 로 초기화를 하는건 이전 상태를 받기 전에 초기화를 한다는 의미 인가요? 그렇다면 같은 객체를 담는 action은 안해도 되는건지요? 3. LoginPage 함수의 props는 어디서 받는건가요?1번의 강사님 답변1. 파일을 찾아가는건 결국은 TYPE을 통해서 인데, 우선 dispatch를 통해서 action으로 오면 action에서 할일을 한 후에 저희가 combineReducers로 설정해 준 부분으로 가서 type에 따라서 case 조건문에서 걸러져서 return 값을 내는 형태입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
create-react-app 설치시 npm 은 안되고 npx는 되는 이유
위와 같이 npm으로 cra를 install 할때는 안되고, npx로 cra를 install 할때는 됬습니다. npm 으로 설치할때는 client에 package.json 파일이 없다고 안된다던데, npx 로 설치할때는 나중에 package.json 파일을 설치까지 해주더군요 혹시 이유 아실까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
루트 디렉토리안의 client 폴더에 cra를 설치할 때 맨뒤에 . 을 붙이지 않으면 client 폴더가 아니라 루트 디렉토리에 cra가 설치되나요??
npm install create-react-app . 에서 루트 디렉토리안의 client 폴더에 cra를 설치할 때, client로 이동한 상태에서 명령어를 실행할때 맨뒤에 . 을 붙이지 않으면 client 폴더가 아니라 루트 디렉토리에 cra가 설치되나요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
페이지에 아무것도 안 뜨네요...
login이나 register나 페이지에 들어가면 아무것도 안 뜨네요... ==App.js== //import React from 'react'; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import LandingPage from './components/views/LandingPage/LandingPage.js' import LoginPage from './components/views/LoginPage/LoginPage.js' import Registerpage from './components/views/RegisterPage/RegisterPage.js' function App() { return ( <Router> <div> <Routes> <Route exact path="/" component={LandingPage} /> <Route exact path="/login" component={LoginPage} /> <Route exact path="/register" component={Registerpage} /> </Routes> </div> </Router> ); } export default App; ==LandingPage.js import React,{ useEffect} from 'react' import axios from 'axios'; function LandingPage() { useEffect(() => { axios.get('/api/hello') .then(response => console.log(response.data)) }, []) return ( <div> <h3>LandingPage 랜딩페이지</h3> </div> ) } export default LandingPage ==LoginPage== import React from 'react' function LoginPage() { return ( <div> LoginPage </div> ) } export default LoginPage
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
오류가 뜹니다.
코드를 컴파일하고 실행하면 vscode자체에서는 실행이 되는데 정작 localhost:3000에 접속하면 이렇게 뜹니다. 소스코드는 아래와 같습니다. import React from 'react'; import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; function App() { return ( <Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="about">About</Link> </li> <li> <Link to="dashboard">Dashboard</Link> </li> </ul> <hr /> <Routes> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Routes> </div> </Router> ); } export default App; function Home() { return ( <div> <h2>Home</h2> </div> ); } function About() { return ( <div> <h2>About</h2> </div> ); } function Dashboard() { return ( <div> <h2>Dashboard</h2> </div> ); }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
30강 로그인 질문
안녕하세요. 정말 잘 보고 있습니다. mongo db에서 register로 위와 같은 아이디, 비밀번호로 등록을 해주었는데 왜인지 모르겠지만 위와 같은 오류로 로그인 다음을 진행할 수 없는 상황입니다. - 이메일 주소 속의 @를 읽지 못하고 있으며 - 이상하게 비밀번호인 1234567에다가 @를 넣으라는 오류인데 조언을 구할 수 있을까요? 우선 postman을 통해 비밀번호에 @가 들어가게 다시 register 해줄 계획이긴한데, 이게 본질적인 해결은 아닐 것 같아서 조언 구해봅니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
mongoDB 의 모델의 역할
module.exports = mongoose.model('User', userSchema) 와 같은 스키마를 감싼 모델(mongodb의 컬렉션)을 이용하면const user = new User(req.body) 와 같이 req 정보를 이용하여 모델 인스턴스를 만든다음에이걸 다시 save 메서드를 통해 mongoDB의 User(users) 컬렉션에 저장할 수도 있고,User.findOne({ email: req.body.email }, (err, user) => { //요청한 email이 db정보 안에 있을 때 해당 db정보를 담은 객체 user 가 생성된다. if (!user) { return res.json({ loginSuccess: false, message: "제공된 이메일에 해당하는 유저가 없습니다." }) }와 같이 User(users)컬렉션에 접근(조회)하여 해당 객체를 찾을 수도 있다. 결론: mongoDB의 모델은 모델 인스턴스를 생성할 수도 있고, DB에 접근하여 값을 조회,수정 등등을 할 수 있다라고 이해했는데 맞는 것인지 궁금합니다. 역할이 다양한게 조금 헷갈려서 질문드립니다.