묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import express 하는 부분에서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 아래와 같이 자동완성 사용하는 거랑 같을까요??
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
프리캠프 섹션 2 "CSS 의 기본과 싸이월드 실습 1탄 > CSS 정렬" 강의 질문입니다
CSS 정렬 강의 마지막 숙제에서 회원 가입 화면을 아래 피그마처럼 만들라고 숙제를 주셨는데요. 숙제 다하고 예시(답안?) 코드는 없는 건가요?제가 코드를 만들고 참고하려고 답안 코드를 찾으려고 하니 없네요. 설마 없지는 않겠지요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
새로고침 한번에 클러스터 2개 종료
안녕하세요?setTimeout 대신 setImmediate를 적용해 요청이 발생하는 즉시 워커가 종료되게 해보았는데요, 이 경우엔 워커가 한번에 두개씩 종료됩니다.DevTool - network 창에 보이는 요청은 새로고침 1회당 GET 1회씩인데 왜 이러는지 궁금합니다! const cluster = require('cluster'); const http = require('http'); const numCPUs = require('os').cpus().length; if (cluster.isMaster) { console.log(`마스터 프로세스 아이디 : ${process.pid}`); // CPU 갯수만큼 워커를 생산 for (let i=0; i < numCPUs; i++ ){ cluster.fork(); } //워커가 종료되었을 때 cluster.on('exit', (worker, code, signal) => { console.log(`${worker.process.pid}번 워커가 종료되었습니다.`); console.log('code', code, `signal`, signal); }); } else { // 워커들이 포트에서 대기 http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8'}); res.write('<h1>Hello Node!'); res.end('<p>Hello Cluster!</p>'); setImmediate(()=> { process.exit(1); }); }).listen(8086); console.log(`${process.pid}번 워커 실행`); };
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
nextJS 설치 시 설정하는게 생겼는데
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Eslint는 뭔지 알겠는데 밑에 3개는 처음보네요.. 업데이트 되면서 생긴건가요??마지막은 @components/* 이렇게 설정하라고 하던데 맞나요?? 무슨뜻인가요?? 구글링했습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
portfolio section08 과제 내용 관련 질문입니다!
노션에 나와있는 내용 중 댓글과제가이드 파일에는 댓글 등록, 조회, 수정에 대한 가이드라인이 포함되어있으나 페이지 글에 대해서는 등록, 조회 기능만 구현하라고 나와있습니다. 혹시 댓글 수정 기능은 지금 말고 나중에 구현하는 건가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 강사님 오류문의드립니다.
lllll@172 server % npm run dev> server@1.0.0 dev> env-cmd -f .env.development nodemon --exec ts-node ./src/server.ts[nodemon] 2.0.20[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: ts,json[nodemon] starting ts-node ./src/server.ts/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859return new TSError(diagnosticText, diagnosticCodes, diagnostics);^TSError: ⨯ Unable to compile TypeScript:src/routes/subs.ts:139:16 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.139 if (!req.file?.path) {~~~~src/routes/subs.ts:144:22 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.144 unlinkSync(req.file.path);~~~~src/routes/subs.ts:154:26 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.154 sub.imageUrn = req.file?.filename || "";~~~~src/routes/subs.ts:157:27 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.157 sub.bannerUrn = req.file?.filename || "";~~~~at createTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859:12)at reportTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:863:19)at getOutput (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1077:36)at Object.compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1433:41)at Module.m._compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1617:30)at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)at Object.require.extensions.<computed> [as .ts] (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1621:12)at Module.load (node:internal/modules/cjs/loader:1117:32)at Function.Module._load (node:internal/modules/cjs/loader:958:12)at Module.require (node:internal/modules/cjs/loader:1141:19) {diagnosticCodes: [ 2339, 2339, 2339, 2339 ]}[nodemon] app crashed - waiting for file changes before starting... client에서는 rpm run dev가 정상적으로 실행되는데 server에서는 npm run dev를 실행하면 상기와 같은 오류가 발생하네요.구글링해보니 server 디렉토리 내의 tsconfig.json 파일이 문제인 것 같은데 여러 세팅을 바꾸어보아도 해결되지않아 문의드립니다.(tsconfig.json 파일은 강사님이 올려주신 소스코드 파일과 같은 파일 사용중입니다)
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
시퀄라이즈 order에 대해
const post = await Post.findOne({ where: { id: parseInt(req.query.postId) }, order: [ [{ model: Comment }, "createdAt", "ASC"], [{ model: Nested_Comment }, "createdAt", "ASC"], ], include: [ { model: Image, attributes: ["id", "src"] }, { model: User, attributes: ["id", "nickname", "profile_img"], }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname", "profile_img"], }, { model: Nested_Comment, include: [ { model: User, attributes: ["id", "nickname", "profile_img"], }, ], }, ], }, { model: User, as: "Likers", }, { model: Image }, ], });강좌를 듣고 게시판을 하나 만들고 있는 중인데요Comment를 createdAt 기준으로 ASC 정렬,Nested_Comment를 createdAt 기준으로 ASC정렬 하고 싶은데Comment 까지는 정렬이 되지만 아무리 고쳐봐도 Nested_Comment는 적용이 안되네요. 공식문서도 자세하게 나오지는 않고..도저히 안되겠어서 질문드립니다. Nested_Comment까지 정렬하고 싶으면 어떻게 order 속성을 작성해야 하나요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
비동기 방식에서의 에러처리
안녕하세요! 어제 유투브에서도 질문드렸었는데 잘 이해가 가지 않아 다시 질문드립니다.184p server1-1.jsconst http = require('http'); const server = http.createServer((req, res) => { res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); res.write('<h1>Hello Node!</h1>'); res.end('<p>Hello Server!</p>'); }); server.listen(8080); server.on('listening', () => { console.log('8080번 포트에서 서버 대기 중입니다!'); }); server.on('error', (error) => { console.error(error); });어제 이 부분 에러처리를 try/catch로 하면 안되는건지 질문드렸었는데 server함수가 비동기로 진행되는거라 try/catch 적용하면 안된다고 답변받았었습니다. 186p server2.jsconst http = require('http'); const fs = require('fs').promises; http.createServer(async (req, res) => { try { const data = await fs.readFile('./server2.html'); res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' }); res.end(data); } catch (err) { console.error(err); res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' }); res.end(err.message); } }) .listen(8081, () => { console.log('8081번 포트에서 서버 대기 중입니다!'); });그런데 바로 뒤에서 async를 사용하여 비동기임이 확실한데도 try/catch로 에러처리를 하신 부분이 나와서 잘 이해가 안갑니다..뒷부분에서는 왜 try/catch를 적용해도 되는건지 궁금합니다!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
API 보안 관련 질문입니다!
안녕하세요!현재 올려주신 강의 내용을 바탕으로 쇼핑몰 상품의 정품 등록을 하는 서비스를 구현하려고 하고 있습니다.정품 등록 과정에서 사용자가 정품 인증 코드를 입력하면, API 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ)물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 postman 등 툴을 통해 API 서버에 무작위로 정품 인증 코드를 보낸 후, 정말 우연히 존재하는 코드를 찾은 경우에 그 코드를 사용해서 정품 등록을 할 수 있을 것 같은데, 이를 어떻게 대비하는게 좋을지 궁금합니다. rate limit이 생각나긴 하지만... 그리 완벽한 방법은 아닐 것 같아서요..!!그리고 API 서버 주소가 외부에 노출이 되지 않는 경우엔 무차별 대입 공격을 하기도 힘들텐데, 개발자도구에서 소스를 확인하면 결국 API 서버 주소가 나오잖아요~ 그래서 API 서버 주소를 쉽게 알아내지 못하게 하는 방법이 있을지도 궁금합니다.또 하나 구현해야 하는 기능이 사용자 본인이 정품 등록한 제품을 조회할 수 있도록 하는 기능인데요, userID가 API 서버에 전송되면 데이터베이스에서 해당 userID로 등록된 제품들을 찾아서 보여주도록 구축하려고 합니다. 다만 이 경우에도 위와 비슷하게 API 서버 주소를 알고있는 사람이 다른 사람 ID를 API 서버에 전송해서 그 사람의 정품 등록된 제품을 조회할 수 있는 문제점이 있을 것 같은데요, 이를 어떻게 해결하는게 좋을지도 의견 여쭤보고 싳습니다.요약하자면 다음과 같습니다.:API 서버에 무작위 정품인증 코드를 보내는걸 어떻게 막는게 좋을까요? 제가 생각한 방법은 rate limit인데, 더 좋은 방법이 있을까요?API 서버 주소를 개발자도구 등을 통해 쉽게 알아내지 못하게 하는 방법이 있을까요?userID를 통해 API 서버에서 해당 사용자의 정보를 가져오는 경우, 타인이 API 서버와 통신해서 다른 사용자의 정보를 가져오는걸 어떻게 막을 수 있을지 궁금합니다. 제 짧은 생각으로는 ID를 암호화해서 API 서버와 통신해야 될 것 같은데, 조금 막막한 감이 있네요.. 현재 제가 사용하는 프론트엔드가 react가 아니라 순정 html+JS인지라...약간 질문이 두서없고 강의 주제랑 조금 벗어난 것 같지만... 잘 부탁드리겠습니다..ㅎㅎ지금 질문드리는 내용이 결국 API 서버 보안과 관련된 내용인 것 같은데, 혹시나 해당 내용과 관련해서 말씀해주고 싶으신 내용이 있으시다면 설령 TMI라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪좋은 강의 감사드립니다. 좋은 하루 되세요!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
mysqlworkbench 에서 table 불러오기
시퀄라이즈 모델 만들기 강의 부분 듣고 있습니다.user.js 부분 기본 뼈대 만들고 mysqlworkbench 에서 확인하려면 백서버를 실행시켜야 할거 같은데 백서버 실행시킬때 node app.js 하면 되는 걸까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
mutation 복붙할때 문제
http://practice.codebootcamp.co.kr/graphql 에서 mutation을 가져올때 백틱 안에 들어가면서 강사님과는 다른 포맷으로 입력됩니다. 데이터를 받아오는 과정에서 문제가 생기진 않는데뒤의 수업에서 자동완성이 되지 않거나,# 주석도 표현되지않고 죄다 연두색으로 표현되는 문제가 있습니다. 왜 다르게 표현되는거죠?강사님처럼 쉼표를 붙이고 자리를 똑같이 만들어도 변하지 않네요,,,
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
강의별 전체 코드 git으로 받아볼 수 있을까요?
안녕하세요선생님께서 강의하시는 강의별 전체 코드를 받아볼 수 있는 git 주소가 있을까요?전체 정답 코드를 보지 못하고 따라하다보니 에러가 많이 나서 선생님 것으로 확인해보고자 합니다. 그럼 답변 기다리겠습니다. 감사합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
section05. Q3 어떻게 접근하나요
1번부터 난관이네요ㅜcreateBoard 생성하는데 무엇이 문제일까요?오류는 boardAddress부분인것같습니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
products.service.ts 의 update 함수에 대한 질문입니다.
id 값은 myproduct 안에 이미 있는데newProduct 에 id: productId 이렇게 넣어주는 이유가 있나요?45번째 줄을 주석 처리해도 차이 없이 작동하더라구요.
-
미해결Slack 클론 코딩[백엔드 with NestJS + TypeORM]
socket.io 채팅이 안써져요(안보내져요)
socket.io가 프론트하고 백엔드하고 연결이 되었는지 궁금합니다.각각의 서버 구동은프론트는 inflearn/project/sleact/front 에서 npm run dev 로 실행하고 있고, 백엔드는 개인적인 폴더를 하나 파서 아래와 같이 서버를 npm run start:dev 로구동하고 있습니다.프론트 서버 : 3090백엔드서버 : 3095socket.io를 이용해서 채팅을 구현해보려 하는 도중 테스트 해보는데 채팅이 안보내집니다.아래의 사진과 같이 '123' 이라는 채팅을 치고 엔터를 누르면 그대로 있습니다.개발자 도구를 키고 Network탭 부분에 나온 스샷개발자도구 console.log 창 스샷백엔드 websocket.io 설치버전 프론트 웹소켓 설치버전
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
웹페이지에서 상품 정렬 혹은 조건을 정하여 보여주려면 어떤 방법을 사용해야할까요?
예를들어서 웹페이지에서 select나 checkbox를 통하여 값을 정했을 때 선택한 값에 따라 정렬이나 조건에 맞게 화면에 보여줄 방법은 없을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
send 하면 {success : false, err : {} } 나오시는 분들
monogo DB 에 등록했던 ip 와 현재 ip 가 다르면 에러가 발생하더라고요monogo DB 사이트 접속 -> Network Access 클릭 -> ip 를 Edit 버튼 눌러서 현재 ip로 수정해주시면 됩니다.https://ip.pe.kr/ 들어가면 현재 ip 나오는데xxx.xxx.xxx/32 를 현재ip/32 로 바꾼 다음에 다시 해보세요.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
[공유목적] nginx 설정 후 쿠키가 전달되지 않을 경우
작성한 이유(저는 이 문제로 골머리를 앓았어서..)도메인 설정 후 쿠키가 전달되지 않아 로그인이 되지 않았다가 해결되었습니다session 설정 뿐만 아니라 nginx 설정도 확인해야 합니다혹시라도 이 문제로 고통받으시는 분이 있다면 해결책이 되길 바랍니다 back쪽 session 설정if (process.env.NODE_ENV === "production") { app.use(morgan("combined")); app.use(hpp()); app.use(helmet()); app.set("trust proxy", 1); //배포 시 추가 app.use( cors({ origin: "https://engword.shop", //local "http://localhost:3000" credentials: true, }) ); } else { app.use(morgan("dev")); app.use( cors({ origin: true, credentials: true, }) ); } passportConfig(); app.use(express.json()); app.use(express.urlencoded({ extended: true })); app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, proxy: true, //배포 시 추가 cookie: { httpOnly: true, secure: process.env.NODE_ENV === "production" ? true : false, //https 적용 시 true sameSite: process.env.NODE_ENV === "production" ? "none" : false, domain: process.env.NODE_ENV === "production" && ".engword.shop", }, }) ); nginx 설정back 에서 설정한 nginx입니다sudo vim /etc/nginx/nginx.confserver { server_name api.engword.shop; location / { proxy_set_header HOST $host; //추가 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://127.0.0.0:3000 //http로 설정할 것 proxy_redirect off; } //아래는 certbot 내용 }위와 같이 설정을 바꾼 후 nginx를 다시 실행합니다sudo systemctl restart nginx pm2로 진행 시 pm2를 껏다 키거나, pm2 재시작을 하시면 됩니다.pm2 껏다 키는 경우sudo npx pm2 killnpm start (혹은 sudo npm start)pm2 재시작sudo npx pm2 reload all
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
add, edit, delete 할때마다 db에서 re-fetch 하면 어떻게 될까요?
안녕하세요 수업 듣던 중 궁금한 게 생겼습니다.현재 request action을 dispatch할 때, reducer도 바꾸고, saga도 바꿔서예를들어 post를 add 할땐 unshift()를 쓴다던지, delete할땐 filter()를 쓴다던지 해서 db 뿐만 아니라 post들을 프론트 단에서도 계속 상태를 업데이트 해주고 있잖아요. 근데 만약에, add, edit 또는 delete를 해주는 request action의 경우에는saga로만 request action을 dispatch하고, 비동기 요청이 성공했을 때마다, 그것에 대한 follow up request로 다시 처음부터 변경된 모든 post들을 db로부터 가져오면 어떨까요? 이미 db에서 post들의 상태가 업데이트 됐는데, 프론트에서도 post들의 상태를 업데이트 하게 되면 일을 2번 하게 되는 거니까 코드만 더 길어지는 거 아닐까? 궁금하고요.프론트에서 한번 더 post들의 상태를 업데이트 했을 때 얻는 이점이 무엇인지도 모르겠습니다. 제가 드리고 싶은 질문이 글로 잘 전달이 됐는지 모르겠는데, 만약 제 질문이 이해가 되셨다면 둘의 장단점을 알려주시면 감사하겠습니다!
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
게시글 개별 조회 첫 렌더링 시null 문제
안녕하세요 선생님. 게시글 개별조회를 할 때 처음에는 singlePost가 null이라고 했다가 새로고침을 하면 데이터가 로드되는 부분은 어디를 봐야 하나요?개별 게시글 조회 컴포넌트에서 getServerSideProps로 dispatch type은 개별 게시글 조회, data는 context.params.id를 보내서 받아오고 있습니다.에러가 뜰 때 콘솔 창에서는 개별 게시글 조회 컴포넌트 다음으로 _app.js를 가리키는데, 이 컴포넌트는 모양도 단순하고 노드버드와 차이가 없어서 어딜 봐야 하는지 모르겠습니다..조언 부탁드립니다 선생님