무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
경로 생성 규칙이 있을까요?
경로나 파일 생성시 모두 소문자 또는 스네이크케이스 인데... 보기로는 최하위 파일이나 경로에는 스네이크케이스, 그 외 경로는 모두 소문자로 표기하는 거 같습니다. 맞나요? ex) components/views/LandingPage/
- 해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
user_reducer.js에서 break 문에 도달하지 못합니다.
break문에 도달하지 못한다는 경고문이 뜨고, 로그인 페이지에서 auth 부분 콘솔을 찍어보면 사진처럼 세 번이 출력됩니다. break를 타지 못해서 case 모두에 걸려서 다 출력하는거 같은데...뭐가 문제일까요?ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react router 6 에서 push대신 navigate사용 시 경로 이동 질문
router 6버전을 사용하고 있습니다. 영상에서는 랜딩페이지로 이동하는 것을 props.history.push('/') 로 작성하고 있는데요. 6버전에 맞춰 navigate('/')로 작성하려니 앞에 props를 제거해야 이동되더라구요. 없애도 되는 것인지, 아니면 다른 방법으로 해야하는지 답변 주시면 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
modules 폴더 User 파일을 const 객체에 담을 때
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. const {User} = require('./models/User') 여기에서 왜 User은 중괄호로 덮어서 사용하나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
미들웨어 import 할때
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. promiseMiddleware ReduxThunk 앞에 대문자 소문자 부분이 다른거는 그냥 저렇게 improt 하는 규칙이 정해져서 인가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
튜토리얼 링크
https://v5.reactrouter.com/web/example/basic
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
회원전용 기능 문제
안녕하세요. 영화앱사이트 만들기 보다가 auth기능 문제로 다시보게 되었습니다. 비로그인 메인페이지에서 이미지 클릭시 로그인 페이지로 넘어가는데 넘어가는 사이에 디테일페이지가 짧은시간이지만 보이는데 이런건 어디를 수정해야 되나요? 다른 웹사이트에서 간혹 이런거 봐서 악용한 사례도 있긴한데... 이런문제는 해결이 안되나요? 이런건 검색을 어떻게 해야될지도 감이안와서 질문드립니다ㅠㅠ 로그인 페이지로 넘어가면서 0.01초정도 디테일 페이지가 보입니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react router v6 에서 hoc 컴포넌트(Auth)에서 useNavigate() 를 사용할 수 없나요?
react router v6 에서 hoc 컴포넌트(Auth)에서 useNavigate() 를 사용할 수 없는지 궁금합니다. 강사님의 강의를 듣다가 react router v5 로 계속하려했으나 옛날방식이라 신경쓸게 너무 많아 v6 를 쓰고 있었습니다. hoc (Auth) 에서 강사님이 history.push 를 쓰셨는데 v6 에서는 useNavigate()를 쓰라고 합니다. 근데 useNavigate() 를 쓰니 Router 컴포넌트 안에서만 쓸 수 있다고 하더군요. 근데 App.js를 보시면 Router 안에 hoc(Auth)가 들어있지 않습니까? 그런데 왜 사용을 못하는지, 그렇다면 어떻게 해야하는지 궁금합니다. 마지막인데 속썩이네요;;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
스키마에 이미지는 어떻게 넣는지 궁금합니다.
안녕하세요! 우선 좋은 강의 너무 감사드립니다. 제가 진행 중인 프로젝트에 이 강의가 큰 도움이 되었습니다. 다름이 아니라 User 스키마를 만드실 때 image object를 넣는 컬럼을 생성하셨는데, 여기에 이미지는 어떤 형식으로 넣을 수 있는지 궁금합니다. 정말 이미지 그대로를 넣을 수 있는지, Base64로 인코딩한 Binary 값을 넣어야 하는지, 강의에서 써 주신 String으로 넣어야 한다면 그 String 값은 어떻게 구하는지, ... 조언해 주셨으면 좋겠습니다! 그리고 저장된 이미지를 불러오는 방법도 궁금합니다. 추가++) 이미지는 Buffer 타입으로 Binary("~~~") 이렇게 저장해 놓은 상황입니다. 혹시 이를 불러와서 화면에 보여줄 방법은 어떤 것이 있을까요?? 밤새 시도하는데 잘 안 되네요ㅠㅠ 감사합니다. 😀
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
연결에러 나시면 보세요.
6.0 이상부터는 useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false 내용이 기본 적용으로 위 내용을 주석처리나 지우고 실행 하시면 잘 연결 됩니다~
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Hello world example
https://expressjs.com/en/starter/hello-world.html
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
스토어에 들어있는 값 사용하기
안녕하세요! 저번 질문에서 강사님께서 라는 질문에 대하 라고 답변을 해주셨는데요! 그렇다면 다른 파일(예를 들어 RegisterPage.js 등 디스패치를 쓰는 곳들을 뜻합니다!) response.payload라고 쓰지 않고 loginSuccess, register,userData 등의 스토어에 저장된 값을 다른 파일에서 직접 사용하고 싶다면 어떻게 해야되나요? 강의에서도 스토어에 있는 값을꺼내쓰지않고 와 같이 직접 처리를 해주었는데, 특별한 이유가 있나요 ?? 감사합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. 에러 질문
https://github.com/BomUlUL/NodeReact/commit/dea7495e633062b58f7afe7959c3974fb34a27d6 가장 최근의 커밋입니다. 위 커밋을 완료하고 실행해보니 아래와 같은 에러가 떴습니다.. 이전 커밋까지는 정상적으로 작동했습니다. <Component /> 형식으로 리턴해야 하는데 제가 뭘 잘못 리턴한 것 같은데 찾기 힘드네요.. 혹시 도움 주실 수 있으신가요? 참고로 강의 후반에 나오는 것처럼 return(<SpecificComponent />) 추가해도 계속 에러가 뜹니다..
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
로그인 시 DB token 정보 업데이트 관련 질문
안녕하세요. 학습중 궁금한 점이 생겨서 질문 남깁니다. /api/users/login에 POST 요청을 보내면 해당 로그인 요청 정보와 일치하는 정보가 DB 내에 있는지 여부를 판독해 로그인 성공/실패가 이루어지는 것까지는 알겠습니다. 그런데 login 요청을 보내기만 해도 DB 내에 token 정보가 업데이트되는 점이 이해가 되지 않습니다. 분명 /api/users/auth에 GET 요청을 보내야 DB 내의 token 정보를 업데이트하는 것으로 코드를 작성한 것 같은데 말이죠... login시 client의 cookie에 token을 저장하긴 했으나, DB에 token 정보를 업데이트하는 것은 /api/users/auth에 GET 요청을 보내야 이루어지는 것 같은데, 도대체 왜 login 요청을 보내기만 해도 DB 내의 token 정보가 업데이트되는 것인지 궁금합니다. 답변 부탁드립니다. 항상 좋은 강의 감사드립니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
안녕하십니까 강의 정말 잘봤습니다
강사님의 강의 중에 사이트 베포를 다루는 영상이 있을지 궁금합니다 있다면 알려주시면 꼭 수강하겠습니다 감사합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
#10 Bcrypt 강의 관련 궁금증입니다
안녕하세요. 노드 리액트 기초 강의 '#10 Bcrypt로 비밀번호 암호화 하기' 편을 보던 중 궁금한 점이 생겨 질문 남깁니다. User.js 파일의 userSchema.pre('save', function(next){ ... (이하 생략) ... }); 부분에서 이 블록 내부에 var user = this; 를 추가하여 이후 this가 필요한 부분에서 user 변수를 사용하셨는데요, 저는 굳이 var user = this; 를 추가하여 user 변수를 사용할 필요 없이 그냥 this가 필요한 부분에 this를 써도 되지 않겠냐는 생각을 했습니다. 이에 해당 부분에서 var user = this; 를 제거한 후, 기존에 user로 작성되었던 부분을 this로 수정하여 postman을 통해 post 요청을 보내 보았습니다. 그런데 해당 요청이 실패하였다는 success: false와 함께 err 메시지는 {} (null)이 출력되었습니다. 혹시 이유가 무엇인지 알 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Auth적용 시 에러 발생
아래와 사진과 같이 Auth적용 시 렌더링이 되질 않습니다. 어디를 어떻게 손봐야할지 버전에 따른 문법 문제인건지 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
token과 tokenExp가 구체적으로 어떤용도인가요?
로그인이나 회원가입 시에 필요한 토큰인가요? 그리고 유효기간도 따로 관리를 해줘야하는 건가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
auth - route 오류입니다.
<Routes> <Route exact path="/" element={<Auth(LandingPage, null, true ) />}></Route> <Route exact path="/login" element={<Auth(LoginPage), false />}></Route> <Route exact path="/register" element={<Auth(RegisterPage), false />} ></Route> </Routes> 강의하시는 내용과 현재 사용하는 버전에 차이 때문에 Routes/Route를 사용하여 element를 정의할 때, 강의하시는 내용처럼 auth를 넣으면 오류가 납니다. 현재에는 어떻게 해야되는지 방법을 알고 싶습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
TypeError
로그인 페이지에 들어가면 이렇게 뜹니다. TypeError: Cannot read properties of undefined (reading 'prototype') (anonymous function) C:/Users/USER/Documents/boiler-plate/client/node_modules/express/lib/response.js:42 39 | * @public 40 | */ 41 | > 42 | var res = Object.create(http.ServerResponse.prototype) 43 | 44 | /** 45 | * Module exports.View compiled ./node_modules/express/lib/response.js http://localhost:3000/static/js/vendors~main.chunk.js:42041:30 __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled fn C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled ./node_modules/express/lib/express.js C:/Users/USER/Documents/boiler-plate/client/node_modules/express/lib/express.js:22 __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled fn C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled ./node_modules/express/index.js C:/Users/USER/Documents/boiler-plate/client/node_modules/express/index.js:11 __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled fn C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled ▶ 2 stack frames were collapsed. __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled fn C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled ▶ 2 stack frames were collapsed. __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled fn C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled ▶ 2 stack frames were collapsed. __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled fn C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:150 147 | ); 148 | hotCurrentParents = []; 149 | }> 150 | return __webpack_require__(request); | ^ 151 | }; 152 | var ObjectFactory = function ObjectFactory(name) { 153 | return {View compiled 1 http://localhost:3000/static/js/main.chunk.js:1496:18 __webpack_require__ C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:856 853 | 854 | __webpack_require__.$Refresh$.init(); 855 | try {> 856 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 857 | } finally { 858 | __webpack_require__.$Refresh$.cleanup(moduleId); 859 | }View compiled checkDeferredModules C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1);> 45 | result = __webpack_require__(__webpack_require__.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | View compiled Array.webpackJsonpCallback [as push] C:/Users/USER/Documents/boiler-plate/client/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready> 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result;View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:65 This screen is visible only in development. It will not appear if the app crashes in production.Open your browser’s developer console to further inspect this error. Click the 'X' or hit ESC to dismiss this message.