기억 설명서

2단계는 브라우저에 "Wellcome to chat"이라는 메세지를 보내보자. 목표 server 1. 브라우저 console에 연결 되었다는 "Connected to Browser" 라는 메세지를 보낸다. 2. 브라우저에 "hello" 메세지를 보낸다. 3. 브라우저에서 연결이 끊기면 "Disconnected from Browser" 라는 메세지를 보낸다. server.js const server = http.createServer(app); const wss = new WebSoket.Server({ server }); wss.on('connection', (soket) => { console.log('Connected to Browser ✅'); soket.on('close', () => { cons..

WS를 사용해서 back-end와 front-end 사이에서 첫번째 connection(연결)을 만들어보자. 참고: MDN server.js const http = require('http'); const WebSoket = require('ws'); const express = require('express'); const app = express(); // pug로 view engine을 설정, express에 template이 어디 있는지 지정 app.set('view engine', 'pug'); app.set('views', __dirname + '/views'); // public url을 생성해서 유저에게 파일을 공유 app.use('/public', express.static(__dirna..

WebSoket framework를 다루기 전 WS에 대해 알아볼 것이다. WebSoket core 즉, WebSoket 기반이고 기초이기 때문이다. ws: a Node.js WebSocket library 말 그대로 WebSocket 라이브러리이다. 여기에서 WS의 사용법에 대해 기록하려 한다. https://www.npmjs.com/package/ws#installing ws Simple to use, blazing fast and thoroughly tested websocket client and server for Node.js. Latest version: 8.8.0, last published: a month ago. Start using ws in your project by running..

실시간(real-time) 기능을 구현 하기 전, 어떤 것이 실시간을 가능하게 해주는지 알아보자 실시간 기능을 위해 사용할 것은 WebSoket 이라는 것인데, WebSoket 덕분에 실시간 chat, notification 같은 실시간(real-time)기능을 구현 할 수 있다. WebSoket이 어떻게 작동하는지 알아보기 전에 HTTP가 무엇인지 살펴보자. 같은 이미지에 있는 이유는 둘 다 protocol(프로토콜)이기 때문이다. [프로토콜: 복수의 컴퓨터 사이나 중앙 컴퓨터와 단말기 사이에서 데이터 통신을 원활하게 하기 위해 필요한 통신 규약] HTTP HTTP란? 모든 서버들이 작동하는 방식이다. 위의 그림을 보고 설명하자면 사용자가 요청(request)을 보내면, 서버가 반응(response)한..

지금 껏 한 것을 정리해본다. 1. 개발환경 구축 Nodemon을 설정하기 위해 nodemon.json을 생성했다. { "ignore": ["src/public/*"], "exec": "babel-node src/server.js" } nodemon은 프로젝트를 살피고 변경사항이 있을 시 서버를 재실행 해주는 프로그램이다. public 안의 코드 변화가 있을 때는 반응하지 않도록 설정했다. 서버를 재시작하는 대신 babel-node를 실행하게 된다. Babel은 작성한 코드가 일반 NodeJS 코드로 컴파일 해주는데 그 작업을 src/server.js에서 해준다. { "presets": ["@babel/preset-env"] } server.js 파일에서는 express를 불러와 express를 통해 어..

server.js const express = require('express'); const app = express(); // pug로 view engine을 설정, express에 template이 어디 있는지 지정 app.set('view engine', 'pug'); app.set('views', __dirname + '/views'); // public url을 생성해서 유저에게 파일을 공유 app.use('/public', express.static(__dirname + '/public')); // home.pug를 render 해주는 router handler를 만든다. app.get('/', (req, res) => res.render('home')); // router handler co..

클론 코딩에 앞서 server setup을 위해 먼저 src 폴더를 생성한다. 이후 `server.js`파일을 생성한다. 프로젝트 루트 폴더 안에 `babel.config.json`, `nodemon.json`를 생성한다. 이후 아래의 라이브러리를 받는다. $npm install @babel/cli @babel/core @babel/node nodemon @babel/preset-env -D 1. nodemon.json { "exec": "babel-node src/server.js" } - nodemon은 "exec"의 명령어를 이용해서 이거 하나만 실행되도록 한다. 2. babel.config.json 여기에서는 "presets"을 설정할건데, `npm install @babel/preset-env`..