묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] 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 서버에러 이건 그냥 빡쳐서 자고 다음날 하니까 해결 됐습니다 정 안되면 다음날 해보세요
-
해결됨한 입 크기로 잘라 먹는 리액트(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 검색시 찾지 못하는데 어느 부분에서 잘못됬는지를 모르겠습니다. 코드는 오타 없이 강사님이 작성한것과 동일합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
react-router-dom v6 써서 component 에 hoc 적용하는법 찾으시는 분들
App.js 에서 react-router-dom v6 버전에 맞게 문법을 Switch 대신 Routes 로 바꾸는 부분과 component 대신 element 로 바꾸시고 꼼수(?)로 Auth로 감싼 컴포넌트를 새로 정의해서 넣으시면 작동은 됩니다..
-
미해결Watch Me Code: React x Typescript로 Slack 클론코딩하기
npm install 안될 때
노드의 버전이 다른 경우가 있는데 nvm으로 관리하시면 편합니다. nvm git repository
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
Router node v.6 바뀐 부분
이렇게 적으면 v6에서 작동합니다. 앞에 분들이 여럿 글을 적어 주셨지만 정리된 게 없는 것 같아서 이렇게 올립니다. 공식문서에 나와있지만 영어가 어려우신 분들이나 처음 공부하시는 분들은 이거 참고 하시면 될 겁니다. 그리고 Link부분은 아직 안 나왔는데 적혀있어서, 오류떠서 주석 처리 했습니다. ```js import { BrowserRouter, Route, Routes, //Link } 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> ); }
-
해결됨Slack 클론 코딩[백엔드 with NestJS + TypeORM]
하나의 게시물에 여러 개의 태그(카테고리)를 조회하고 싶습니다
현재 nestjs로 Stackoverflow와 유사한 교내 웹 개발 커뮤니티를 개발하는 학생입니다. 전체 질문글을 조회하는 기능을 개발하다가 한 가지 궁금점이 발생하여 질문하게 되었는데요! 주제넘게 설명을 드리자면 '전체 질문글 조회'는 velog나 stackoverflow와 같은 사이트의 루트페이지를 생각해주시면 될 것같습니다. 모든 질문글을 조회하는 과정에서 하나의 질문글에 여러 개의 카테고리가 저장되어 있을 경우 해당 질문글에 연관 돼있는 카테고리가 배열에 담겨 반환되는 것이 아닌 같은 질문글에 다른 카테고리를 가진 똑같은 질문글들이 조회됩니다. 즉, 다시 말해 질문글은 같지만 카테고리만 다른 데이터가 카테고리의 갯수만큼 조회됩니다..!! 이건 저희 프로젝트 erd입니다. 다음은 같이 querybuilder를 이용하여 left join을 한 코드입니다. 아래 사진은 위 querybuilder를 통해 도출된 결과입니다 위의 내용은 전체 조회에서 필요한 하나의 질문글에 대한 정보들은 조회한 사진입니다. 제가 원하는 출력 결과는 위의 카테고리가 따로 조회되는 것이 아닌 ```typescript TextRow { username: '송유현', '댓글내용': '댓글1', '제목': 'typeorm이 뭐에요', '내용': '제곧내', '좋아요': 3, '생성시간': 2021-12-21T15:00:00.000Z, '태그': [ [ '킥킥'] , ['typeorm'] ] }, ``` 의 형태로 출력하고 싶습니다..
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
제로초님 nestjs vscode에서 디버깅하는 것 좀 알려주시면 감사합니다.
안녕하세요 제로초님. 강의 잘 봤습니다. 그런데 제가 vscode에서 nestjs 프로젝트를 하면서 브레이킹 포인트로 디버깅을 하고 싶은데 브레이킹 포인트가 안 먹혀서 질문드립니다. 인터넷에서 보고 launch.json 파일도 만들어서 해봤는데 계속 타입스크립트로 디버깅이 안되더라고요. 방법을 알려주시면 감사하겠습니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
댓글작성 도중 해결안되는 에러가 있어 여쭤봅니다...
댓글 등록하고 버튼 눌렀을때 User 값이 안들어오는 것처럼 에러가 뜨는데 그 상태에서 바로 새로고침하면 값이 들어가있네요 분명 통신과정에서 올바르게 include한 전체 값을 들고오는게 맞는데 뭐가 문제인걸까요....?