이번에는 사용자가 동일한 채팅방에 접속했을 때 알림을 보내보도록 하겠습니다. 이전 포스팅에서 채팅방을 만들고 여기에 참여(join)하는 것까지 구현했었는데요. to 메소드를 사용하여 접속한 방에 새로운 메시지를 전송(emit) 할 수 있습니다. 현재 home.pug 구조는 아래와 같습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg..

Socket IO 설정을 마쳤으니 이제 사용자들이 채팅을 나눌 수 있는 채팅방을 구현해보도록 하겠습니다. 구현 목표는 동일한 방에 접속한 사용자들끼리 대화를 나눌 수 있게 하는 것입니다. 가장 먼저 home.pug에서 방 이름과 채팅 메시지를 보낼 수 있는 form 태그를 구성해줍니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg.c..

지금까지는 웹소켓을 사용하여 채팅 서비스를 개발했습니다. 그러나 생각보다 코드 구현이 까다롭다고 느끼셨을 수 있는데요. Socket IO를 사용하면 보다 간편하게 채팅 서비스를 구현할 수 있습니다. Socket IO 설치하기 Socket IO는 양방향 실시간 통신을 지원하는 프레임워크입니다. Socket IO 또한 웹소켓 프로토콜을 사용하지만, 웹소켓을 사용할 수 없을 때 다른 방식으로 이를 지원하는 기능을 포함하고 있습니다. Socket IO의 가장 큰 장점은 이제까지 웹소켓을 사용해 구현했던 코드를 훨씬 간결하게 구현할 수 있다는 것입니다. 이제 Socket IO를 설치하고 사용해보도록 하겠습니다. npm i socket.io Socket IO 서버 구현 기존의 웹소켓 코드를 아래와 같이 업데이트합니..

채팅 서비스에서는 접속한 사용자를 닉네임을 통해 구분할 수 있어야겠죠. 이번에는 웹소켓을 사용하여 닉네임을 설정하는 방법에 대해 알아보겠습니다. 먼저, home.pug에서 닉네임을 입력받을 필드를 추가해주겠습니다. // home.pug doctype html html(lang="en") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") link(rel="stylesheet", href="https://unpkg.com/mvp.css") title Zoom body header h1 Ch..

지난 글에서는 웹소켓으로 채팅 서비스를 구현하기 위한 프로젝트 설정을 마쳤었는데요. 이번에는 웹소켓을 사용하여 메시지를 수신해보도록 하겠습니다. 먼저, 웹소켓 패키지를 설치해줍니다. npm i ws 웹소켓 서버 설정하기 패키지를 설치했다면 이제 server.js에서 웹소켓을 사용할 수 있도록 서버를 설정해줍니다. // server.js import http from "http"; import WebSocket from "ws"; import express from "express"; const app = express(); app.set("view engine", "pug"); app.set("views", __dirname + "/views"); app.use("/public", express.stat..

안녕하세요. 휘입니다. 이번 시리즈에서는 WebSocket과 Socket IO를 사용한 실시간 채팅 서비스를 구현하는 방법에 대해 살펴보려고 합니다. 1. 백엔드 설정하기 먼저, 프로젝트를 진행할 새로운 디렉토리를 생성하고 이동한 다음 터미널을 엽니다. (1) NodeJS 설치와 package.json 생성 Node.js를 설치합니다. 설치 완료 후 node -v를 통해 설치가 잘 됐는지 확인할 수 있습니다. 다음으로 package.json 파일을 생성해줍니다. npm init -y express를 설치해줍니다. npm i express (2) Babel 설치와 설정 자바스크립트 컴파일러 Babel을 설치해줍니다. npm i @babel/core @babel/cli @babel/node @babel/pr..

MVC(Model-View-Controller) 패턴은 사용자 인터페이스, 데이터 및 논리 구조를 구현하는 소프트웨어 디자인 패턴입니다. MVC 모델의 핵심은 비즈니스 로직과 화면 구현을 분리하여 관리하는 것입니다. 각 요소는 다음과 같은 특징을 갖고 있습니다. 보다 자세한 사항은 MDN의 MVC 설명 문서를 참고해보시기 바랍니다. 모델(Model): 앱에서 처리할 데이터를 관리합니다. 데이터 상태가 변경되면 뷰 또는 컨트롤러에게 이를 전달합니다. 뷰(View): 레이아웃과 화면을 처리합니다. 컨트롤러: 명령을 모델과 뷰 사이에서 사용자 입력에 대한 응답을 처리하는 로직을 포함하고 있습니다. NestJS에서 MVC 구현하기 이제 NestJS에서 MVC 패턴을 구현해보도록 하겠습니다. 먼저, 새로운 프로젝..

클래스는 객체를 생성하는 템플릿입니다. 클래스를 설명하면서 붕어빵 이야기를 많이 하죠. 붕어빵을 만들려면 붕어빵을 찍어내는 틀이 있어야 합니다. 이 틀을 바로 클래스라고 하며, 클래스를 통해 찍어낸 실제 붕어빵을 객체의 인스턴스라고 합니다. 클래스 정의하기 자바스크립트에서는 두 가지 방식 1) 클래스 선언식과 2) 클래스 표현식으로 클래스를 정의할 수 있습니다. 클래스 선언식 (Class declarations) 클래스 선언식은 클래스를 정의하는 방법 중 하나이며, class 키워드와 함께 클래스 이름을 지정합니다. 이때 이름의 첫 문자는 대문자로 적어주는 것이 컨벤션입니다. class Rectangle { constructor(height, width) { this.height = height; thi..