[Node.js] Zoom 클론코딩 - 세팅편

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"
}

nodemon.json을 만들어서 exec 명령어를 사용하면 서버가 실행되게 작업하였다. 

단, src/public 폴더에 있는 파일을 수정할 경우에는 재시작되지 않게 설정했다. 

 

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

바벨 설정도 마무리해준다. 

 

{
  "name": "zoom-clone",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "dev": "nodemon"
  },
  "devDependencies": {
    "@babel/cli": "7.17.10",
    "@babel/core": "7.17.10",
    "@babel/node": "7.17.10",
    "@babel/preset-env": "7.17.10",
    "nodemon": "2.0.16"
  }
}

package.json에 있는 script 명령을 모두 지우고 dev를 추가해 nodemon.json에 설정해둔 명령어가 실행되게 했다. 

 

npm i express pug

이제 서버를 가동하기 위해서 express 패키지를 다운로드하였고, 탬플릿 패키지로 pug를 다운로드하였다. 

 

// src/server.js
import express from "express";

const app = express();

app.listen(3000);

server.js에서 실행 시 3000번 포트에 서버가 실행되게 추가하였다.

 

2. FrontEnd 세팅

/src/views/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 Zoom Clone
        link(rel="stylesheet", href="https://unpkg.com/mvp.css")
    body 
        header
            h1 Zoom

        main 
            h2 Welcome to Zoom
        script(src="/public/js/app.js")

home.pug를 만들어서 경로에 접속 시 웹사이트에 나올 화면을 임의로 작성했다.  

그리고 앞으로 웹소켓 설정을 위해서 script로 app.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"));

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

app.listen(3000);

Front는 pug를 사용해서 구성하기 위해서 server.js에 set을 사용해서 view engine을 설정하고 views 폴더를 정했다. 

그리고 자바스크립트 파일이 있는 public 폴더를 static으로 설정해

사용자가 /public으로 가면 __dirname + '/public' 폴더가 보이게 설정했다. 

 

마지막으로 ' / ' 경로에 접속 시 만들어둔 home.pug가 랜더링 되게 설정했다. 

어떤 경로로 접속하더라도 ' /* '을 통해서 ' / ' 로 리다이렉트 시켰다. 

npm run dev로 실행해보면 제대로 pug 파일이 랜더링 된 것을 확인할 수 있다.