묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
7.5 시퀄라이즈
안녕하세요 선생님 시퀄라이즈 강의를 듣는데 raw쿼리를 쓰는게 가능하더군요. spring + ibatis 로 주로 개발해와서 raw 쿼리가 익숙한데 실무에서는 시퀄라이즈 vs raw 쿼리 중에 어떤걸 많이 사용하는 편인가요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
application에 쿠키가 안들어는 문제
안녕하세요 소셜로그인 강의 듣다가 질문드립니다.소셜로그인을 했을때 네트워크에는 쿠키가 들어오는데 어플리케이션에는 쿠키가 들어가지 않더라구요.검색해보니 credential 문제인 것같아서 아래와 같이 추가 시켜줬는데도 안들어왔습니다.밑에 @Get부분에도 추가시켜주려고 했는데 방법을 잘모르겠습니다.어떻게 하면 쿠키가 들어오게 할 수있을까요??
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
하위 요소에 특정 데이터를 넘길 시, 필요한 데이터만 특정해서 넘기기 vs 객체 형태로 크게 넘기기
안녕하세요, 강사님"댓글구현하기"편을 보던 중 기존 업무에서도 궁금했던 점이 생각나 질문 남깁니다. 예를들어 부모요소에서 하위요소에 post객체에 속한 id값 하나만 전달하고자 합니다.그럴 때 <하위요소 post = {post}/>와 <하위요소 postId = {post.id}/> 중에 어떤 방식을 선호하시나요?단, 이때 자식요소에서 post의 id외에는 필요가 없습니다. 개인적으로는 다른 사람도 저의 코드를 보고 이해할때 '아! 이 자식 요소에서는 post의 id만 사용하는 구나' 딱 알수 있기 때문에 <하위요소 postId = {post.id}/>가 더 좋을 것 같다 생각했습니다. 강사님의 의견 여쭤보고 싶습니다. 답변 기다리겠습니다.감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
리액트 17버전을 사용하는 이유가 궁금합니다
안녕하세요. 멘토님. 강의를 듣다 보니 react 18이 아닌 17버전을 쓰는 이유가 궁금해져서 질문 드립니다.18 버전을 사용하게 된다면 다른 라이브러리와 호환이 안되는 이슈가 생겨서 17버전을 쓰는 것일까요?18버전을 쓸때 어떤 이슈가 생길 수 있는지 궁금해서 질문 드립니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션8 | 데이터 통신 강의는 아무런 반응이없네요.
다음 수업 > 을 통해서 섹션8 | 데이터 통신 에 도달하였는데 아무 반응이 없네요.해당 페이지에서 다음 수업 > geolocation 은 정상동작하네요.
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
Premium 문의…!
선생님 어제 코드 감사합니다 아쉽게도 많이 배워야할것같아서 ㅠㅜ 혹시 제가 빠트린 코드가 있을까요 ? 아니면 다른부분 확인할 사항이 있을까요? 작성한 코드 올려드립니다nodebird-api -> middlewares-> index.jsconst jwt = require("jsonwebtoken"); //토큰을 검사하는 미들웨어 const rateLimit = require("express-rate-limit"); const User = require("../models/user"); const { Domain } = require("../models/"); const cors = require("cors"); exports.isLoggedIn = (req, res, next) => { if (req.isAuthenticated()) { next(); } else { res.status(403).send("로그인 필요"); } }; exports.isNotLoggedIn = (req, res, next) => { if (!req.isAuthenticated()) { // 패스포트 통해서 로그인 안했으면 next(); } else { const message = encodeURIComponent("로그인한 상태입니다."); res.redirect(`/?error=${message}`); //localhost:8001? error=메시지 } }; //토근검사 exports.verifyToken = (req, res, next) => { try { res.locals.decoded = jwt.verify( req.headers.authorization, process.env.JWT_SECRET ); return next(); } catch (error) { if (error.name === "TokenExpiredError") { return res.status(419).json({ code: 419, message: "토큰이 만료되었습니다.", }); } return res.status(401).json({ code: 401, message: "유효하지 않은 토큰입니다.", }); } }; const limiter = rateLimit({ widowMs: 60 * 1000, max: (req, res) => { if (req.user?.Domains[0]?.type === "premium") { return 10; } return 1; }, handler(req, res) { res.status(this.statusCode).json({ code: this.statusCode, message: `1분에 ${ req.user?.Domains[0]?.type === "premium" ? "열" : "한" } 번만 요청 할 수 있습니다...`, }); }, }); exports.apiLimiter = async (req, res, next) => { let user; if (res.locals.decoded) { user = await User.findOne({ where: { id: res.locals.decoded.id }, include: { model: Domain }, }); } req.user = user; limiter(req, res, next); }; exports.deprecated = (req, res) => { res.status(410).json({ code: 410, message: "새로운 버전이 나왔습니다. 새로운 버전을 사용하세요", }); }; exports.corsWhenDomainMatches = async (req, res, next) => { const domain = await Domain.findOne({ where: { host: new URL(req.get("origin")).host }, }); if (domain) { cors({ origin: true, Credential: true, })(req, res, next); //미들웨어 확장패턴 } else { next(); } }; nodebird-api -> routes -> v2.jsconst express = require("express"); const { verifyToken, apiLimiter, corsWhenDomainMatches, } = require("../middlewares"); const { createToken, tokenTest, getMyPosts, getPostsByHashtag, } = require("../controllers/v2"); const cors = require("cors"); const router = express.Router(); router.use(corsWhenDomainMatches); router.use( cors({ origin: true, credentials: true, //쿠키요청 }) ); router.post("/token", apiLimiter, createToken); router.get("/test", verifyToken, apiLimiter, tokenTest); router.get("/posts/my", verifyToken, apiLimiter, getMyPosts); // GET /v2/posts/hashtag/:title router.get("/posts/hashtag/:title", verifyToken, apiLimiter, getPostsByHashtag); module.exports = router;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
섹션 5 퀴즈 질문
질문1:빨간색 부분에 width랑 background가 하얀글씨로 되어있는데적용이 된건가요? 그리고강의 중 이 부분에 예시가 없어서 레퍼런스 코드를 참고해버렸는데요질문2:transition:제일 앞에 선언할수 있는 속성이 무엇이 있는지질문3:transition-property:는 어떤식으로 사용하는지 궁금합니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS 섹션3 퀴즈 질문
박스사이즈를 구하라는 문제에서 저는 div의 크기를 생각하고24*3(폰트사이즈*3em) + 20(가로세로 padding 10+10)=92 생각했는데 93이라는 약간의 오차도 있고정답은 폰트사이즈인 72네요 ㅠ 1.제가 문제를 잘못이해했는지2.div크기 구하는데 오차가 발생하는 이유위 두가지가 궁금합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
MySQL Workbench 예기치 못한 상황에 종료되었습니다. ( 버전문제 )
프론트 부분 회원가입한 후 router설정 까지 끝낸 후,회원정보가 잘 들어갔는지 확인하기 위해 Workbench에서 Users테이블을 클릭 했는데,,바로 예기치 않게 종료되었습니다.가 떴습니다.구글링 해본 결과 버전이 문제인데싹 - 지우고 다운그레이 하라고 하더라구요. 지금 버전이 8.0.32 인데몇으로 다운그레이 해야할까요 ? + 그 전까지는 잘 작동되던 워크벤치가 왜 갑자기 버전충돌이 일어난거죠 ?
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
redux toolkit payload data 질문
https://github.com/ZeroCho/react-nodebird/tree/master/toolkitredux toolkit으로 바꾸면서 제로초님 강의를 듣고있는데 .addCase(addComment.fulfilled, (draft, action) => { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); console.log('draft', draft, 'post', post, 'Comments', post.Coments); post.Comments.unshift(action.data); draft.addCommentLoading = false; draft.addCommentDone = true; })이런 코드를 보면 action.data이렇게 action에서 data를 가져오는데 제가 redux devtools에서 봤을 때 action안에 값들은 action.payload에 저장이 되어있는거 같습니다 혹시 값들을 action.data로 저장하는 방법이 있나요?
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
swagger 404
문서와 동일하고 동영상과 동일하게 작성했습니다. npm install --save @nestjs/swagger 그런데 404가 뜨네요... 원인을 잘 모르겠습니다. import { NestFactory } from '@nestjs/core';import { AppModule } from './app.module';import * as process from 'process';import { DocumentBuilder, SwaggerModule } from '@nestjs/swagger';declare const module: any;async function bootstrap() {const app = await NestFactory.create(AppModule);const port = process.env.PORT;await app.listen(port);console.log(`listening on port ${port}`);const config = new DocumentBuilder().setTitle('Sleact Api').setDescription('Sleact 개발을 위한 API 문서').setVersion('1.0').addTag('sleact').build();const document = SwaggerModule.createDocument(app, config);SwaggerModule.setup('api', app, document);if (module.hot) {module.hot.accept();module.hot.dispose(() => app.close());}}bootstrap();
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
브라우저 재 접속 시 로그인 상태 유지
안녕하세요.브라우저 재 접속 시 로그인 상태 유지를 하고 싶습니다.로그인 후 어플리케이션의 쿠키에 refreshToken이 담긴 것을 확인하였습니다.브라우저를 재접속하면 refreshToken이 사라져있는데 이것은 브라우저를 종료하면 쿠키가 휘발되는 성질로 인해 사라지는 것이 맞나요? 그렇다면 브라우저 재접속 시 로그인 상태 유지는 어떻게 구현할 수 있는지 궁금합니다.감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
quiz 19 질문입니다
안녕하세요 강의 잘 듣고있습니다! 아래 퀴즈19에서 4번하다가 질문드립니다.4-a은 context.req에서 id빼와서 find한 다음에 db에 패스워드 변경하는 식으로 하면 될 것 같은데, 4-b와 4-c가 잘 이해가 안갑니다. 4-b는 현재 로그인한 유저를 조회하는 api를 만들라는 것으로 이해했는데 로그인한 정보를 어디서 가져와야하는지 잘 모르겠네요.. 4-c는 로그인한 유저를 찾은뒤 강제로 로그아웃 시키라는 것인가요? 제가 문제를 제대로 이해한게 맞는지, 어떤 식으로 접근해야 할지 알려주시면 감사하겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS파트 claerfix질문
강의중 clearfix div를 넣어주는데제가 그게 왜들어가는지 들어가서 무슨작용을 하는지원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요?못난 제자라 죄송합니당 ㅜㅜ html:<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-02-clear</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="box1 box"> 첫번째 박스입니다.<br> float:left가 적용되어 있습니다. </div> <div class="box2 box"> 두번째 박스입니다.<br> float:right가 적용되어 있습니다. </div> <div class="clearfix"></div> <div class="box3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. Vivamus cursus lectus tincidunt tellus tincidunt pharetra. Donec pharetra dictum malesuada. Fusce non sapien egestas, maximus urna vel, pulvinar magna. Aenean ut dapibus lacus, in blandit ligula. Vestibulum sit amet efficitur tortor. Phasellus id viverra felis. Mauris magna est, luctus sit amet neque et, sagittis ultrices elit. Morbi odio eros, finibus non justo eget, sollicitudin dapibus ante. Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. Fusce in eros blandit, vehicula libero et, euismod enim. </div> </body> </html>css:*{ box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px 0px; } .wrapper { width: 620px; padding: 40px 30px; background-color: white; border: 1px solid gray; border-radius: 10px; } .wrapper__head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed gray; } .wrapper__head__title { font-size: 32px; background-color: orange; color: white; text-align: center; padding: 5px; margin-bottom: 10px; } .wrapper__head__sub-title{ font-size: 18px; padding: 10px 0; } #point { color: orange; font-size: 22px; font-weight: bold; text-decoration: underline; display: block; margin-top: 15px; } .wrapper__body { border: 1px solid #dddddd; padding: 20px 30px; } .diary-title { font-size: 18px; font-weight: 600; background-color: #f4f4f4; margin-bottom: 20px; } .kimchi { color: red; font-weight: 600; } .egg { color: orange; font-weight: 600; } .highlight { font-size: 22px; color: blue; font-weight: 700; font-style: italic; } .diary-date { color: #919191; font-size: 14px; text-align: right; } .header { height: 80px; display: flex; justify-content: center; align-items: center; border: 1px solid gray; } .header-inner { width: 900px; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .logo { width: 100px; } .logo h1 a{ text-decoration: none; color: orange; } .menu__ul { display: flex; flex-direction: row; } .menu__ul li { list-style: none; } .menu__ul li a{ display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/ padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/ text-decoration: none; color: black; } .menu__ul li a:hover{ color: orange; } .user { width: 100px; }
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
git push origin master 입력시 오류가 발생합니다
다음과 같이 not found라 나옵니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
refreshToken 질문입니다.
강사님 refreshToken 이해가 되지않아서 인데요.제가 52강의 까지 보고 했는데요,이사진은 기존토큰이 없을때 뜨는 restore try~ catch문에서 나오는 Error 입니다. 저는 refreshToken을 localStorage에 값이 있을때로 했거든여, 제가 구현하고 싶은거는사용자가 해당 시간때가 끝나면 알아서 자동으로 해주는걸로 했는데 이렇게 해도 되는지여쭤봅니다... 강의에서 볼때는 버튼을 누르고 새롭게 갱신하는걸로 해가지고요뭔가 로그인, 로그아웃 새로고침 여기서 막히네여 ㅠ,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
spread 연산자 질문
let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const copy = JSON.stringify(origin); const deepCopy = JSON.parse(copy);강의에서 깊은 복사할 때 위 코드처럼 JSON.stringify(), JSON.parse()를 사용해서 복사를 해주셨는데 아래의 코드처럼 복사해주어도 문제가 없을까요? 물론 객체 안에 객체들이 많아진다면 JSON 명령어를 사용해서 복사해주는 것이 좋다고 생각합니다! 하지만 예시처럼 객체가 하나거나 적은 경우에 저는 개인적으로 아래처럼 해주는 게 편한 것 같아서 아래처럼 복사해줘도 괜찮은건지 질문드립니다!let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const myCopy = {...origin, favoriteFood: {...origin.favoriteFood}}
-
미해결Node.js에 TypeScript 적용하기(feat. NodeBird)
안녕하세요.. connect ECONNREFUSED 127.0.0.1:3306 관련해서 질문드립니다
const dotenv = require("dotenv"); dotenv.config(); module.exports = { development: { username: "root", password: process.env.DB_PASSWORD, database: "react-nodebird", host: "127.0.0.1", dialect: "mysql", }, test: { username: "root", password: process.env.DB_PASSWORD, database: "react-nodebird", host: "127.0.0.1", dialect: "mysql", }, production: { username: "root", password: process.env.DB_PASSWORD, database: "react-nodebird", host: "127.0.0.1", dialect: "mysql", }, };(위에는 config.js 파일입니다.) 시퀄라이즈 강의에서 npx sequelize db:create 로 db 생성시 아래와 같은 메세지가 뜹니다. 기본mysql portrk 3306으로 되는거라고 알고 있고.. 혹시나해서3056 포트로 설정해보았는데도 해결이 되질않습니다..어디설정을 변경시켜줘야되는지 감도잡히질 않아서 질문드립니다.!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
26-01 강의 : 아폴로 캐시 질문입니다.
아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다. 포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요.두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다.강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요.캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
CSRF
안녕하세요 도저히 찾아봐도... 찾을 수가 없고 답답한 나머지 멘토님께 여쭈어보려고 합니다.현재 저는 백엔드 코스와 프런트엔드 코스를 둘 다 수강 중인 학생입니다. 백엔드 코스에서 공부한 이미지 업로드를 프런트에서 공부한 이미지 불러오기를 적용하던 중 오류가 발생하여 문의드립니다.포스트맨을 통해 이미지 업로드 정상 작동되는 것을 확인하였지만 프런트 엔드와 같이 연결하여 이미지 업로드를 진행 중"This operation has been blocked as a potential Cross-Site Request Forgery (CSRF). Please either specify a 'content-type' header (with a type that is not one of application/x-www-form-urlencoded, multipart/form-data, text/plain) or provide a non-empty value for one of the following headers: x-apollo-operation-name, apollo-require-preflight\n" 이러한 원인이 설명 부탁 드립니다... ...