묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
리액트에서 post img불러오기
저는 html대신 react를 사용해서 프로젝트를 진행중인데요.단순히 html로 프로젝트를 진행할 때는 아무 이상없이 미리보기 이미지도 잘 나오고 이미지 정보도 db에 저장이 잘됩니다.그런데 react를 사용해서 하면 미리보기 이미지가 불러와지지 않습니다.그래서 구글링해본 결과 파일 경로 앞에 http://localhost:8005를 붙어야 한다, encodeURI함수를 이용해서 경로를 변환시켜줘여 한다. 등 나와있는 정보대로 해보았지만 다 안되네요..그러다가 FileReader를 사용해서 파일 경로를 데이터URI형식으로 변환해야 한다고 해서 해봤는데 이걸 사용하며는 img가 잘나오더군요. 문제는 FileReader를 사용하여 파일을 변환하면 파일의 경로가 너무 길어져 413에러가 발생합니다..그래서 리액트에서는 대체 어떻게 img를 다뤄야 할지 잘 모르겠습니다..아래 코드들은 리액트에서 다양한 방법으로 경로 설정을 하고 그 후 개발자 도구에서 복사해온 태그들 입니다.물론 한개도 제대로 나온 이미지는 없습니다1.html로 프론트를 다뤘을때랑 같은 코드(실행은 리엑트에서 하고 단순히 html로 실행하면 아래 태그는 잘 나옴)<img id="image-preview" src="img/áá ³áá ³á á µá«áá £áº%202023-08-31%20áá ©áá ®%201.54.471694844382032.png" alt="미리보기" />2.local주소 붙이고 encodeURI로 경로 변환<img id="image-preview" src="http://localhost:8005/img/%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%8F%C3%A1%C2%85%C2%B3%C3%A1%C2%84%C2%85%C3%A1%C2%85%C2%B5%C3%A1%C2%86%C2%AB%C3%A1%C2%84%C2%89%C3%A1%C2%85%C2%A3%C3%A1%C2%86%C2%BA%202023-08-31%20%C3%A1%C2%84%C2%8B%C3%A1%C2%85%C2%A9%C3%A1%C2%84%C2%92%C3%A1%C2%85%C2%AE%201.54.471694844547805.png" alt="미리보기"></img>이런식으로 encodeURI랑 로컬주소 고려해서 경우의 수 4가지 다 해봤는데 안됐습니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
socket.io 에서 sql db 사용
1명만 존재하는 채팅방에서 나갔을때 채팅방이 화면에 렌더링 되는 오류입니다. 아래는 몽고디비를 사용했을 때 입니다.chat 네임스페이스 접속 해제를 한 후 DB 에서 채팅방을 제거했기 때문에 GET "/" 의 response 에는 기존의 채팅방이 포함되어 있지않습니다. (정상)아래는 SQL 로 전환했을 때입니다.SQL 을 사용 했을때는 GET "/" 서버 response 가 chat 네임스페이스 접속 해제보다 빠릅니다. 그러므로 아무도 남아있지않은 채팅방이 GET "/" 의 response 에 포함되어 있고 화면에 렌더링 되는 오류가 발생합니다. 또한 여러번 시도하면 스페이스의 접속과 해제순서가 바뀌어 운좋게 오류가 없을 때도 있습니다. 질문 DB 종류 의 차이가 HTTP 요청과 SOCKET 연결/해제 순서를 바꿀 수 있나요? 이를 해결하기 위한 조언을 부탁 드려요
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
몽구스 쿼리 remove 에러 문제
Room.remove 이 부분에서 계속해서 TypeError: Room.remove is not a function 발생하길래 docs를 살펴봤는데 deleteMany나 deleteOne만 있더라구요! 현재 코드를 deleteMany로 수정해서 잘 동작이 됩니다!그런데 remove가 deleteOne이나 deleteMany로 분리된것은 꽤 오래전 일이라서 docs를 봐도 왜 나는 remove가 안되는데 불과 몇개월 전에 코드에서는 remove가 잘 돌아간건지 궁금해서 질문 남깁니다!! ㅜㅜ
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
서버를 종료하면 회원가입한 user정보가 삭제되는것이 맞나요?
서버를 종료하면 회원가입한 user정보가 삭제되는것이 맞나요?워크벤치에서도 확인해보니 회원가입 후 서버를 종료하면 데이터가 user데이터가 사라진것을 확인했습니다..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
import error 질문
터미널에 socket 설치 후 부터 모든 import에 저 에러가 뜨는데 이유를 모르겠습니다Parsing error: DeprecationError: 'originalKeywordKind' has been deprecated since v5.0.0 and can no longer be used. Use 'identifierToKeywordKind(identifier)' instead
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
무료와 프리미엄으로 미들웨어를 확장시 model 질문
무료와 프리미엄으로 미들웨어를 확장시킬 때 user모델에는 domain.type이 없기 때문에 undefined가 나오고 있습니다. 이때 table을 수정해야하는지 domain을 불러와서 코드를 짜야하는지 고민이되서 질문드려봅니다!현재까지 코드 수정사항입니다!const limiter = rateLimit({ widowMs: 60 * 1000, max: (req, res) => { console.log("req.user.type:", req.user.type); if (req.user?.type === "premium") { return 10; } return 2; }, handler(req, res) { res.status(this.statusCode).json({ code: this.statusCode, message: `1분에 ${ req.user?.type === "premium" ? "10" : "2" } 회만 요청 할 수 있습니다`, }); console.log(req.user.type); }, }); exports.apiLimiter = async (req, res, next) => { let user; console.log("user1:", user); console.log("res.locals.decoded:", res.locals.decoded); if (res.locals.decoded) { user = await User.findOne({ where: { id: res.locals.decoded.id } }); console.log("user3:", user); } req.user = user; console.log("user2:", user); limiter(req, res, next); };
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
recv() 함수가 아무 응답도 보내지 않는 이유는 무엇인가요?
break point를 통해 echo server 과정을 조정하던 중 send()를 보낼 때 ack 응답이 돌아온다는 것을 알게되었습니다.저는 recv()로 데이터를 받아 ack 응답을 보내는 줄만 알았는데 아니였더군요...recv()로 응답하지 않는다면 데이터가 제대로 전송되어 버퍼에 저장되었음을 알 수 없는 것 아닌가요?send()에서만 응답 받았음을 알리는 이유가 궁금합니다.
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
send, recv 함수
char buf[] = "data"; int sendSize = 0; int total = 0; while ((sendSize = send(socket, buf + total, sizeof(buf) - total, 0) > 0 && total < sizeof(buf)) { total += sendSize; }데이터를 송수신할 때 송수신 함수는 주고받고 싶은 만큼의 데이터가 모두 전달되지 않더라도 완료될 수 있으니까데이터를 송수신할 때는 한 번의 함수호출이 아닌 위와 같이 여러 번의 함수호출로 완전한 데이터 송수신을 하는 게 맞나요??(코드는 송신할때의 상황이지만 수신도 서로 약속한 길이의 데이터를 주고받을 때 마찬가지인지 궁금합니다.)
-
미해결[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
mongo shell 실행이 안됩니다 - not found
터미널에 몽고를 입력했지만 not found 라고 뜹니다. 재시동해도그런데 뭐가 문제일까요?
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
노드교과서 13강 req.app.get('io').to(req.params.id).emit에 관한 질문입니다.
13강에서 routes/index.js 파일에서 req.app.get('io').to(req.params.id).emit 라는 코드가 있는데, to(req.params.id).emit 을 하려면 views/auction.html 에서 socket.on("connection", (socket) => { socket.join(req.params.id);}이런 코드가 있어야 되는거 아닌가요? join을 하지 않았는데 어떻게 room 관계가 이루어진것인지 모르겠습니다.
-
미해결[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
포스트맨 오류
포스트맨 오류가납니다 무엇이 문제일까요 ?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
react-router-dom 설치 오류 관련 질문 사항입니다!
안녕하세요.현재 npm i react-router-dom 으로 설치를 하여 라우터로 페이지 이동을 사용하려고 하는데요 터미널에서 계속 에러가 나서 질문드립니다.. 설치할때 --force, or --legacy-peer-deps 사용해봤지만 전부 아래 에러 나오고 리액트 버전을 낮추려고 npm uninstall react react-dom 를 하고 npm install react@^17.0.2 react-dom@17.0.2 까지 해봤지만 전부 아래 에러가 나옵니다.. 리액트 버전 관련 종속성 문제 인 것 같은데 npm start를 제외한 명령어를 치면 아래 에러가 나오는데 어떻게 해결을 해야 할까요??아래 에러 말고 --legacy-peer-deps 이걸 포함해서 명령어를 작성하라고 한 에러도 있어서 항상 그렇게 설치를 해왔지만 아래 에러는 처음입니다.. npm ERR! code EOVERRIDE npm ERR! Override for @types/react@^18.2.20 conflicts with direct dependency npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\gmltn\AppData\Local\npm-cache\_logs\2023-09-01T15_46_00_408Z-debug-0.log package.json{ "name": "client", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^29.5.3", "@types/node": "^20.5.1", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", "axios": "^1.4.0", "http-proxy-middleware": "^2.0.6", "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.45.4", "react-icons": "^4.10.1", "react-scripts": "5.0.1", "typescript": "^5.1.6", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "overrides": { "@types/react": "^17.0.38" } }
-
미해결Slack 클론 코딩[실시간 채팅 with React]
로그아웃시 쿠키 남아있는것 관련 질문
안녕하세요 제로초님! 강의 잘 듣고 있습니다.다름이아니라 강의 내용대로 따라가면서 무리없이 로그인 로그아웃 동작하도록 만들었는데현재 상태는 로그아웃을 하게되면 swr을 revalidate 해서 로그아웃을 수행한 상태에서는 유저정보 api를 호출할 수 없으니 undifined가 되어서 그 값으로 페이지 이동을 제어한다 라고 이해를 했는데 혹시 맞을까요? 맞다면 로그아웃 후에도 클라이언트 사이드에 쿠키에 토큰값이 아직 지워지지 않은채로 남아있는데 백엔드에서는 로그인처리가 되었어도 프론트에서 쿠키값을 따로 지워줄 필요는 없는것인지 궁금합니다!
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
NCP배포도 동일하게 하면 될까요?
[제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c안녕하세요! 초보 개발자입니다 회사에서 NCP를 활용하여 배포 하려고하는데 강좌에 나오는 AWS 배포방식과 동일하게 진행하면 되는걸까요.,? 물어볼곳이 없어 질문드립니다
-
미해결Slack 클론 코딩[실시간 채팅 with React]
axios로 api 호출 후, swr로 다시한번 get 요청을 하는 이유가 궁금합니다.
안녕하세요 제로초님 강의 잘 듣고 있습니다.우선 에러가 발생하여 질문하는 것은 아니구요. axios와 swr을 활용하는 과정에서 의문점이 생겨서 질문을 드렸습니다.axios 로 로그인 api를 호출하게되면 response에 로그인한 유저의 정보를 받을 수 있는데로그인이 성공한 후 swr을 사용해서 유저 정보 조회 api를 서버에 get요청으로 다시 받아 쓰는 이유가 뭔지 궁금합니다.
-
미해결[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
오류가 어디서 나는지 알수가없습니다.ㅠ
뭐가 문제일까요 ??
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
16.1 S3 , 적용후 로그인시 에러 발생
S3 서비스 진행 중, 로컬에서 실행하면 페이지는 출력되는데 로그인시도를 하면 저런 메시지가 출력됩니다. 제가 보기엔 레디스 연결과 문제가 있는 것 같은데 어떻게 접근하면 좋을까요?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
form태그의 enctype="multipart/form-data" 질문
이미지 형식을 보낼 때에는 form태그로 보내는 것이 아니라 이벤트 리스너를 통해 폼 데이터에 넣어서 보내는데 굳이 form태그의 enctype속성으로 "multipart/form-data"를 할당할 필요가 있었는지 궁금합니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
몽고쉘 다운
몽고쉘 다운로드는 윈도우 유저만 해당인가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
강의 중 <WorkspaceWrapper> 부분을 추가하면 메모리가 초과됩니다.
gravatar를 적용시킨 후<WorkspaceWrapper> <Workspace>test</Workspace> <Channels> <WorkspaceName>Sleact</WorkspaceName> <MenuScroll>Menu Scroll</MenuScroll> </Channels> </WorkspaceWrapper>이 부분을 추가해서 저장 후 실행시켰더니 갑자기 메모리 사용량이 폭발적으로 증가해 웹 페이지를 열 수 없다고 나옵니다.작업 관리자를 켜서 실시간으로 확인해봐도 웹 페이지에서 오류 페이지를 띄울 때 까지 계속 증가하네요.인터넷에 검색해도 쿠키를 제거하라는 형식적인 답변만 나오고 커뮤니티 게시판에도 이같은 문제를 겪었던 사람이 없어서 질문드립니다.현재 사용하는 노트북의 RAM은 16기가입니다. 혹시 같은 현상을 겪어보신적 있으신가요?