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. 들어가며 앞서 세팅편을 보지 않으셨다면 먼저 보고 오시는 것을 추천합니다. 1. [Node.js] Zoom 클론코딩 - 세팅편 1. 서버 설정하기 npm i ws Node.js에서 webSocket의 핵심 패키지인 ws이다. express는 기본적으로 http를 지원하기 때문에 ws는 지원하지 않는다. 그래서 서버에 ws 기능을 추가로 설치할 예정이다. import express from "express"; import http from "http"; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.static(__dirname + ..

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..

0. 시작하면서 컴퓨터를 포맷하고 기존에 사용하던 프로그램들을 새롭게 설치하는 작업을 하면서, 이번에 React 개발환경을 구성하는 디테일한 방법을 정리하고자 한다! 설치하는 파일은 VS Code, Node.js, yarn, Git 을 설치할 것이다. Mac과 Window가 조금씩은 다를 수 있는데, 이번엔 Window 컴퓨터를 포맷했으니 Window용 세팅이다! 다음에 사용하는 Mac을 포맷할 경우가 있다면, 그때 또 Mac용을 작성하겠다! 1. VS Code 설치 구글에 VS Code를 검색하면 위와 같이 나올것이며, Download를 클릭하자! 우린 Window 컴퓨터를 사용하니깐 Window 용을 다운받자! 설치가 완료되고 실행하면 위와같은 화면이 나온다. 당연히 동의하고 다음을 쭉 누른다! 위 ..