무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
history를 읽을 수 없다고 하네요..
어디서 문제인지 감이 안잡혀 여쭙습니다아래는 에러메세지가 발생한 LoginPage.js의 코드입니다.history 외에는 정상적으로 작동합니다 import React, { useState } from 'react' // import Axios from 'axios' import {useDispatch} from 'react-redux' import { loginUser } from '../../../_actions/user_action'; function LoginPage(props) { const dispatch = useDispatch(); const [Email, setEmail] = useState(""); const [Password, setPassword] = useState(""); const onEmailHandler = (event) =>{ setEmail(event.currentTarget.value) } const onPasswordHandler = (event) =>{ setPassword(event.currentTarget.value) } const onSubmitHandler = (event) =>{ event.preventDefault(); let body={ email: Email, password: Password } dispatch(loginUser(body)) .then(response=>{ if(response.payload.loginSuccess){ props.history.push('/') } else{ alert("Error") } }) } return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100vh' }}> <form style={{display:'flex', flexDirection:'column'}} onSubmit={onSubmitHandler} > <label>Email</label> <input type="email" value={Email} onChange={onEmailHandler}/> <label>Password</label> <input type="password" value={Password} onChange={onPasswordHandler}/> <br></br> <button> Login </button> </form> </div> ) } export default LoginPage
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
navigate(history 변경)이 계속 오류가 발생하네요
이렇게 코드를 작성하였는데history.ts:480 Uncaught Error: useNavigate() may be used only in the context of a <Router> component. 에러가 발생합니다 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
authentication error 발생 해결책 문의드립니다.
관련 에러를 찾아보니 ip주소를 0000이나 내 컴퓨터 ip를 입력해봐서 해결한 경우를 보았으나 제 경우는 해결되지 않습니다. 어떻게 해결할 수 있을까요? 아래 오류 코드입니다. MongoServerError: bad auth : authentication failed at Connection.onMessage (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:227:30) at MessageStream.<anonymous> (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/connection.js:60:60) at MessageStream.emit (node:events:513:28) at processIncomingData (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:125:16) at MessageStream._write (/Users/shinheejin/Documents/boiler-plate/node_modules/mongodb/lib/cmap/message_stream.js:33:9) at writeOrBuffer (node:internal/streams/writable:392:12) at _write (node:internal/streams/writable:333:10) at Writable.write (node:internal/streams/writable:337:10) at TLSSocket.ondata (node:internal/streams/readable:766:22) at TLSSocket.emit (node:events:513:28) { ok: 0, code: 8000, codeName: 'AtlasError', connectionGeneration: 0, [Symbol(errorLabels)]: Set(2) { 'HandshakeError', 'ResetPool' }}
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
pre 메서드에 대해서
user.pre('save', function(next){ ~~~ }여기서 save의 의미는 무엇인가요? save가 진행되기 전 이라는 뜻인가요? save 자리에 다른 메서드가 들어가면 그 메서드 실행전에 함수가 실행되는건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
config 방식과 .env 방식의 차이? 를 알고싶습니다!
config 방식과 .env 방식의 차이? 를 알고 싶습니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
client 디렉토리 모듈 설치 TAR_BAD_ARCHIVE 에러
cd client 통해 디렉토리 이동하고 antd 설치하려하는데 자꾸 에러가 나요.. redux 관련 모듈도 그렇고 루트 디렉토리엔 설치가 잘되는데 client 디렉토리에 설치만 하려하면 에러가 뜨네요.. .도와주세요 ..ㅠㅠ npm WARN tar TAR_BAD_ARCHIVE: Unrecognized archive formatnpm ERR! code TAR_BAD_ARCHIVEnpm ERR! TAR_BAD_ARCHIVE: Unrecognized archive formatnpm ERR! A complete log of this run can be found in:
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인 에러(특이 오류는 없는데 로그인 안되는 현상)
안녕하세요 강사님. 어찌어찌 버전 다른거 어떻게든 찾아서 수정하면서 테스트하고 정상 구동 되는거 확인하고 여기까지 왔는데요. 여기가 정말 오류 해결하기가 너무 빡세서 질문을 남기게 됩니다. 설명으론 이야기 하기가 힘들어서 깃허브 링크를 남기겠습니다. 솔직히 어디가 문제인지 모르겠습니다.감사합니다.https://github.com/fire989/boiler-plate-ko.git
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
the `strictQuery` option 에러나시는분들
mongoose 변수 생성후이렇게 적어주시고 밑에 커넥션 적어주시면 에러 사라지네용 ㅎㅎ..mongoose.set('strictQuery', true);
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Auth() 처리 시 Warning: Functions are not valid as a React child 에러 해결방법
강의 따라했는데 아래 에러 나시는 분들Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.버전이 달라지면서 Auth지원 관련해서 강의와 차이가 생긴 듯 합니다 간단한 해결 방법 입니다 ./src/hoc/auth.js 파일의 Auth함수를 익명함수가 아닌 기명함수로 변경import { useEffect } from "react"; import { useDispatch } from "react-redux"; import { auth } from "../_actions/user_action"; const Auth = (SpecificComponent, option, adminRoute = null) => { function AuthenticationCheck(props) { const dispatch = useDispatch(); useEffect(() => { dispatch(auth()).then((res) => { console.log(res); }); }, []); return <SpecificComponent />; } return AuthenticationCheck; }; export default Auth;2. ./src/compoenent/views/RandingPage, LoginPage, RegsterPage export시 Auth 처리//LendingPage export default Auth(LandingPage, null); //LoginPage export default Auth(LoginPage, false); //RegisterPage export default Auth(RegisterPage, false); 왜인진 모르겠지만 저는 Auth를 익명함수로 두니까 Auth(컴포넌트) 처리시에 계속 에러가 나더라구요기명함수로 고쳤더니 에러 해결됐습니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
프록시 설정했는데 localhost응답 에러 뜨는 분들
setupProxy.js 파일 내용을 아래처럼 바꾸시면 됩니다.공식 문서 보니 설정 문법이 바뀌었나봐요.https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manuallyconst { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( "/api", createProxyMiddleware({ target: "http://localhost:5000", changeOrigin: true, }) ); };
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
18 버전 노드에서 에러나시는 분
저는 nvm 파일 다운받아서 node 16.13.0 버전으로 재설치해서 해결되었습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인 상태체크
useEffect(() => { dispatch(auth()).then(response => { // console.log(response) //로그인 하지 않은 상태 if (response.payload.isAuth) { console.log('로그인 상태') }else{ //로그인한 상태 console.log('로그인 아닌 상태') } }) }, []) //import { auth } from '../../../_actions/user_action'; 를 이런식으로 사용하면 안되는 이유가 있나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
리엑트 페이지에 아무것도 안뜹니다.
(사진)
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
몽고 DB연결 강의대로 하면 에러가 발생.
안녕하세요. 강의를 그대로 보고 하는데 에러가 발생을 하는데 전혀 강의처럼 작동을 하지를 않습니다. 에러 내용과 에러 내용 캡쳐를 보내겠습니다.querySrv EREFUSED mongodb.tcp.cluster0.vbq5jzp.mongodb.net
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
useCreateIndex 지원하지 않음. 옵션에서 빼세용
useCreateIndex 지원하지 않음. 옵션에서 빼세용
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
30강 이후 404 에러 발생
안녕하세요!! 30강에서부터 버튼을 클릭할 때마다 Uncaught (in promise) 발생하며, 404에러가 발생하고 있습니다.api/users/login //// api/users/register 둘 다 404에러가 발생해서.... 주소의 오탈자가 있는 것 같진 않은데 혹시 어느 부분을 좀 더 점검해봐야할까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
client에서는 userid를 보낸 적이 없습니다....!
logout과정에서 질문이 있습니다. 로그인을 할때 서버에서 클라이언트로 res .cookie("x_auth", user.token) .status(200) .json({ loginSuccess: true, userId: user._id });이렇게 json 형식으로 성공여부와 user_id값을 보냅니다. 로그아웃을 할때는 axios로 /api/users/logout" 에 요청을 보내기만 합니다. 그리고 server는 req로 user_id값을 받아서 로그아웃을 진행합니다. client에서는 userid를 보낸적이 없는데 서버는 어떻게 req를 통해 user_id에 접근할 수 있나요? client는 로그인시에 서버에서 json으로 데이터를 받았는데 이것은 어디에 저장되는 것인가요? 또한 저장되는 공간은 누가 정하게 되는 것인지 궁금합니다. 스토리지 종류가 여러가지 인데 말이죠.확인해보니 local storage, session storage, lndexeddb등은 다 비어있고 쿠키에만 x_auth가 저장되어있습니다. 음... 브라우저가 알아서 보내주는 건가요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
11,12 강의 중 Compare 관련 질문
도와주세요..ㅠ.ㅜ몇일째 들여다 보는데 진도가 안나갑니다...아래 캡쳐한 것과 같이 ComparePassword 를 만들었습니다.받아오는 password 와 DB password 가 같은데....isMatch가 false가 뜹니다.어떤 부분이 잘못되었는지 도움부탁드려요User 에 보면 password 도 잘 넘어 오는 것 같습니다.소스에 주석 단 부분 과 콘솔로그 다시 분리해서 올립니다. 몽고 db 에 보면 암호화 되서 잘 들어가있는 것 같습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
고수분들의 도움이 필요합니다.
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강에서 인덱스 파일에 있는 개인정보를 빼고 올리는 것 확인 하였습니다. 초기에 올릴때 하기의 이유들로 인해 개인정보가 들어가 있는 파일은 빼고 올리는것이 맞지 않나 싶습니다. 해당 강의들을 천천히 학습하는 학습자가 있음.개인정보를 공공장소에 번듯이 올리는 것은 추후 수정하여시간차가 있긴 하나 보안상의 문제가 있음. 저 같은 경우에는 개인용으로 바꾸었다가 마음이 안내켜서 생성된 레파지토리를 강제 삭제 진행하였습니다만, 무료 강의이긴하나 보는 사람이 많아 파장력이 있는 만큼 해당 내용은 변경하시는게 좋을듯 하네요.