[WebSocket/Socket IO] 채팅 서비스 구현 1. 프로젝트 설정

안녕하세요. 휘입니다. 이번 시리즈에서는 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/preset-env -D

babel.config.json을 생성하고 다음과 같이 입력해줍니다.

{
  "presets": ["@babel/preset-env"]
}

(3) 서버 세팅하기

루트 디렉토리에 src 디렉토리를 새롭게 생성하고 server.js 파일을 만들어줍니다. 다음과 같이 기본 express 서버 세팅을 해주겠습니다.

// server.js

import express from "express";

const app = express();

console.log("Hello!");

app.listen(8000);

(4) Nodemon

서버를 자동으로 새로고침해주는 Nodemon을 설치해주겠습니다.

npm i nodemon -D

다음으로 nodemon.json 파일을 생성하고 다음과 같이 입력해줍니다.

{
    "exec": "babel-node src/server.js"
}

package.json 파일을 열어 다음과 같이 “scripts”: {”dev”: “nodemon”} 를 수정해줍니다.

{
  "name": "zoom-self",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.19.3",
    "@babel/core": "^7.20.5",
    "@babel/node": "^7.20.5",
    "@babel/preset-env": "^7.20.2",
    "nodemon": "^2.0.20"
  },
  "dependencies": {
    "express": "^4.18.2"
  }
}

위와 같이 설정을 마쳤다면 이제 아래 명령어를 통해 서버 작동을 확인해봅니다.

nodemon dev

(5) git 설정하기

마지막으로 git을 설정해주겠습니다. 깃을 시작합니다.

git init .

.gitignore 파일을 만들고 다음과 같이 설정해줍니다.

.gitignore
/node_modules

README.md 파일도 하나 만들어주겠습니다. 최종 디렉토리 구성은 다음과 같습니다.

이제 백엔드 구성을 마쳤으니 프론트 설정을 진행해보도록 하겠습니다.

2. 프론트 설정하기

(1) pug 설치

Express 템플릿 엔진으로 사용할 pug를 설치해줍니다.

npm i pug

다음으로 src 디렉토리 아래에 views 디렉토리를 만들고 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")
    title Chat
  body 
  h1 Chat Service

server.js로 이동하여 pug를 사용할 수 있도록 설정해줍니다.

// server.js

import express from "express";

const app = express();

app.set("view engine", "pug"); // view engine으로 pub 설정
app.set("views", __dirname + "/views"); // views 디렉토리 지정

app.get("/", (req, res) => res.render("home"));

app.listen(8000);

(2) public 디렉토리 설정

root/src/public과 같은 디렉토리 구조로 새롭게 public 디렉토리를 생성해줍니다. public 디렉토리 내에 app.js를 하나 만들어줍니다. 여기에는 앱 구동에 들어갈 기능들이 담길 것입니다.

 

다음으로 home.pug로 이동하여 방금 생성한 app.js를 연결해줍니다.

// 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")
    title Live Chat
  body 
  h1 Chat Service
  script(src="/public/js/app.js")

server.js로 이동하여 public 디렉토리 경로를 지정해줍니다.

// server.js

import express from "express";

const app = express();

app.set("view engine", "pug");
app.set("views", __dirname + "/views");
app.use("/public", express.static(__dirname + "/public")); // public static 경로 설정하기

app.get("/", (req, res) => res.render("home"));

console.log("Hello!");

app.listen(8000);

http://localhost:8000/public/js/app.js 브라우저에 입력하여 연결 작업이 잘 진행됐는지 확인해볼 수 있습니다.

(3) MVP CSS 연결하기

마지막으로 기본적인 CSS를 구현해주는 MVP CSS를 연결해주겠습니다. home.pug로 이동하여 header에 <link rel="stylesheet" href="https://unpkg.com/mvp.css">를 추가해줍니다.

// 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") // MVP CSS 연결
    title Live Chat
  body 
  h1 Chat Service
  button Call
  script(src="/public/js/app.js")

이상으로 프론트까지 프로젝트 설정을 모두 마쳤습니다! 최종 디렉토리 구조는 다음과 같습니다.