묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
WebSocket 연결 에러 질문
import { useCallback } from 'react'; import io from 'socket.io-client'; // 아무 key값이 들어올수 있으니 이런 형식으로 타입 지정 const sockets: {[key: string]: SocketIOClient.Socket} = {}; const backUrl = "http://localhost:3095"; const useSocket = (workspace?: string): [SocketIOClient.Socket | undefined, () => void] => { const disconnect = useCallback(() => { if(workspace) { sockets[workspace].disconnect(); // 연결 끊을때는 지우기 delete sockets[workspace]; } },[workspace]) if(!workspace) { // 한번 맺었던 연결을 끊는 함수 (끝맺음을 잘하자) return [undefined, disconnect]; } sockets[workspace] = io.connect(`${backUrl}/ws-${workspace}`,{ transports: ['websocket'], }); return [sockets[workspace], disconnect] } export default useSocket; const [socket, disconnect ] = useSocket(workspace); useEffect(()=>{ if(channelData && userData){ socket?.emit("login",{id : userData.id, channels: channelData.map((y)=> y.id)}); } },[userData, channelData, socket]); // socket연결을 끊어줄 때 useEffect(()=>{ return () => { disconnect(); } },[workspace, disconnect]) 버전이 달라서 이런 현상이 생기는건지 잘 모르겠습니다. ..
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
AWS 배포 서버 관련 문의드립니다....
혹시 서버가 2개가 생성된 이유가 뭘까요..?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
SSH 콘솔 sql 설치 오류문의합니다.
sudo dpkg -i mysql-apt-config_0.8.23-1>_all.deb를 입력하면 error가 발생하는데.. 어떻게 해결할 수 있을까요..?
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
iocp 모델 설명과정에서 궁금한 부분이 있습니다.
강의 중 os가 vms 메모리에 lock을 걸어 커널에서 다루는 것이다라고 말씀하신 이후 "유저 모드 어플리케이션을 논 페이즈드 풀 메모리로 바꾸고... " 라는 식으로 표현하신 부분이 있는데 이 부분이 잘 이해되지 않습니다. (11분 10초)이 부분은 유저 모드의 메모리 영역을 커널과 공유하여 불필요한 메모리 복사를 방지한다. 라고 이해하면 될까요?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
TS1261: Already included file name
The file is in the program because: TS1261: Already included file name 'C:/Users/gram15/Desktop/slack/sleact-master/alecture/pages/LogIn/index.tsx' differs from file name 'C:/Users/gram15/Desktop/slack/sleact-master/alecture/pages/Login/index.tsx' only in casing. Imported via '@pages/LogIn' from file 'C:/Users/gram15/Desktop/slack/sleact-master/alecture/layouts/App.tsx' Root file specified for compilation 2 | import loadable from '@loadable/component'; 3 | import { Switch, Route, Redirect } from 'react-router-dom'; > 4 | const LogIn = loadable(() => import('@pages/LogIn')); | ^^^^^^^^^^^^^^ 5 | const SignUp = loadable(() => import('@pages/SignUp')); 6 | 7 | const App = () => { App.tsx import React from 'react'; import loadable from '@loadable/component'; import { Switch, Route, Redirect } from 'react-router-dom'; const LogIn = loadable(() => import('@pages/LogIn')); const SignUp = loadable(() => import('@pages/SignUp')); const App = () => { return ( <Switch> <Redirect exact path='/' to="/login" /> <Route path="/login" component={LogIn} /> <Route path="/signup" component={SignUp} /> </Switch> ); }; export default App; LogIn/index.tsx import React from "react"; const LogIn = () => { return ( <div>로그인</div> ); }; export default LogIn; SignUp/index.tsx import React from "react"; const SignUp = () => { return ( <div>회원가입</div> ); }; export default SignUp; 폴더 이름이 맞지 않다고 하는데 이름 대소문자 까지 다 맞춰서 했습니다. 오류가 왜 뜨는지 모르겠어요....
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
9장 추가과제 (캐싱)
안녕하세요9장 추과과제 중 캐싱까지 만들었는데문제는 회원정보가 업데이트가 되었을때캐싱으로 인해 화면에서 데이터가 바로 바뀌지 않는데어떤 방법으로 해야할지 감이 잡히지 않아서요힌트좀 주시면 감사하겠습니다..
-
미해결[웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지
mysql 챕터에 있는 테이블은 도대체 어디에 있는가??
수업자료 라고 링크 걸려 있는 곳에도 없고..테이블을 화면 보고 알아서 만들라는 건가..내가 못 찾는 건가..
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
채팅방을 만든 브라우저에서 모두 나갔을 경우 문의드립니다.
채팅방에 모두 나가기를 했는데요, 이상하게 채팅방을 만든 브라우저에서는 방이 바로 없어지지않고, 새로고침을 해야 제거가되는데 이러면 안되는건가요..?
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
백엔드 세팅후 서버 구동시 CORS에러
안녕하세요 제로초님! 백엔드 서버 구동을 하고 주소창에 경로를 입력하여 띄웠을때 오류가 나서 질문드립니다우선 프로젝트를 클론을 받아 back폴더로 이동후 리드미에 적힌대로 세팅을 진행하였고 아래캡쳐와 같이 스키마와 테이블이 잘 생성이 된 것을 확인했습니다. 그런데 주소창에 경로를 입력해서 화면이 떴을때 아래캡쳐와 같이 에러가 발생하였습니다.확인을 해보니 요청 주소가 https://sleact.nodebird.com/api/users 여기로 가는데 코드의 어떤 부분을 수정해주어야 하는걸까요?이전에 다른분께서 저와 같은 에러가 발생하여 제로초님이 답변하시기를 프론트의 코드를 수정하면 된다고 하셨는데, 백엔드만 실행했는데 이런 문제가 발생하는 이유가 궁금합니다. 클론받은 back폴더 내에서 전체검색으로 http://sleact.nodebird.com 키워드로 검색한 결과 public/dist 경로안의 파일 838.js와 app.js 에서 defaults.baseURL의 경로로 되어있는것을 확인했습니다. 제로초님께서 프로젝트를 만들고 프론트와 연동을 했을때 남은 결과물 인것같아서 아래 캡쳐본에 있는 dist안에서 빌드?된 결과물을 삭제한 뒤 다시 실행을 시켜보면 되지않을까 했는데 백엔드에서 빌드를 어떻게 해야하는것일까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
SignUp 의 index.tsx질문
setting/ts 를 복사해 사용중 이고, pages/SignUp/index.tsx는 기존 repository 를 복사해서 사용하는게 맞나요? run dev 실행시 ERROR in ./pages/Login/index.tsx:10:24 TS2339: Property 'revalidate' does not exist on type 'SWRResponse<any, any, any>'. 8 | 9 | const LogIn = () => { > 10 | const { data, error, revalidate, mutate } = useSWR('/api/users', fetcher); | ^^^^^^^^^^ 11 | 12 | const [logInError, setLogInError] = useState(false); 13 | const [email, onChangeEmail] = useInput(''); ERROR in ./pages/Login/index.tsx:16:6 TS7006: Parameter 'e' implicitly has an 'any' type. 14 | const [password, onChangePassword] = useInput(''); 15 | const onSubmit = useCallback( > 16 | (e) => { | ^ 17 | e.preventDefault(); 18 | setLogInError(false); 19 | axios ERROR in ./pages/SignUp/index.tsx:10:24 TS2339: Property 'revalidate' does not exist on type 'SWRResponse<any, any, any>'. 8 | 9 | const SignUp = () => { > 10 | const { data, error, revalidate } = useSWR('/api/users', fetcher); | ^^^^^^^^^^ 11 | 12 | const [email, onChangeEmail] = useInput(''); 13 | const [nickname, onChangeNickname] = useInput(''); ^ 에러 로그 가 뜹니다
-
미해결Slack 클론 코딩[실시간 채팅 with React]
data === undefind 무한로딩 질문
WorkspaceLoginif(data == undefind)는 데이터를 받아오기 전에 undefinde여서 무한 로딩중이 떠서 주석처리해주었고 로그인 후 새로고침시 로그인이 풀려버리는데 강의내용의 실습에서는 로그인이 풀리지않는데 고쳐야 될 부분이 있을까요..?
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
레디스 에러
redis는 4.6.10 버전 쓰고 있고 connect-redis는 7.1.0 버전을 쓰고 있습니다. 레디스 코드를 깃허브에 업데이트 된 것 처럼 수정해 주었는데 로그인을 하려니 C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\RESP2\encoder.js:17 throw new TypeError('Invalid argument type'); ^ TypeError: Invalid argument type at encodeCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\RESP2\encoder.js:17:19) at RedisCommandsQueue.getCommandToSend (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\commands-queue.js:138:45) at Commander._RedisClient_tick (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:519:76) at Commander._RedisClient_sendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:506:82) at Commander._RedisClient_legacySendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:460:105) at Commander.sendCommand (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:432:114) at <computed> [as set] (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:478:27) at Object.set (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\connect-redis\dist\cjs\index.js:24:34) at RedisStore.set (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\connect-redis\dist\cjs\index.js:71:39) at Session.save (C:\Users\mikg2\Desktop\NodeBird-production\node_modules\express-session\session\session.js:72:25) Emitted 'error' event on Commander instance at: at C:\Users\mikg2\Desktop\NodeBird-production\node_modules\@redis\client\dist\lib\client\index.js:466:31 Node.js v18.16.0이런 에러가 뜨는데 버전 문제인가요? 모듈 내부적으로 발생한 거라 어디를 손봐야 할 지 모르겠습니다.참고로 세션 객체는Session { cookie: { path: '/', _expires: null, originalMaxAge: null, httpOnly: true, secure: false } }이렇게 찍혔습니다.
-
해결됨Windows 소켓 프로그래밍 입문에서 고성능 서버까지!
프로토콜이 없는 파일 송신, 수신 예제에서 같은 오류가 발생하고 있습니다.
FileSenderCRLFileReceiver 수업자료에서 이런 오류가 발생 합니다.별도로 수정한 부분은 없습니다..
-
미해결Slack 클론 코딩[실시간 채팅 with React]
/api/users 질문
안녕하세요 선생님 강의 학습 도중 api에 대해 궁금한게 생겨 질문드려요. 로그인 할 때는 /api/users/login로 axios 요청을 하고 로그인 정보는 /api/users로 받아오는데 처음 공부할 땐 그려려니 하고 넘어갔는데 복습하다보니 login 과 users api가 반환하는 값이 살짝 다르지만 로그인 정보를 반환하는건 비슷하던데 이렇게 설정하신 이유가 있나요? 그리고 만약 로그인 api 요청 시 로그인 정보를 반환한다고 설정한 상황에 axios로 로그인 api요청 후 반환 값을 swr로 같은 api주소를 입력해 저장할 수 있나요?예를들어 axios.post('/api/login') ~~ / useSWR('/api/login', fetcher) 이런 식으로요 아직 잘 몰라 사용법이 낯설고 어렵네요..ㅎ 알려주신다면 열심히 배우겠습니다.
-
해결됨[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
시퀄라이즈 강좌 내실 생각 있으신가요?
강사님 안녕하세요이번에 스프링 JPA를 공부하면서, Express.js에서 사용했던 시퀄라이즈가 생각났는데. 시퀄라이즈를 자세하게 다뤄주시는 강좌를 내주실 생각 있으신가요?언제가 될지는 모르겠지만, 제가 나중에 다시 Node.js 백엔드 개발을 공부하게 된다면 그 강의를 신청할 의향이 있어서요
-
해결됨[개정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