express-generator를 사용해서 Express 웹서버를 구현할 때 템플릿을 지정할 수 있다. 따로 설정하지 않으면 jade 형식으로 뷰가 구성되고, 특정 형식으로 템플릿을 지정하고 싶다면 express --ejs 앱이름 같이 --버전 을 옵션으로 같이 주면 된다. 그런데 우리에게 가장 친숙한 Html을 템플릿으로 사용하려면 어떻게 해야할까? // ... app.engine("html", require("ejs").renderFile); app.set("view engine", "html"); // ... app.engine("html", require("ejs").renderFile); 부분은 express-generator를 사용했을 때 자동으로 생기는 것이 아니라 따로 작성을 해야한다. h..

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

1. express 설치 express 설치 npm install express -g global 옵션을 사용해서 어느 경로에서든 express를 사용할 수 있게 한다. express-generator 설치 npm install express-generator -g express 환경을 구성해주는 express-generator를 설치한다. 마찬가지로 전역에 설치하기 때문에 어디서든 사용할 수 있다. 2. 프로젝트 생성 express 앱이름 express 명령어를 사용해서 원하는 nodejs 프로젝트명을 입력한다. 기본적으로 생성되는 프로젝트는 jade 형식으로 뷰가 구성된다. express --view-ejs 앱이름 만약 ejs 형식으로 프로젝트를 만들고 싶다면 --view-ejs 옵션을 사용해서 변경..