묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
코드 질문이요
10:00분에서 useEffect(() => { if (!(me && me.id) { Router.push('/'); } }, [me &&.id]); if (!me) { return null; }; 이 코드를 if (!me) { Router.push('/'); return null; }; 이렇게 코드 바꿔도 오류는 없던데 밑에 껄로해도 별 차이 없는건가요?
-
미해결Vue로 Nodebird SNS 만들기
nuxtServerInit 무한 로딩
nuxtServerInit 호출에 대한 문제로 질문드립니다.개발 모드로 실행시엔 문제가 없는데 배포 모드로 실행시에 nuxtServerInit이 계속해서 페이지를 불러오는 현상이 발생합니다.찾아본 정보들을 적용해봐도 해결이 되지 않아 질문드리게 되었습니다.이 코드로 실행한 결과 이러한 로그를 남기게 되고, 메모리 점유율이 끝없이 상승합니다.제가 찾아본 바로는 남은 캐시에 의한 현상이거나 loadUser에서 return이 되지 않아 axios를 기다리지 않고 계속해서 화면을 그리게 된다고 하는데 return을 주게 되면 오히려 페이지가 로드 되지 않고, return을 주지 않은 현재의 코드로 실행시 페이지를 그려주는 것으로 확인되었습니다.또한 log로 찍은 것은 res.data로 받아온 것인데 정상 동작이라면 req.isAuthenticated에 걸려 401을 리턴해야 맞고,실제로 개발 모드에서도 401을 리턴합니다만 배포 모드에서만 저렇게 페이지 정보가 res.data에 저장됩니다.nuxtServerInit의 라이프 사이클 등등 자세한 정보를 둘러보는데도 제 지식으로는 해결이 되지 않아 질문드립니다. (배포 환경은 AWS 인스턴스에서 Nginx 로 실행하였습니다.)
-
미해결탄탄한 백엔드 NestJS, 기초부터 심화까지
파일을 클릭하면 제일 1번라인 import에 빨간줄 문의드립니다
안녕하세요 강사님 궁금하게 생겨 문의 드립니다. 다음 사진처럼 항상 파일을 클릭하면 상단 import줄이 저렇게 변하는데요 파일을 다시 닫으면 빨간줄이 사라집니다. 깃허브에 있는 tsconfig.json과 .eslintrc.js는 그대로 복붙했습니다. 제가놓친게있을까요?
-
해결됨탄탄한 백엔드 NestJS, 기초부터 심화까지
cats.module.ts에서 MongooseModule.forFeature 질문 드립니다
안녕하세요 강사님 cats.module.ts 파일에서 import: [MongooseModule.forFeature([{ name: Cat.name, schema: CatSchema }]),이부분에서 빨갛게 해논부분에 왜 Cat.name , name이 붙어있는 이유가 뭔지 알고싶습니다. 저기서 name에 할당한 값으로 Service에서 생성자 주입 받을때? Cat.name 으로 @InjectModel(Cat.name) 하는걸로 보이는데 왜 ".name" 이 붙은건가요?..
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 불러오기
그랩마켓이라는 이미지 불러오기가 안되네요... 어떻게 해야될까요???
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
nest 에서 혹시 모를 에러 방지
안녕하세요, 제로초님. 좋은강의 정말 감사드립니다. 강의를 듣다가 문득 궁금한 점이 생겼는데요. 저는 express에서 함수를 실행할 때 혹시 에러가 나서 서버가 다운되지 않게 왠만하면 거의 try catch로 묶는 편인데요. nest에서는 혹시모를 에러가 나서 서버가 다운되지 않게하는 방법이 어떤게 있을까요???
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
zerocho 님 eslint 설정관련해서 질문이 있습니다.
안녕하세요 zerocho 님 eslint 설정관련해서 질문이 있습니다. eslint에서 env쪽에 node: true를 주시면서 node에서 사용하니까 주셨다고 하셨는데 next.js는 Browser환경에서 실행되지 않나요? server 코드가 따로 있는게 아닌 것 같아서요 혹시 이유를 알 수 있을까요?
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
card영역이 footer 영역을 침범하여 문의드려요
강의 뒷부분에서 나온다고 댓글 확인했는데 아직 안나와서요.. height:100%는 어디다 적용되었는지 모르겠네요
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
다름이 아니라 DB 설계 관련 질문이 있습니다.
안녕하세요 강의 잘보고 있습니다! DB 관련해서 제가 몇가지 궁금한게 있는데 1. 예를 들어 하나의 테이블에서 다 대 다일때 즉 user 와 user에 다대다 일때 중간테이블 follow를 만들어주지 않고 한 User 테이블에 컬럼을 늘리는건 별로 안좋은 방식인가요? 예를 들어서 follow 테이블을 만들지 않고 User 테이블안에 팔로우, 팔로잉 수 컬럼을 넣는 방식 2. 다 대 다 관계일시 중간테이블 관련 다 대 다 관계일시 데이터베이스 이론적으로는 중간테이블을 만드는걸로 저도 배우긴 했는데 근데 이게 프로그래밍 관점에서 테이블을 너무 많이 늘리고 join이 많아질시 성능이 안좋다고 배웠던 기억이 있어서요 그래서 이게 실무에서도 다대다일시 중간테이블로 쪼개고 join을 자주 발생시키는지 궁금해요 로그인 같은경우에도 팔로우,잉,쓴글갯수를 유지하기 위해 로그인을 할때마다 post 테이블 follow 테이블 과의 3개의 테이블을 조인시켜서 select 하는 경우인데 과연 이런식의 3중조인을 로그인할때마다 해줘야 하는건가에 대한 생각 꼭 조인을 이렇게 많이해야 저 데이터를 가지고 올 수있나에 대한 DB설계에 대한 생각이 공존합니다. 아니면 제가 너무 오버하는 것일지 문제가 되지 않는 것인지... 그래서 실제로도 실무에서도 이런식으로 중간테이블과 db설계관련 또한 그걸로 인한 많은 join 관련해서 궁금하네요 ++ 제가 이런 생각이 든 이유가 게시판을 만들때 게시물 상세 페이지에 파일갯수랑, 댓글 갯수를 게시물 리스트에 명시해주는 로직을 짜다가 join 몇번해서 select 해서 가져와보자 했는데.. 다른분께서 이유는 말안하셨지만 join 그렇게 하지말라고 하셨거든요 그래서 그래서 게시물 DB에 갯수에 대한 컬럼을 늘려서 게시물 상세페이지 작성시 댓글, 파일 insert 할때 게시물 db에 갯수counting 해서 insert 하고 조인 없이 list 뿌려지는 형태로 바꿨거든요 그게 생각이나서요(insert 시 다른 db에는 count+1 insert 한 동작에 각 테이블의 2번의 insert 작업) 3. db 생성시 post.js user.js -> 실 테이블 posts, users 뒤에 s가 붙는데 이건 왜 붙는건 가요? 제가 실무 경험이 없어서 꼭 알고 싶은 포인트입니다.. ** 질문이 많은데 읽어주셔서 감사합니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
안녕하세요 fetch에러가 떠서 질문올립니다
https://github.com/dlwogns312/boilerplate-movie fetch를 추가하고 그 다음으로 나아가지지 않습니다 . 계속 오류가 뜹니다.× Unhandled Rejection (TypeError): Failed to fetch 이런식으로 오류가 뜨는데 어떡해야하나요
-
미해결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 콘솔창
-
미해결[리뉴얼] 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
-
미해결탄탄한 백엔드 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"로 하셨는데 오타인지 궁급합니다!
-
미해결리액트로 나만의 블로그 만들기(MERN Stack)
몽고db 사이트가 많이 바뀌어서
몽고db 사이트가 많이바뀌어서 cluster 화면이 너무많이바뀌어서 강의를 알아들을수없습니다.
-
미해결탄탄한 백엔드 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 검색시 찾지 못하는데 어느 부분에서 잘못됬는지를 모르겠습니다. 코드는 오타 없이 강사님이 작성한것과 동일합니다.
-
해결됨[리뉴얼] Node.js 교과서 - 기본부터 프로젝트 실습까지
미들웨어 관련 질문입니다.
조현영님 강좌를 보던 중 express와 미들웨어 관련된 강좌를 보고 express를 사용해 서버를 만들던 도중에 막히는 부분이 있어서 질문해봅니다. (단순 에러 해결 질문은 아닙니다.) const axios = require("axios"); const express = require("express"); const path = require("path"); const morgan = require("morgan"); const app = express(); const hostName = "127.0.0.1"; const port = process.env.PORT || 5147; require("./productServer1"); app.use(morgan("dev")); function getInfoWithAxios(key) { if (key === "1") { res.sendFile(path.join(__dirname, "./productOne.html")); } else if (key === "2") { res.sendFile(path.join(__dirname, "./productTwo.html")); } else { res.sendFile(path.join(__dirname, "./productThree.html")); } } app.set("func", getInfoWithAxios()); app.get("/", (req, res) => { res.sendFile(path.join(__dirname, "./expressAPI.html")); }); app.use("/product/:addr", (req, res, next) => { console.log(`you connect on ${req.params.addr}}`); next(); }); app.get("/product", (req, res) => { res.write("<h1>Here is product information</h1>"); res.send(); }); app.get("/product/product1", async (req, res) => { try { const result = await axios.get("http://127.0.0.1:3257"); const productID = String(result.data[0].id); app.get("func"); console.log("Request Type:", req.method); } catch (err) { console.error(err); } }); app.get("/product/product2", async (req, res) => { try { const result = await axios.get("http://127.0.0.1:3257"); const productID = String(result.data[1].id); app.get("func"); console.log("Request Type:", req.method); } catch (err) { console.error(err); } }); app.get("/product/product3", async (req, res) => { try { const result = await axios.get("http://127.0.0.1:3257"); const productID = String(result.data[2].id); app.get("func"); console.log("Request Type:", req.method); } catch (err) { console.error(err); } }); app.use((err, req, res, next) => { console.error(err); res.status(401).send(err.message); }); app.listen(port, () => { console.log(`server is running at http://${hostName}:${port}`); }); 위에 코드를 실행시키면 우선 코드 본문의 내용이 실행됨과 동시에 require()로 productServer1이라는 express를 사용한 상품 데이터 서버가 실행됩니다. (localhost를 사용하고 상품 데이터 서버 포트는 3257)입니다. /product/product(1~3)으로 get메서드를 보내면 같이 실행되는 상품 데이터 서버에서 id값을 받아오고 id값을 getInfoWithAxios(key)함수에 넣어서 html페이지를 id값에 맞게 상품별로 분기하게 됩니다. 이떄 문제는 getInfoWithAxios()함수에 res객체가 없어서 id에 맞게 html페이지를 분기 할 수가 없다는 것입니다. 미들웨어로 처리를 하고 싶지만 방법을 모르겠어서 질문해봅니다. 그리고 app.get() 함수에 있는 각각의 productID를 어떻게 하면 매개변수로 대입 할 수 있는지도 궁금합니다. 요약하자면 함수를 미들웨어로 만들려면 어떻게 작성해야 하고 만든 함수를 접근할때 매개변수는 어떻게 대입할수 있을까요? 조현영님의 이해를 돕기 위해서 전체 프로젝트에 대한 깃 주소를 남겨드리겠습니다. https://github.com/shere1765/node_server/tree/main/small_project 전체 프로젝트에 있는 expressAPI는 문제없이 잘 실행될겁니다. 하지만 제가 원하는 코드는 아닙니다. 그 밖에 문제점이 있다면 피드백 부탁드립니다.
-
해결됨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'] ] }, ``` 의 형태로 출력하고 싶습니다..