173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
웹 게임을 만들며 배우는 React
onClickTd를 useCallback으로 만드신 이유가 있을까요 ? 영상내에서 따로설명이 없으신거같아서요. 다시한번 짚어주세요 !! p.s ) 제가아는 useCallback은 제작한 함수를 재사용하기 위한것이잖아요 ..? 근데 onClickTd 라는 함수를 다른컴포넌트에서 사용안하지 않나요 ...?
미해결
프로젝트로 배우는 React.js
PropTypes를 사용하실 때 BlogList.propTypes = { isAdmin: bool }; 이런식으로 하단에 PropTypes 키워드를 사용 안하실 때도있고 상단에 PropTypes를 import안하실때도 있으시고.. BlogList.propTypes = { isAdmin: propTypes.bool, }; PropTypes를 소문자 p 로 propTypes라고 적용하실때도 있는데 이 경우는 그렇게 엄격하지 않은가요?
해결됨
Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
같은 공유기 와이파이에서 무선으로 연결된 노트북 2대로 실습하려면 따로 설정해줘야 되는것이 궁금합니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요? 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}번 워커 실행`); };
미해결
Slack 클론 코딩[실시간 채팅 with React]
nest 백엔드까지 같이 사서 들었는데요 몇일 고민을 해봤는데 해결이 안되서 질문 올립니다. 강의에서 말씀하신것처럼 프론트 빌드 한 것을 백엔드 public 폴더 안에 넣었습니다. 파일구조는 back/public안에 dist폴더랑 index.html이렇게 넣었습니다. 먼저 첫번째 질문은 프론트 따로 백엔드 따로 로컬에서 돌릴때는 이렇게 뜨고 제대로 실행이 되는데 백엔드안에 빌드한 내용물을 넣고 로컬에서 돌린 후 이미지를 업로드 하면 액박이 뜹니다. 그래서 주소를 보았는데 위에 있는 백엔드에서 안가져오고 다른 주소에서 가지고 오는데 그 주소가.. http:다른 사람이 배포한 주소/upload\사진.jpg로 뜨더라구요 사진을 올리고 싶은데 다른 사람이 배포한 주소가 떠서 일단 이렇게 설명 드립니다 그래서 결과적으로 프론트에서 proxy를 3095로 했는데 백엔드로 돌릴때도 3095로 되어야 되는데 안됩니다! (이미지 빼고는 다 됩니다) 두번째 질문은 이미지빼고는 다 잘 되서 일단 배포를 한번 해봤는데요 이런 에러메세지가 뜹니다. 네트워크를 살펴봤을 때는 app.js에는 200으로 잘 가지고 왔구요 타입문제인줄 알고 이렇게도 해봤는데도 안되서 찾아보니 경로문제인거같은데 .. 경로는 제대로 한거같은데 왜 안되는지 모르겠습니다 (파일구조)
미해결
안녕하세요 제가 AWS EC2 리눅스에서 리액트 프로젝트를 빌드하려는데 오류가 납니다. npm start 까진 잘 되는데 npm run build 명령어를 실행하면 위와 같은 오류가 뜨는데 해결방법이 있을까요...
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
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.js const 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.js const 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 서버를 통해 데이터베이스에 해당 코드가 존재하는지 찾은 후, 존재한다면 해당 코드와 사용자를 매칭시키는 방식으로 우선 구현하고자 합니다. (약간 문화상품권 등록 같기도 하네요 ㅎㅎ) 물론 위 내용에 관련된 코드 질문은 아니구요 ㅎㅎ 위와 같은 내용이 구현되었을 때 악의를 가진 사용자가 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라고 생각드실지라도 얼마든 알려주세요!! 열심히 배우겠습니다. 💪 좋은 강의 감사드립니다. 좋은 하루 되세요!
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
{ "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } keonhongkoo@keonhongui-MacBookAir frontend % yarn start yarn run v1.22.19 $ react-scripts start node:internal/modules/cjs/loader:1325 throw err; ^ SyntaxError: /Users/keonhongkoo/Desktop/instagram/frontend/jsconfig.json: Unexpected token / in JSON at position 75 at parse (<anonymous>) at Module._extensions..json (node:internal/modules/cjs/loader:1322:39) at Module.load (node:internal/modules/cjs/loader:1117:32) at Module._load (node:internal/modules/cjs/loader:958:12) at Module.require (node:internal/modules/cjs/loader:1141:19) at require (node:internal/modules/cjs/helpers:110:18) at getModules (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:126:14) at Object.<anonymous> (/Users/keonhongkoo/Desktop/instagram/frontend/node_modules/react-scripts/config/modules.js:142:18) at Module._compile (node:internal/modules/cjs/loader:1254:14) at Module._extensions..js (node:internal/modules/cjs/loader:1308:10) Node.js v18.14.1 error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 이렇게 결과가 출력되는데 해결책이 안보이네요... vscode도 재시작해봤습니다ㅠ
미해결
Slack 클론 코딩[실시간 채팅 with React]
이렇게 코드 옆에 설명 나오게 하고싶은데 어떻게 해야될까요?
해결됨
[리뉴얼] React로 NodeBird SNS 만들기
작성한 이유(저는 이 문제로 골머리를 앓았어서..) 도메인 설정 후 쿠키가 전달되지 않아 로그인이 되지 않았다가 해결되었습니다 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.conf server { 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 kill npm start (혹은 sudo npm start) pm2 재시작 sudo npx pm2 reload all
미해결
남박사의 파이썬 기초부터 실전 100% 활용
사용자 입력 예외처리를 하고 있는데, 1)문자 입력 시 오류 2)3자리 숫자가 아닐 경우 오류 다음과 같이 코드를 짰는데 1)의 경우 except 부분에서 "입력 오류"를 출력하지만 2)의 경우 "입력오류"가 출력되지 않고 그냥 재입력하게 되네요. 혹시 이유를 알 수 있나요? 또한 문자 입력 시 "숫자만 입력 가능합니다"를 출력 두자리수 입력 시 "세 자리 수를 입력하세요"를 출력 하도록 하려면 코드를 어떻게 수정해야 할까요? 감사합니다.! #세 자리 숫자만 입력할 수 있게 하는 함수 def input_check(msg, casting = int): while True: try: num = input(msg) # 사용자 입력 num_str = str(num) #맨 앞의 수가 0일경우 0이 잘려버리기 때문에 str을 따로 저장 if(casting(num) and len(num) == 3): return num_str except: print("입력 오류") continue
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
안녕하세요~! 아나콘다를 설치하면서 두가지 정도 질문이 있습니다 1) 2023.02.22날짜로 아나콘다 최신판을 설치하는데 그림과 같이 옵션사항에 환경변수 체크가 되지 않습니다 ㅠㅠ 업데이트 되면서 바뀐것인지 아나콘다 최신판에서 이 옵션을 선택하지 않아도 괜찮을까요?? 2) 2023.02.22날짜로 아나콘다 최신판에서는 파이썬 버전이 3.9버전인데 파이썬 공식버전으로는 3.11까지 배포가 되었습니다 버전 차이가 많이 나도 아나콘다를 설치하는게 사용에 더 편리할까요??
해결됨
Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
두 개의 피시를 연결할 때 꼭 크로스케이블이 있어야 하는지 질문입니다. 그냥 랜 케이블을 꽂아도 랜카드에서 신호를 알아서 바꿔 인식할텐데, 크로스케이블로만 구현할 수 있는 장애 상황같은게 있는지 궁금하네요.
미해결
실습으로 끝장내는 웹 크롤링과 웹 페이지 자동화 & 실전 활용
이부분 설정을 어떻게 하는지 궁금합니다. 검색해도 못찾겠습니다~ㅠㅠ
해결됨
파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
이렇게 (N+2)*(N+2) list를 만들고 안에다가 복사해서 붙여넣어버리는 방법은 별로인가요? N = int(input()) input_list = [list(map(int, input().split())) for _ in range(N)] n_list = [[0] * (N + 2) for _ in range(N + 2)] for i in range(N): for j in range(N): n_list[i + 1][j + 1] = input_list[i][j]
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
안녕하세요. 이전 강의와 강의 교안과는 다르게, 개정3판 강의에서는 라우트분리 및 템플릿엔진 사용법과 관련된 강의가 빠져있더라고요. 혹시 해당 강의들에 대해서 이번 개정판에서는 더 이상 학습하지 않아도 괜찮기 때문에 강의 내용에서 빠진 것 일까요? 매번 좋은 강의로 감사합니다.
미해결
Slack 클론 코딩[실시간 채팅 with React]
안녕하세요. 해당 강의에서 제가 DM을 확인하려고 전송을 해봤는데 500에러가 나오지만, 다시 데이터를 불러오면 DM 자체는 서버로 잘 간거처럼 나와서요. payload도 정상적으로 보내진거 같은데, 혹시 제가 api 추상화쪽을 잘못했나 싶지만,, 그런거 같지는 않아서 고민하다가 이렇게 질문을 올려보아요 ! 이게 해당 handleSubmut 코드와 API 추상화 코드입니다. 한번 봐주시면 감사하겠습니다.
해결됨
프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1
안녕하세요 동균님 network 캐싱에 대해서 궁금한 점이 있어서 질문 남깁니다! image를 캐싱하면 image를 요청할 때 재요청이 안되는건 알겠는데, 저 network tab에서 disable cache 같은 경우는 해당 사용자 환경에서 설정할 수 있는 부분이라고 생각합니다. disable cache를 체크한 경우에는 캐싱을 못할텐데 그 부분에 대해서는 어떻게 해결을 해야하는건가요? 아니면 저 부분도 사용자 환경에 적용할 수 있도록 하는 방법이 있는건가요?
