묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Slack 클론 코딩[실시간 채팅 with React]
useSwr 여러컴포넌트에 사용가능한가요
workSpace 에도 useSwr 로 유저데이터랑 채널데이터 요청하고모달안에서도 유저데이터랑 채널데이터 요청하는데 이러면 불필요한 요청이 모달하나 띄운다고 실행되는거 아닌가요? workSpace에서 revalidate 함수만 넘겨서 하면 어떤가요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
코드에 대한 질문이 잇습니다.
강의를 전부 진행한지 시간이 좀 된 상태에서 프로젝트 리팩토링중 이해가 안되는 부분이 있어 질문드립니다.아래 의문점에 대해 확인과 의견을 부탁드립니다.작성된 코드는 제로초님의 front / nest-typeorm 에서 가져온 코드입니다. 의문점 : 채팅 데이터 전송에 웹소켓이 역할을 하지 않는것 같다. 그렇게 생각한 근거 : 1-1 : useSocket을 이용해서 소켓에 연결하는데 ws-${workspace} 의 message에 onMessage 함수를 연결하고 있다const Channel = () => { const [socket] = useSocket(workspace); useEffect(() => { socket?.on('message', onMessage); return () => { socket?.off('message', onMessage); }; }, [socket, onMessage]); }const useSocket = (workspace?: string): [Socket | undefined, () => void] => { const disconnect = useCallback(() => { if (workspace && sockets[workspace]) { console.log('소켓 연결 끊음'); sockets[workspace].disconnect(); delete sockets[workspace]; } }, [workspace]); if (!workspace) { return [undefined, disconnect]; } if (!sockets[workspace]) { sockets[workspace] = io(`${backUrl}/ws-${workspace}`, { transports: ['websocket'], }); console.info('create socket', workspace, sockets[workspace]); sockets[workspace].on('connect_error', (err) => { console.error(err); console.log(`connect_error due to ${err.message}`); }); } return [sockets[workspace], disconnect]; };1-2 : 백엔드에서 채팅을 수신받는 createWorkspaceChannelChats는 ws-${url}-${chatWithUser.ChannelId} 의 message에 받아온 채팅을 보내고 있다. async createWorkspaceChannelChats( url: string, name: string, content: string, myId: number, ) { const channel = await this.channelsRepository .createQueryBuilder('channel') .innerJoin('channel.Workspace', 'workspace', 'workspace.url = :url', { url, }) .where('channel.name = :name', { name }) .getOne(); const chats = new ChannelChats(); chats.content = content; chats.UserId = myId; chats.ChannelId = channel.id; const savedChat = await this.channelChatsRepository.save(chats); const chatWithUser = await this.channelChatsRepository.findOne({ where: { id: savedChat.id }, relations: ['User', 'Channel'], }); this.eventsGateway.server // .of(`/ws-${url}`) .to(`/ws-${url}-${chatWithUser.ChannelId}`) .emit('message', chatWithUser); } 2 : 네트워크 탭의 웹소켓 메시지에 채팅내역 수신내역이 남지 않는다이미지가 보일지는 모르겟지만 빨간 박스가 새로 전송한 채팅이고 정상적으로 수신받으면 네트워크 탭에 messag에 내역이 남아야 하는걸로 알고 있는데 남지 않는걸로 확인됩니다. 3 : 웹페이지에서 포커스를 유지한 상태로 모바일에서 입력시 채팅이 전송되지 않음 왜 채팅이 정상적으로 전송된거 처럼 보일까 생각해보니 swr이 브라우저를 포커스 아웃후 재 포커스하면 채팅데이터를 다시 가져오는걸로 추측하여 웹페이지 포커스 유지중 모바일로 테스트해보니 채팅이 전송되지 않습니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
NODE로 프로그램을 WINDOW 설치 프로그램으로 만들고싶습니다.
제가 만든 NODEJS 프로그램을 한글처럼 WINDOW 환경에서 통합설치 프로그램 하나만 설치하면 DB, NODE 프로그램이 설치되도록 하고싶은데 어떤 방법이 있고 구글에 어떻게 검색해야 하는지 궁금합니다.
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
MentionsTextarea 와 autoSize 사이 버그가 하나 있습니다.
MentionsTextarea 에 ctrl+c ctrl+v 를 이용하여 값을 입력시 사이즈는 조절되나 글자 줄 수가 잘려서 보이는 버그가 있습니다.MentionsTextarea 을 사용시 실제보이는 textarea와 보이지 않는 span 영역이 생성되는데 이 중 autosize에 span ref만 넘어가서 span영역만 커지고 textarea의 영역은 유지되서 생기는 버그로 보입니다.이후 글자를 제거 하거나 추가로 입력시 정상적으로 보이게 됩니다.
-
미해결[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
sequelize initiate() 쓰는 방식 최신인지, 공식문서 방법인지 궁금합니다
영상에서는 sequelize 공식문서에서 바뀌어서 따라갔다고 하는데 공식문서에서 initiate() 쓰는 것 검색하였을 때 안보이며 static이랑 같이 쓴 것도 아직은 못찾았습니다 공식문서 따라가보면 주로 define(), init()을 쓰는데 강의영상의 방식과는 차이점이 있습니다.define()const { Sequelize, DataTypes } = require('sequelize'); const sequelize = new Sequelize('sqlite::memory:'); const User = sequelize.define('User', { // Model attributes are defined here firstName: { type: DataTypes.STRING, allowNull: false }, lastName: { type: DataTypes.STRING // allowNull defaults to true } }, { // Other model options go here }); // `sequelize.define` also returns the model console.log(User === sequelize.models.User); // trueinit()// Invalid class User extends Model { id; // this field will shadow sequelize's getter & setter. It should be removed. otherPublicField; // this field does not shadow anything. It is fine. } User.init({ id: { type: DataTypes.INTEGER, autoIncrement: true, primaryKey: true } }, { sequelize }); const user = new User({ id: 1 }); user.id; // undefined 강의에서 알려주는 방식으로 DB연결도 되고 조작도 잘되지만이렇게 질문을 남긴 이유는강의에서는 공식문서를 따라갔다고 하는데 공식문서에서는 찾기 어렵다는 점과강의에 나오는 방식이 시기가 지난 방법이 아닐까 하는 생각에 질문 남기게 되었습니다 제가 찾아본게 잘못된걸수도 있기에 그런점 있다면 알려주세요글읽어주셔서 고맙습니다:)
-
미해결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 백엔드 개발을 공부하게 된다면 그 강의를 신청할 의향이 있어서요