무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
고수분들의 도움이 필요합니다.
11~12강에서 로그인기능을 구현할때 User.comparePassword is not a function라는 타입에러가 뜹니다.stackoverflow, google등 여러 방책을 찾아봤지만 도대체 왜 User.comparePassword가 function으로 인식이 안되는지 모르겠습니다.method명이 중복되어있지도 않고 User.js를 server.js에서 잘 받아오고 User객체로 접근하는 것인데 왜 함수가 아니라고 뜨는 걸까요. 제가 뭔가 착각하고 있는것 같은데 그게 뭔지 잘 모르겠습니다. 생각보다 간단한 오류인것 같은데 말이죠... 이러한 오류가 뜹니다.node:events:491 throw er; // Unhandled 'error' event ^ TypeError: User.comparePassword is not a function at /Users/choeeunchong/Documents/develop/react_node/server.js:70:10 at /Users/choeeunchong/Documents/develop/react_node/node_modules/mongoose/lib/model.js:5207:18 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) Emitted 'error' event on Function instance at: at /Users/choeeunchong/Documents/develop/react_node/node_modules/mongoose/lib/model.js:5209:15 at process.processTicksAndRejections (node:internal/process/task_queues:77:11) Node.js v18.11.0 server.js(index.js)[nodemon] starting `node server.js` listening on 8888 MonogeDB Conneted... compare 들어가기전. asd12345디버깅을 통해서 server.js에서 로그인 기능 중, comparepassword으로 들어가기 직전까지는 잘 들어가는 것으로 확인을 했습니다. const { User } = require("./models/User"); //로그인 기능 app.post("/login", function (req, res) { //console.log(req.body); //1. 입력된 이메일이 db에 있는지 확인한다. User.findOne({ email: req.body.email }, (err, user) => { if (!user) { return res.json({ loginSuccess: false, message: "입력된 이메일에 해당하는 유저가 없습니다.", }); } console.log("compare 들어가기전."); //2. 이메일에 해당하는 패드워드가 일치하는지 확인한다. console.log(req.body.password); User.comparePassword(req.body.password, (err, isMatch) => { console.log("comparePassword 안."); if (err) return res.status(400).send(err); if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다.", }); } console.log(req.body); //3. login 된경우 토큰생성 user.generateToken((err, user) => { if (err) return res.status(400).send(err); //token을 쿠키에 저장한다. res .cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id }); console.log(req.body); }); }); }); });User.jsuserSchema.methods.comparePassword = function (plainPassword, callback) { bcrypt.compare(plainPassword, this.password, function (err, isMatch) { if (err) return callback(err); return callback(null, isMatch); }); };
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
보안에 관해.
안녕하세요. 파일을 올려버리니 인덱스 파일에 적혀있는 비번까지 같이 올라가는듯합니다. 파일올릴때 비공개로 설정하고 해야 하지 않을까요? 자신이 주로 사용하는 비번이 깃허브에 퍼블릭으로 올라가면 해킹의 위험이 있어보입니다.@추가내용 : 초기 작성 당시 6강만 보고 9강을 보지 않고 작성하여 말씀드립니다. 9강에서 인덱스 파일에 있는 개인정보를 빼고 올리는 것 확인 하였습니다. 초기에 올릴때 하기의 이유들로 인해 개인정보가 들어가 있는 파일은 빼고 올리는것이 맞지 않나 싶습니다. 해당 강의들을 천천히 학습하는 학습자가 있음.개인정보를 공공장소에 번듯이 올리는 것은 추후 수정하여시간차가 있긴 하나 보안상의 문제가 있음. 저 같은 경우에는 개인용으로 바꾸었다가 마음이 안내켜서 생성된 레파지토리를 강제 삭제 진행하였습니다만, 무료 강의이긴하나 보는 사람이 많아 파장력이 있는 만큼 해당 내용은 변경하시는게 좋을듯 하네요.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman html에러(unexpected string in JSON at position 39)
postion 39는 검색해도 잘 안나오네요... 뭐가 문제일까요.. ㅠㅠ 늦었지만 혹시 몰라 질문 남깁니다...! SyntaxError: Unexpected string in JSON at position 39 at JSON.parse (<anonymous>) at parse (C:\Users\kelly\Documents\boiler-plate\node_modules\body-parser\lib\types\json.js:89:19) at C:\Users\kelly\Documents\boiler-plate\node_modules\body-parser\lib\read.js:128:18 at AsyncResource.runInAsyncScope (node:async_hooks:202:9) at invokeCallback (C:\Users\kelly\Documents\boiler-plate\node_modules\raw-body\index.js:231:16) at done (C:\Users\kelly\Documents\boiler-plate\node_modules\raw-body\index.js:220:7) at IncomingMessage.onEnd (C:\Users\kelly\Documents\boiler-plate\node_modules\raw-body\index.js:280:7) at IncomingMessage.emit (node:events:539:35) at endReadableNT (node:internal/streams/readable:1345:12) at processTicksAndRejections (node:internal/process/task_queues:83:21)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
navigate 질문이욥 ㅠ
Error: useNavigate() may be used only in the context of a <Router> component.자꾸 뜨는데 ㅠㅠ 제가 뭘 잘 못했는지.. 잘모르겠네요 ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
토큰생성 오류, 무한로딩나시는분들 이거 해보세요
userSchema.methods.comparePassword=function(plainPassword, cbfn){ //암호화된 비밀번호와 plain패스워드가 같은가? //plain패스워드를 암호화 후 체크 console.log("user.jsmethod") bcrypt.compare(plainPassword, this.password, function(err, isMatch){ if(err) return cbfn(err) cbfn(null, isMatch)//ismatch=true }) }if(err) return cbfn(err), 에서 ,빼니까 잘 되네요console.log는 필요없으니 빼시면 됩니다 강의보니까 ,에서 ;로 수정하셨던데 이걸 빼먹으신거 같아요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
hoc 완성. 하지만 ..
hoc작성 완료되어 권한 테스트까지 완료 되었습니다.근데 왜 꼭 클릭한 url 페이지를 들렀다가 권한 체크 한 뒤에 리턴되는 페이지로 넘어가는 걸까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
라우트 호출 원리가 궁금합니다.
<Route exact path="/" element={<Home />} />위 방식으로 제가 작성하여 function Home() { console.log('>>>>> home'); return ( <div> <h2>Home</h2> </div> ); }아래처럼 로그를 주었는데 개발자도구에서 확인 시 로그가 두번씩 호출이 됩니다. 어떻게 두번이 호출 되는지와 exact 속성의 역할element={<Home />}와 element={Home()}의 차이점이 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Router 예제 복붙 - 오류
20강에서Router 예제 복붙 시 오류안나는 최종본입니다 !!import React from "react"; import { Route, Routes, BrowserRouter } from "react-router-dom"; import LandingPage from "./components/views/LandingPage/LandingPage"; import LoginPage from "./components/views/LoginPage/LoginPage"; import RegisterPage from "./components/views/RegisterPage/RegisterPage"; function App() { return ( <BrowserRouter> <div> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Routes> <Route exact path="/" element={LandingPage()}/> <Route exact path="/login" element={LoginPage()}/> <Route exact path="/register" element={RegisterPage()}/> </Routes> </div> </BrowserRouter> ); } export default App;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
proxy 질문 드립니다.
안녕하세요 먼저 유익한 강의 감사드립니다.다름이 아니라 proxy를 통해 cros해결하는 강의를 진행하고 있는데 코드를 보면 반복문이 실행되는 부분도 없는데 계속 콘솔이 2개씩 찍히더라구요!! 혹시 무슨 문제가 있는 걸까요?? 코드 첨부 합니다!setupProxy.jsLandingPage.jsindex.jsconsole
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
코드가 잘못된 것도 없는거 같은데 포스트맨 에서 에러가 뜹니다
포스트맨 에서 로그인 하면 자꾸 404에러가 나옵니다 코드는 잘못된게 없는거 같은데 몇시간을 봐도 어디가 잘 못 된거지 잘 모르겠네여
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
mongoDB connection 시 오류 문의
DB 커넥션을 따라하는데 useCreateIndex: true, useFindAndModify: false해당 옵션 두개가 설정이 안됩니다. 저 두개 옵션을 제외하니 정상 실행되는데 이유를 알 수 있을까요?해당 옵션들이 없어도 진행하는데 문제가 없을까요?Example app listening on port 5000}! MongoParseError: options usecreateindex, usefindandmodify are not supported at parseOptions (D:\Src\boiler-plate\node_modules\mongodb\lib\connection_string.js:290:15) at new MongoClient (D:\Src\boiler-plate\node_modules\mongodb\lib\mongo_client.js:65:63) at D:\Src\boiler-plate\node_modules\mongoose\lib\connection.js:801:16 at new Promise (<anonymous>) at NativeConnection.Connection.openUri (D:\Src\boiler-plate\node_modules\mongoose\lib\connection.js:798:19) at D:\Src\boiler-plate\node_modules\mongoose\lib\index.js:381:10 at D:\Src\boiler-plate\node_modules\mongoose\lib\helpers\promiseOrCallback.js:41:5 at new Promise (<anonymous>) at promiseOrCallback (D:\Src\boiler-plate\node_modules\mongoose\lib\helpers\promiseOrCallback.js:40:10) at Mongoose._promiseOrCallback (D:\Src\boiler-plate\node_modules\mongoose\lib\index.js:1234:10) { [Symbol(errorLabels)]: Set(0) {} }
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
도저히 모르겠어서 질문 남깁니다
TypeError: user.comparePassword is not a function >>비주얼에서는 이런식으로 자꾸 오류가 뜨고, 포스트맨에서는 Could not get responseError: read ECONNRESET이렇게 뜹니다,,!!! post는 http://localhost:5000/api/users/login 이던 http://localhost:5000/login이던 다 안돼요,,, 답변 부탁드립니다ㅠㅠㅠㅠㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
에러 없는데 쿠키 못찾으시는 분들
저도 찾다가 보내는쪽에서 남는게 당연한것 같아서 포스트맨에서 확인하니 여기있네요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
7강 : postman
index.jsconst bodyParser = require('body-parser'); const {User} = require("./models/User"); //application/x-www-form-urlencoded 정보 분석 app.use(bodyParser.urlencoded({extended: true})) //application/json파일을 분석 app.use(bodyParser.json())app.get('/',(req, res) => {res.send('Hello Word!')}) app.post('/register',(req,res)=>{ //회원가입할 때 필요한 정보들을 client에서 가져오면, //그 정보들을 DB에 넣어준다. const user = new User(req.body); //user모델에 정보가 저장됨 //실패 시, 실패한 정보를 보내줌 user.save((err, userInfo) => { if(err) return res.json({success: false, err}) return res.status(200).json({ success: true }) }) }) User.jsconst mongoose = require('mongoose'); const UserSchema = mongoose.Schema({ name: { type: String, maxlength: 50 }, email: { type: String, trim: true, unique: 1 }, password: { type: String, minlength: 5 }, lastname: { type: String, maxlength: 50 }, role: { type: Number, default: 0 }, image: String, token: { type: String }, tokenExp:{ type: Number } }) const User = mongoose.model('User', UserSchema); module.exports = {User} TypeError: User is not a constructor이런 에러가 나옵니다ㅠ.. mongoDB는 연결잘되었구요.코드는 다 동일하게 작성했는데 왜이럴까요..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
웹 접근성에 대해서 질문있습니다!
만약 SPA 쇼핑몰 같은 사이트를 만든다면 기본적으로 Main 페이지에 main 태그가 있고 h2 태그가 있을건데 장바구니 페이지나 로그인 페이지로 이동하게되면 거기서도 main태그와 h2태그를 다시 써주나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman send 오류
이해가 안 가는 부분이 생겨서 질문 드립니다!postman send를 누르면 false가 나오는데 에러 사항이 다음과 같이 공란으로 나오고,정작 몽고 DB 사이트에 들어가 콜렉션을 확인하면 데이터가정상적으로 등록되어 있습니다. 서버에서 DB로 데이터가 정상 전달이 된다면 신경 안써도 되는걸까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
user User차이
index.js 코드를 보면서 질문 드립니다.보다보면 mongoDB에서 제공해주는 함수를 사용 할 때는 User.findOne의 형식으로 사용하고, 직접 User 모델을 통해서 작성한 함수를 사용할 때는 user.comparePassword의 형식으로 사용하던데 이것의 차이가 무엇인지 잘 모르겠습니다.그동안 User모델에 메서드를 생성해줄 때는 userSchema.methods.함수명 으로 생성해줬는데 findByToken메서드를 만들 때는 userSchema.statics.findByToken으로 가운데에 statics가 들어가고 이 때 methods가 들어가게 된다면 실행 시 함수 접근이 안되서 오류가 떨어지던데 이거에 대한 차이를 설명해주실 수 있으실까요? 부탁드리겠습니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman 동작시 cannot post/register 오류
7강 듣고 있는데 마지막 부분에 postman으로 등록 되는지 안되는지 테스트하는 부분에서 계속<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> <pre>Cannot POST /register</pre> </body> </html>이러한 오류가 뜹니다 404 not found 라고 뒤에는 되어있구요..몽고디비연결됐다고는 뜨는데 왜 이런 오류가 나는걸까요?제발 해결해주세요 강사님 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm start 시 오류
npm run start> boiler-plate@1.0.0 start> node index.jsnode:events:491 throw er; // Unhandled 'error' event ^Error: listen EADDRINUSE: address already in use :::5000 at Server.setupListenHandle [as _listen2] (node:net:1432:16) at listenInCluster (node:net:1480:12) at Server.listen (node:net:1568:7) at Function.listen (C:\Users\BPnSolution\Desktop\신입 교육\study\react02\boiler-plate\node_modules\express\lib\application.js:635:24) at Object.<anonymous> (C:\Users\BPnSolution\Desktop\신입 교육\study\react02\boiler-plate\index.js:47:5) at Module._compile (node:internal/modules/cjs/loader:1126:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10) at Module.load (node:internal/modules/cjs/loader:1004:32) at Function.Module._load (node:internal/modules/cjs/loader:839:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)Emitted 'error' event on Server instance at: at emitErrorNT (node:net:1459:8) at processTicksAndRejections (node:internal/process/task_queues:83:21) { code: 'EADDRINUSE', errno: -4091, syscall: 'listen', address: '::', port: 5000} npm run start 입력 시 이런 문구가 뜨면서 에러가 납니다 어떻게 해야 하나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Failed to sign up 에러 (register에 대한 success가 계속 false)
강의를 처음부터 지금까지 따라하고있는데, failed to sign up 에러가 납니다.에러가 어떤 것인지 뭐때문에 success가 안되는지 모르겠습니다 ㅠ 아래는 RegisterPage.js 내 onSubmitHandler 코드입니다.const onSubmitHandler = (event) => { event.preventDefault(); if (password.length < 5) { return alert('비밀번호는 5자리 이상이어야 합니다.') } if (password !== confirmPassword) { return alert('비밀번호와 비밀번호 확인은 같아야 합니다.') } let body = { email: email, name: name, password: password } dispatch(registerUser(body)) .then(response => { if (response.payload.success) { navigate('/login'); } else { alert('Failed to sign up'); console.log(response) } }) } user_actions.jsimport axios from 'axios'; import { LOGIN_USER, REGISTER_USER } from './types' export function registerUser(dataToSubmit) { const request = axios.post('/api/users/register', dataToSubmit) .then(response => response.data) return { type: REGISTER_USER, payload: request } } user_reducer.jsimport { LOGIN_USER, REGISTER_USER } from '../_actions/types'; export default function (state = {}, action) { switch (action.type) { case LOGIN_USER: return { ...state, loginSuccess: action.payload }; case REGISTER_USER: return { ...state, register: action.payload }; default: return state; } } 혹시 몰라 server의 index.js 에서 register 부분도 첨부합니다.app.post('/api/users/register', (req, res) => { const user = new User(req.body); user.save((err, userInfo) => { if (err) return res.json({ success: false, err }) return res.status(200).json({ success: true }) }) }) 이 전 강의까지는 오류 없이 잘 작동했습니다.postman으로 register 날려보아도 success가 false입니다. 전에는 잘 됐습니다..success는 false인데 백엔드쪽 터미널에는 또 입력한 회원 정보가 아래 그림처럼 잘 뜹니다.뭐가 문제일까요? +) 항상 집에서 하다가 오늘 밖에서 했는데 이것때문에 문제가 생긴걸까요? 이전 강의인 login도 어제 집에서 했을땐 잘 됐는데 지금 밖에서 해보니 얘도 안되네요. 만약 그렇다면 어떻게 해결할 수 있을까요?