Today, I will

* 노마드 코더의 Do it! 클론코딩 줌 책을 정리한 포스팅입니다. 1. disconnecting 이벤트 이해하기 채팅룸을 나갈 때 메시지를 표시하는 기능을 추가하도록 한다. 이때 사용할 socket.io의 이벤트는 disconnecting이다. disconnecting 이벤트는 브라우저 창을 닫거나 컴퓨터를 꺼서 채팅룸을 나가기 직전에 발생하는 이벤트이다. 이를 이용하면 채팅룸을 빠져나가기 직전에 메시지를 보낼 수 있다. 메시지 전송 방식은 채팅룸에 접속할 때와 거의 같다. (1) 서버 코드 변경 wsServer.on('connection',(socket)=>{ //console.log(socket); socket.on('enter_room',(roomName, done)=>{ done(); //co..

1. localhost:3000 에서 Hello express 반환 //import express from 'express'; const express = require("express"); const app = express(); const port = 3000; app.get('/', (req, res)=>{ res.set({"Content-Type":"text/html; charset=utf-8"}); //헤더값 설정 res.end("Hello express"); }); app.listen(port, ()=>{ console.log(`Start Server : use ${port}`); }); const express = require("express"); //express 모듈 불러오기 const..

* 노마드 코더의 Do it! 클론코딩 줌 책을 정리한 포스팅입니다. 1. 들어가며(socket.io를 이용한 채팅룸 만들기) 실시간으로 데이터를 주고받는 프로토콜이 뭔지 어느 정도 감이 잡혔으니, 이제 이와 관련해 좀 더 편리한 라이브러리를 적용해 볼 차례이다. 제공하는 기능이 많고, 동작이 안정된 라이브러리는 개발 속도에 날개를 달아 준다. 똑같은 기능을 하는 프로그램을 만든다고 해도 라이브러리를 쓰는지 안 쓰는지에 따라 그 과정에서 겪는 경험은 크게 달라질 수밖에 없다. socket.io는 등장한 지 오래되었기 떄문에 안정적이고 편리한 기능을 많이 제공한다. 실시간 기능을 구현하고, 이벤트를 기반으로 한 양방향 통신도 가능하다. 웹소켓과 비슷한 면이 많고, 관련성 또한 있다. 2. socket.io..

* 노마드 코더의 Do it! 클론코딩 줌 책을 정리한 포스팅입니다. 1. 들어가며(실시간 채팅 완성하기) 단순히 서버와 사용자 간의 연결이 이루어지고 메시지가 읽히는 걸 확인했다고 해서 그것을 채팅 앱이라고 할 수는 없다. 실제로 메시지를 보내고 받아 가면서 화면에 보여주는 기능을 추가해보도록 한다. 사용자 여려 명이 메시지를 직접 입력해 보내거나 확인할 수 있게 만들고, 메시지를 보내는 사람의 별명을 설정해 사용자를 구분하는 기능까지도 만들어보도록 한다. 2. 채팅 기능 준비하기 브라우저 화면에 입력 필드와 목록을 만들고, 메시지를 주고 받은 결과를 바로바로 표시할 수 있게 해본다. (1) 웹 요소 추가하기 뷰 엔진 pug를 사용해서 만든 html문서, home.pug를 수정해 입력 폼(양식)과 메시..

* 노마드 코더의 Do it! 클론코딩 줌 책을 정리한 포스팅입니다. 1. 들어가며(웹소켓을 이용한 실시간 기능 구현하기) Zoom은 화상 채팅 애플리케이션이므로 실시간 채팅 기능이 핵심이다. 실시간 채팅 기능을 구현하기 위해 웹소켓이라는 프로토콜을 사용할 것이다. 처음에는 익명으로 채팅을 주고받을 수 있게 구현하고, 그런 다음 닉네임을 추가하거나 채팅룸의 컨셉을 잡는 순서로 작업이 진행될 것이다. 2. 웹소켓 설치하고 서버 만들기 (1) ws 패키지 설치 서버가 웹소켓 프로토콜 방식으로 동작할 수 있게끔 웹소켓 방식의 규칙이나 핵심 기능을 제공하는 패키지를 설치하고, 그 패키지를 활용해가며 원하는 기능을 구현해보도록 한다. ws는 웹소켓의 규칙에 맞게 구현한 핵심 기능을 제공하는 간편하고, 빠르고, 안..

* 노마드 코더의 Do it! 클론코딩 줌 책을 정리한 포스팅입니다. 1. 프로젝트 폴더 초기화 1. package.json 파일 자동 생성 npm init -y 2. package.json description 수정 3. README.md 파일 생성 2. 서버를 위한 준비 작업 1. nodemon 설치 nodemon은 소스 코드를 수정할 때마다 코드의 변화를 감지해서 자동으로 서버프로그램을 재시작해주는 도구 nodemon은 코드를 Node.js 기반으로 실행해주는 것은 물론이고 모니터링까지 해준다. npm i nodemon -D 그럼 아래와 같이 변경된다. -D 옵션은 개발 및 테스트를 위해 설치하는 패키지라는 의미이다. { "name": "noom", "version": "1.0.0", "descri..