0. 들어가며 앞서 채팅방편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 3. [Node.js] Zoom 클론코딩 - 채팅방편 기본적인 Socket IO에 대해서 어느 정도 공부가 되었다고 판단해서 React에서 간단한 채팅 기능을 만들 생각이다. 결국 React에서 사용하는 것이 목적이기 때문! 1. 구성하기 React npm install socket.io-client Socket IO는 React에서 기본적으로 제공하는 패키지가 당연히 아니므로 설치해준다. Node npm install express cors npm install nodemon @babel/core @babel/cli @..

0. 들어가며 앞서 채팅편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 2. [Node.js] Zoom 클론코딩 - 채팅편 1. Socket IO Socket IO는 실시간, 양방향, event 기반 통신을 제공해주는 framework이다. webSocket과 같은 역할을 하는 것처럼 보이는데, 브라우저가 webSocket을 지원하지 않아도 socket IO는 다른 방법을 사용해서 기능을 제공한다. 좀 더 넓은 범위에서 사용할 수 있다는 뜻이다. 정리하면, websocket의 부가기능이 아닌, 필요에 따라 Socket IO가 websocket을 사용하거나 안 할 수 있다. 프론트와 백엔드 간 실시간 통신을 가능하게 해주는 프레임워크 혹은 라이브..

0. 들어가며 WebSocket 공부를 위해서 JavaScript와 Node.js를 사용해서 Zoom 클론 코딩을 할 계획이다. 사용하는 준비물로는 Node.js, JavaScript, Socket.io를 사용할 예정이다. 1. Server 세팅 프로젝트 폴더를 만들고 초기 세팅을 진행한다. npm init -y npm i nodemon @babel/core @babel/cli @babel/node @babel/preset-env -D 코드를 변경하면 자동으로 새로고침이 되길 원하기 때문에 nodemon을 설치해준다. 또 바벨 설정을 위해서 필요한 패키지들도 함께 다운로드한다. { "ignore": ["src/public/*"], "exec": "babel-node src/server.js" } node..

웹소켓? TCP 연결에 완전한 이중 통신 채널을 제공하는 컴퓨터 프로토콜이다. 서버와 클라이언트 간의 웹소켓 연결은 HTTP 프로토콜을 통해 이루어지는데, 연결이 정상적으로 이루어진다면 서버와 클라이언트 간에 웹소켓 연결(TCP/IP)이 이루어지고 일정 시간이 지나면 HTTP 연결은 자동으로 끊어진다. 서버와 클라이언트 간의 효율정인 양방향 통신과 데이터 전송을 위해서 사용된다. 일반적으론 클라이언트에서 Request를 보내면 서버에서 Response로 응답하는 StateLess 관계로 알고 있다. 즉, HTTP 통신은 클라이언트가 요청을 보내는 경우에만 서버가 응답하는 단방향 통신 방식 하지만, 웹소켓은 StateFull하다. 매번 요청을 보내는 것이 아닌 한 번의 요청으로 HandShake 과정을 거..