묻고 답해요
131만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react 5 to 6 업그레이드 관련 이슈
밑에 분도 관련 이슈로 코드예시를 들어주셨는데요. react 버전이 v5 -> v6가 업그레이드 되면서 바뀐 내용에 대한 정보는 공식홈페이지 docs 주소남깁니다. React Router | Upgrading from v5 여러가지가 있지만 우선 강의를 기준으로 switch가 Routes로 바뀌었구요. url에 있는 docs를 예시로 작성하셔도 되고, 하기 어렵다면 예제를 그대로 사용하시면 됩니다. import { BrowserRouter, Route, Routes,} 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> <Routes> <Route exact path="/" element = {<LandingPage/>}/> <Route exact path="/login" element = {<LoginPage/>}/> <Route exact path="/register" element = {<RegisterPage/>}/> </Routes> </BrowserRouter> ); } export default App;
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
res.req.file로 코딩하시는 이유가 궁금합니다.
multer를 사용해서 하나의 파일만 받는 메소드인 upload를 사용하고 그 안에서 req, res, err 를 받아서 console.log(res.req.file)을 코딩하실 때, 설명으로는 upload의 응답인 res에 ImageUpload.js의 요청인 req라고 설명주시면서 res.req.file를 코딩하셨는데 req.file로 ImageUpload.js의 요청을 받아오는 것까지는 이해가 되었으나, res.req.file을 코딩하시는 것은 이해가 잘되지 않았습니다. 조금 더 추가적인 설명 부탁드립니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
"logInDone" state값이 다른 이유가 궁금합니다.
안녕하세요. 먼저 이런 좋은 강의를 듣게 해주셔서 감사합니다. 질문) pages/index.js 와 components/UserProfile.js 에서 state값이 다른 이유가 궁금해서 질문드립니다. 아래 사진 순서) pages/index.js components/UserProfile.js 콘솔창
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감성일기장 이미지 문의
안녕하세요 🙋♂️마지막 강의를 듣고 있는 수강생입니다. Open graph시 사진이 없어서 완강을 못하고 있어요! 업로드 부탁드립니다.
-
미해결mongoDB 기초부터 실무까지(feat. Node.js)
최신 faker 설치하지말고 구버전 설치하세요 ...
개발자가 최신버전 다 날리고 잠수탔다네요 ㅠ
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
webpack.config.js 파일 구성 질문.
import {path } from "path"; export const module = { mode: "development", entry: { main: "./src/app.js", // 번들 시작점. }, output: { filename: "[name].js", // name자리에 위의 main이 들어온다. path: path.resolve("./dist"), }, }; 왜 config파일을 설정할떄는 위처럼 import,export 문법을 사용할 수 없는건가요..?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
postcss plugin 에 관한 오류가 나타납니다 ㅜ
전 강좌에서 캐루셀 설정후에 npm run dev를 통하여 확인해보려 하는데 ready - started server on 0.0.0.0:3060, url: http://localhost:3060 Unknown error from PostCSS plugin. Your current PostCSS version is 8.4.5, but autoprefixer uses 6.0.23. Perhaps this is the source of the error below. error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/antd/dist/antd.css BrowserslistError: Unknown browser query `dead` at Array.reduce (<anonymous>) 이러한 에러가 뜹니다 ㅜ 구글링해서 계속 찾아보고있는 중인데 도대체 무슨이유인지 모르겠습니다 ㅜㅜㅜ 부탁으려요
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
글 작성시 UserID가 DB에 저장안되는 이슈
안녕하세요~ 글 작성시 UserID가 DB에 저장안되는 이슈가 있어서 질문드립니다. 게시글을 작성 후에 TypeError: Cannot read properties of null (reading 'nickname') 에러가 납니다. 지금까지 해본 것 1. 다른 답글에 적어주신 내용처럼 router/post.js 쪽에서 req.user.id를 확인해보았습니다. 위에 사진처럼 작성자의 아이디가 나왔습니다. 2. MySQL의 DB에 보니까 UserId가 올라오고 있지 않습니다. 3. res.send로 받은 result를 console.log를 찍어보니까 UserId가 없었습니다. 4. MySQL 에 UserId를 직접 입력 (1) 해보니까 에러 없이 잘 나왔습니다. 제 생각에는 Model에서 에러가 발생한 것 같습니다. 깃허브에 올려주신 것을 보니까 5버전에 클래스로 하신 코드이신데 강의에서는 위와 같이 사용중이라서 참고를 해보았으나 DB 등록시 UserId가 입력이 안되는 것 같습니다.알려주신대로 기능 추가시 흐름을 정리해서 보면서 생각해보니까 여기까지는 에러가 왜 낫는지 알겠는데 몇시간을 고민해도 버그가 수정이 안되서 송구스러운 마음을 가지고 질문드립니다. 깃허브 주소 : https://github.com/hyunjoogo/react-nodebird
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
마지막 강의에서 만난 오류 두가지 해결과정
여태껏 다른 분들이 달아주신 댓글을 종합해서 정리해봤습니다 # 1. 첫번째 오류 - v6 오류 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. 이 오류는 v6에서 element 내부에 Auth 지원이 안되어서 생기는 오류 같습니다 ## 1-1. 해결방법 ### 1-1-1. App.js element 수정하기 <BrowserRouter> <Routes> <Route exact path="/" element={Auth(LandingPage, null)} /> <Route exact path="/login" element={Auth(LoginPage, false)} /> <Route exact path="/register" element={Auth(RegisterPage, false)} /> </Routes> </BrowserRouter> 여기서 Auth를 모두 지우고 컴포넌트를 넣으세요 <BrowserRouter> <Routes> <Route exact path="/" element={<LandingPage />} /> <Route exact path="/login" element={<LoginPage />} /> <Route exact path="/register" element={<RegisterPage />} /> </Routes> </BrowserRouter> (이렇게) ### 1-1-2. 각 컴포넌트 export 위치에 Auth를 감싸기 export default LoginPage; export default LandingPage; export default RegisterPage; 지금 LoginPage, LandingPage, RegisterPage의 export가 그냥 이렇게 되어있을 겁니다 이자리에서 Auth로 감싸줄 겁니다 export default Auth(LoginPage, null); export default Auth(LandingPage, false); export default Auth(RegisterPage, false); 이렇게 변경하시면 됩니다 그리고 강의 중에 작성하는 모든 props.history는 import { useNavigate } from 'react-router-dom' let navigate = useNavigate() navigate('/login') navigate('/') 로 작성하시면 됩니다 # 2. 두번째 오류 - auth.js의 액션 이름 괄호 놓침 Uncaught TypeError: (0 , _actions_user_action__WEBPACK_IMPORTED_MODULE_2__.auth)(...).then is not a function 이런 오류가 뜨면서 백지가 나타났는데 오류 의미를 몰라서 한참 찾았습니다 ## 2-1. 해결방법 React.useEffect(() => { dispatch(auth().then(response => { console.log(response) })) }, []) 이렇게 되어있었는데, (auth().then()) 가 아니라 (auth()).then() 입니다 React.useEffect(() => { dispatch(auth()).then(response => { console.log(response) }) }, []) 찾기 힘든 오타라 저는 한참 찾았어요.... 조심하시길.... # 3. 세번째 오류 - 이유를 알 수 없는 504 서버에러 이건 그냥 빡쳐서 자고 다음날 하니까 해결 됐습니다 정 안되면 다음날 해보세요
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Code Sandbox 문의
안녕하세요 선생님, 오늘 처음으로 수강듣게되었네요. 이 단계에서부터 질문을 드리게 될줄 몰랏는데, codesandbox 에서 실행을하려니, installing dependencies 가 계속 진행되면서 retrying package fetch 가 console 에서 지속 반복되네요ㅠ 이걸 해결할 방법이 있을까요? 없다면, 앞으로 수업은 어떻게 듣는게 좋을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
데이터베이스 못찾으시는 분들
UI가 업데이트된건지 강사님과 화면이 다르네요 아래 화면에서 프로젝트 이름 (저는 boilerplate) 누르면 나오는 화면에서 collections 누르시면 나옵니다 1. 프로젝트 이름 클릭 2. collections클릭
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
소셜 로그인 질문 (passport-apple)
저는 passport-jwt를 사용하여 로그인을 구현하였는데, 소셜 로그인을 위해 passport-apple 를 사용하여 유저 정보를 받아오려고하는데 막혔습니다. https://github.com/ananay/passport-apple/issues/30 nest.js에서 passport-apple사용시 Strategy 클래스의 validate함수에 인자가 제대로 들어오지않는 이슈가 있는것같습니다. 제가 유저정보를 받아온후 그것을 db에 저장후 jwt를 발행하여 다음요청부터는 애플을 거치지않고 제 서버로 jwt를 보내면 제가 유저정보 주는방식으로 구현하려고하는데, 유저 정보를 어떻게 받아와야하는지 모르겠습니다. 구글링해보니 idToken을 decode하면 유저정보가 들어있다고하는데, import { Injectable } from '@nestjs/common'; import { JwtService } from '@nestjs/jwt'; import { PassportStrategy } from '@nestjs/passport'; import { DecodedIdToken, Strategy, VerifyCallback } from 'passport-apple'; @Injectable() export class AppleStrategy extends PassportStrategy(Strategy, 'apple') { constructor(private jwtService: JwtService) { super({ clientID: process.env.APPLE_CLIENT_ID, teamID: process.env.APPLE_TEAM_ID, callbackURL: process.env.APPLE_CALLBACK_URL, keyID: process.env.APPLE_KEY_ID, privateKeyString: process.env.APPLE_KEY.replace(/\\n/g, '\n'), passReqToCallback: false, }); } async validate( accessToken: string, idToken: string, profile: any, done: VerifyCallback, ) { const decodedIdToken: DecodedIdToken = this.jwtService.verify(idToken); console.log(decodedIdToken); const user = { provider: 'apple', snsId: decodedIdToken.sub, password: decodedIdToken.sub, }; console.log(user); done(null, user); } } 이렇게 코드를 짜니 [Nest] 31 - 02/06/2022, 8:41:18 AM ERROR [ExceptionsHandler] jwt malformed JsonWebTokenError: jwt malformed at Object.module.exports [as verify] (/usr/src/app/node_modules/jsonwebtoken/verify.js:63:17) at JwtService.verify (/usr/src/app/node_modules/@nestjs/jwt/dist/jwt.service.js:37:20) at AppleStrategy.validate (/usr/src/app/src/auth/strategies/apple.strategy.ts:25:60) at AppleStrategy.<anonymous> (/usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:20:55) at Generator.next (<anonymous>) at /usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:8:71 at new Promise (<anonymous>) at __awaiter (/usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:4:12) at AppleStrategy.callback [as _verify] (/usr/src/app/node_modules/@nestjs/passport/dist/passport/passport.strategy.js:17:45) at /usr/src/app/node_modules/passport-oauth2/lib/strategy.js:205:24 이러한 에러가 뜹니다. idToken을 어떻게 해독해야하는지 알수있을까요..? 혹시 실무에서 애플로그인 서비스를 구현해보셨다면 이방법말고 다른방법이라도 있다면 알려주시면 감사하겠습니다!
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Post 챕터 Read (1) 강의에서 axios 안되시는 분들 정보 공유합니다
백단에서 post요청 then().catch() 설정한 후 클라이언트 List.js에서 axios로 /api/post/list 포스트 요청하고 콘솔창 확인해보면 400 에러가 뜨는데 일단 서버폴더 Model/Post.js에서 스키마 부분 Collection : "posts"로 바꾼 다음에 다시 새로고침 해보니깐 postList 데이터 콘솔창에 찍힙니다 초반강의 몽구스 설정할 때 collation : "posts"로 하셨는데 오타인지 궁급합니다!
-
해결됨[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
fs.readFile 호출시 readFile 도 background 로 보내는 건가요?
const fs = require('fs') fs.readFile('/Users/joe/test.txt', 'utf8' , (err, data) => { if (err) { console.error(err) return } console.log(data) }) 관련 질문을 읽다가 readFile 도 background 로 간다는 뉘앙스가 느껴져서 질문해봅니다. readFile 함수 자체는 background 로 가진 않지만 파일 읽는 행위가 background 에서 진행되는 걸까요?
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
asset/inline
webpack 5 부터는 url-loader가 아닌 asset/inline을 사용한다는데 asset/inline에서 로더를 실행할 파일 크기 제한을 어떻게 하나요? url-loader에서 limit 옵션을 asset/inline에서는 어떻게 주는지 궁금하네요!
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
몽고db 사이트가 많이 바뀌어서
몽고db 사이트가 많이바뀌어서 cluster 화면이 너무많이바뀌어서 강의를 알아들을수없습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
콜백함수가 헷갈려서 질문 드립니다!
index.js에서 user.comparePassword를 호출할 때 req.body.passwod로 비밀번호를 인자로 전달하고 뒤에 err, isMatch는 comparePassword 메소드에서 cb(err)과 cb(null, isMatch)로 받아와서 비밀번호가 틀렸습니다 쪽으로 넘어가는 것 같은데 제가 이해한 게 맞을까요...??
-
미해결얄팍한 GraphQL과 Apollo
ㄷ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:ㄷ1 문의하기를 이용해주세요.
-
미해결[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
.listen
강의에서 8번째 줄에 그냥 .listen이 이해가 가질 않습니다. 보통 .이면 메소드?를 불러오는건데 어떤놈의 메소드(함수)인지 궁금합니다
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
안녕하세요 강사님 실행할때 오류가 발생해서 질문드립니다.
Error: Cannot find module 'app.model' Require stack: - D:\Study\Inflearn\NestJS\Express\letsStart\dist\app.js at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15) at Function.Module._load (node:internal/modules/cjs/loader:778:27) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (D:\Study\Inflearn\NestJS\Express\letsStart\dist\app.js:4:19) at Module._compile (node:internal/modules/cjs/loader:1101:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) { code: 'MODULE_NOT_FOUND', requireStack: [ 'D:\\Study\\Inflearn\\NestJS\\Express\\letsStart\\dist\\app.js' ] } npm run start:dev 했을때 이와같은 오류가 발생하고 postman도 마찬가지로 localhost:8000으로 get 검색시 찾지 못하는데 어느 부분에서 잘못됬는지를 모르겠습니다. 코드는 오타 없이 강사님이 작성한것과 동일합니다.