무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run start 오류 제발요,,ㅠ
위와 같이 정상적으로 컴파일 되었다고 하지만,이렇게 오류가 뜹니다... 도저히 해결 방법을 모르겠어요!!proxy설정 전에는 정상적으로 작동해서 다시 proxy에 관한 코드를 다 주석처리하고 해봤는데 저렇게 뜨네요 ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인 페이지 에러 도와주세요!
AxiosError {message: 'Request failed with status code 504', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}로그인 페이지에서 로그인 버튼을 누르면 위의 에러가 뜹니다.ㅠㅠ그 전 단계까지는 잘 됐는데 말이죠.https://github.com/sua01/boiler-plate-ko제 깃허브 주소입니다! 도움 주시면 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
쿠키 생성이 안 돼요.. ㅠ
코드는 똑같이 쳤는데 쿠키가 저장이 안 되네요 마지막까지 달렸는데 쿠키 저장이 안 되니 Auth 부분에서 문제가 되어 다시 여기로 되돌아 왔습니다.. 따흑 res.cookie("x_auth", userInfo.token) .status(200) .json({ loginSuccess: true, userId: userInfo._id });했을 때 json까지 잘 넘어가는데 왜 쿠키 저장만 안 될까요??? ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
npm run dev 할때 에러
WARNING in ./node_modules/antd/dist/antd.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/antd/dist/antd.css)[1] Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):[1] Failed to parse source map: 'webpack://antd/./components/config-provider/style/index.less' URL is not supported npm run dev로 실행해보려 하는데 이런 비슷한 에러가 4개 나옵니다!어떻게 해결해야하는지 알 수 있을까요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
혹시 해당강의에 사용되는
리액트, 리엑트, 라우터 리덕스 버전 등이 어떻게 될까요?해당 프로젝트에서 사용되는 라이브러리들의 버전을 확인하고 싶습니다부가적으로 해당 프로젝트를 클론해서 직접 보면서 하고 싶은데 어디서 확인해볼 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman err json 오류
계속 에러가 나는데 어떤게 문제인가요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
리덕스오류 제발 꼭 좀 봐주세요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. 확장 프로그램도 깔았는데도 불구하고 페이지에서 리덕스가 안되요 선생님 다른 에러 다 처리했는데 리덕스가 안되서 너무ㅜ 불편해요,, 제 깃허브 주소 남겨요 한번만 봐주세요ㅜㅜ 그리고 해결법 좀 알려주세요ㅜㅜ https://github.com/znfqbx/boiler-plate-ko
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
응답외 뜨는 웹팩, abstract 에러
안녕하세요~ 채팅 강의전에 기초강의먼저 듣고있습니다 프록시 설정 후 실행했을 때 응답을 받긴했는데 위에 에러들이 뜨는 이유를 알 수 있을까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Router 예제 복붙했더니 오류가 뜰 때!
아랫분들도 설명해주셨다싶이 버전이 바뀌면서 쓰이는 용어가 바뀌었어요! 다만 올려주신부분들이 다 수업끝부분 완성본인것같아서.. 저는 Home() About() Users()함수가 들어가야하는 초반 부분 수정본을 첨부해봅니다! import React from "react"; import { Route, Routes, BrowserRouter } from "react-router-dom"; function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { return <h2>Users</h2>; } 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 path="/about" element={About()}> <Route /> </Route> <Route path="/users" element={Users()}> <Route /> </Route> <Route path="/" element={Home()}> <Route /> </Route> </Routes> </div> </BrowserRouter> ); } export default App;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react localhost:3000이 안뜹니다.
react 작동시 localhost:3000에 연결되지 않고 막힙니다. 콘솔 로그에 오류는 crbug/1173575, non-JS module files deprecated. 이렇게 뜨고요
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
throw er; // Unhandled 'error' event
안녕하세요 강의 너무 잘듣고있습니다 /login 으로 post 요청하여 계정을 검증하는 부분에서 throw er; // Unhandled 'error' event 이러한 오류가 나타나는데 port 문제라고 해서 port를 cmd로 죽이고 여러번 해봤지만 문제가 여전해서 질문 남깁니다. const express = require("express"); // express 모듈 가져오기 const app = express(); // 새로운 express 앱생성 const port = 5000; // 포트번호지정 const { User } = require("./models/User"); const bodyParser = require("body-parser"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); //application/x-www.form.urlencoded app.use(bodyParser.urlencoded({ extended: true })); // application/json app.use(bodyParser.json()); app.use(cookieParser()); const config = require("./config/key"); mongoose .connect(config.mongoURI) .then(() => { console.log("mongoDB connected!"); }) .catch((err) => { console.log(err); }); app.get("/", (req, res) => { res.send("Hello World! 노드 실행d"); }); app.post("/register", (req, res) => { // 회원가입 할때 필요한 정보들을 client에서 가져오면 // 그것들을 데이터 베이스에 넣어줌 const user = new User(req.body); user.save(function (err, userInfo) { if (err) return res.json({ success: false, err }); return res.status(200).json({ success: true, }); }); }); app.post("/login", (req, res) => { User.findOne({ email: req.body.email }, (err, user) => { if (err) { return res.json({ loginSuccess: false, message: err, }); } // 요청된 이메일을 데이터베이스에서 있는지 찾는다. if (!user) { return res.json({ loginSuccess: false, message: "이메일이 존재하지 않습니다.", }); } // 요청한 이메일이 존재한다면 비밀번호가 같은지 확인 user.comparePassword(req.body.password, (err, isMatch) => { if (err) { return res.json({ logginSuccess: false, message: err, }); } if (!isMatch) { return res.json({ loginSuccess: false, message: "비밀번호가 틀렸습니다.", }); } }); // 비밀번호까지 맞는다면 token을 생성한다. user.generateToken((err, user) => { if (err) return res.status(400).send(err); // 저장은 어디에? 쿠기, 로컬스토리지 res .cookie("x_auth", user.token) .state(200) .json({ logginSuccess: true, userId: user._id }); }); }); }); app.listen(port, () => { console.log(`Example app listening on port ${port}`); });
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
redux-promise error
안녕하세요, react 강좌 학습중입니다. 아래 내용에 대해 구글링 해보았으나 .. 해결이 되지 않아 올려봅니다. 해당 redux-promise는 설치가 되었으며 , import 역시 되어있는 상황입니다. 아래 index.js 소스코드 올립니다. 감사합니다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; //import * as serviceWorker from './serviceWorker'; import reportWebVitals from './reportWebVitals'; import { Provider } from 'react-redux'; import 'antd/dist/antd.css'; import { applyMiddleware, createStore } from 'redux'; import promiseMiddleware from 'redux-promise'; import ReduxThunk from 'redux-thunk'; import Reducer from './_reducers/user_reducer'; const createStoreWithMiddleware = applyMiddleware(promiseMiddleware,ReduxThunk)(createStore) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Provider store={createStoreWithMiddleware(Reducer, window.__REDUX_DEVTOOLS_EXTENTION__ && window.__REDUX_DEVTOOLS_EXTENTION__() )}> <App /> </Provider> </React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
오류 이건 뭔가요???
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관react-dom.development.js:18687 -인터넷창 오류- The above error occurred in the <input> component: at input at form at div at RegisterPage (http://localhost:3000/static/js/bundle.js:660:76) at Route (http://localhost:3000/static/js/bundle.js:46282:29) at Switch (http://localhost:3000/static/js/bundle.js:46484:29) at div at Router (http://localhost:3000/static/js/bundle.js:45901:30) at BrowserRouter (http://localhost:3000/static/js/bundle.js:45522:35) at App at Provider (http://localhost:3000/static/js/bundle.js:42903:5) Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 react-dom.development.js:26923 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. at assertValidProps (react-dom.development.js:2942:1) at setInitialProperties (react-dom.development.js:9920:1) at finalizeInitialChildren (react-dom.development.js:10950:1) at completeWork (react-dom.development.js:22193:1) at completeUnitOfWork (react-dom.development.js:26596:1) at performUnitOfWork (react-dom.development.js:26568:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at recoverFromConcurrentError (react-dom.development.js:25850:1) at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)련 문의는 1:1 문의하기를 이용해주세요. client-src-index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; // import 'antd/dist/antd.css' import { Provider } from 'react-redux'; import { applyMiddleware, createStore} from 'redux'; import promiseMiddleware from 'redux-promise'; import ReduxThunk from 'redux-thunk'; import loginReducer from './_reducers'; const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore) const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <Provider store = {createStoreWithMiddleware( loginReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() )}> <App /> </Provider> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 여기 문제 같아 보여요 redux 부분 뭔가 있는거 같은데 모르겠네요 loginPage.js import React, { useState } from 'react'; 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 = (enent) => { setEmail(enent.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={{desplay: 'flex', flexDirection: 'column'}} onSubmit={onSubmitHandler}> <input>Email</input> <input type="email" value={Email} onChange={onEmailHandler} /> <label>password</label> <input type="password" value={Password} onChange={onPasswordHandler}/> <br/> <button> Login </button> </form> </div> ); } export default LoginPage; RegisterPage.js import React, { useState } from 'react'; import {useDispatch} from 'react-redux'; import { registerUser } from '../../../_actions/user_action'; function RegisterPage(props) { const dispatch = useDispatch(); const [Email, setEmail] = useState(""); const [Password, setPassword] = useState(""); const [Name, setName] = useState("") const [ConfirmPassword, setConfirmPassword] = useState("") const onEmailHandler = (enent) => { setEmail(enent.currentTarget.value) } const onNameHandler = (event) => { setName(event.currentTarget.value) } const onPasswordHandler = (event) => { setPassword(event.currentTarget.value) } const onConfirmPasswordHandler = (event) => { setConfirmPassword(event.currentTarget.value) } const onSubmitHandler = (event) => { event.preventDefault(); if(Password !== ConfirmPassword) { return alert("비밀번호와 비밀번호 확인은 같아야 합니다.") } let body = { email: Email, password: Password, name: Name } dispatch(registerUser(body)) .then(response => { if(response.payload.success) { props.history.push("/login") } else { alert("Failed to sign up") } }) } return ( <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', height: '100vh' }}> <form style={{desplay: 'flex', flexDirection: 'column'}} onSubmit={onSubmitHandler}> <input>Email</input> <input type="email" value={Email} onChange={onEmailHandler} /> <label>Name</label> <input type="text" value={Name} onChange={onNameHandler}/> <label>Password</label> <input type="password" value={Password} onChange={onPasswordHandler}/> <label>Confirm Password</label> <input type="password" value={ConfirmPassword} onChange={onConfirmPasswordHandler}/> <br/> <button type='submit'> 회원 가입 </button> </form> </div> ); } export default RegisterPage;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
잘 듣고있습니다. 오류가 많아서 헤매네요 ㅠㅠ 오류 cannot find module app crashed, proxy 에러 해결
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 잘 듣고 있습니다 들을때마다 오류 생기면 검색하면서 해결하는데 오류 찾느라 2~3시간씩 헤메네요 오류 헤메는 분들을 위해 저는 이런 오류들이었어요 철자 빠뜨려서 혹은 , ; 이런거 빠뜨려서 찾느라 헤메고 .. 이번엔 cannot find module , app crashed 오류 client, server 만들고 파일 옮기면서 경로 바껴서 생긴 오류였네요 .. 어디 오타가 아니었네요 이런 오류인분 package.json 가셔서 경로 봐보세요 저는 >디버그 안에 "start": "node server/index.js", "backend": "nodemon server/index.js", ... 이렇게 바꿔서 해결했어요 경로 앞에 server 이거 붙였습니다 -- proxy 에러 setupProxy.js 파일 안에 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app { app.use( createProxyMiddleware('/api/hello', { target: 'http://localhost:5000', changeOrigin: true }) ) }; 붙여서 해결
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
현재 뜨는 에러들이 너무 많아서 손 대기가 어려워요...
구글링해서 찾아보니까 react, react-dom 18v에서는 ReactDOM이 안된다는 글을 보고 다운그레이드도 해봤는데 해결이 안되었어요... 그래서 react-redux, react-router-dom까지 강사님 github코드는 보고 똑같이 다운그레이드 해서 제가 작성한 코드들을 수정해 보았는데 오류가 해결이 된지 않아요.... 도와주신다면 감사하겠습니다... 아래는 localhost:3000 페이지에서 아무 내용이 안 나오고 console 창 오류들입니다... https://github.com/kbannie/Node_1st 저의 깃허브 주소입니다..
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
오류에 대한 답글에 대한 질문이 있습니다
아래의 사진에서 컴퓨터가 자동적으로 수정하는 것이 아닌 직접 server/index.js로 바꿔줘야 하는 것인가요??
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
api 404 error가 뜹니다ㅠㅠㅠㅠ
app.post('/api/users/_____')를 작성하는데 api 주소가 어긋나서? 오류가 생기는 것 같아요.... 아니면 제가 다른 부분에 오타를 낸 것일까요?? 아무리 찾아봐도 모르겠습니다.... https://github.com/kbannie/Node_1st
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
postman 에서 오류가 나는데 해결이 안되네요 ㅠ
어떤 부분 때문에 이런 오류가 나는지 2시간째 해결이 안되네요. 답글 부탁 드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
mogodb연결이 나는이유를 모르겠어요 ㅠㅠ
선생님안녕하세요. 가르쳐주시는 방향으로 잘 만들고 있었는데, 갑자기 오류가 나버리네요.. 어떤게 문제인지 파악부탁드려도될까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
MongoParseError가 자꾸 발생합니다 ㅠ
강의에서 나온것과같이 코드를 적고 해서 npm run start를 터미널에 치면 MongoParseError: Invalid scheme, expected connection string to start with "mongodb://" or "mongodb+srv://" 라는 에러가 자꾸 발생합니다. 어떻게 해결해야할까요?