WebRTC - 실시간 채팅 APP 만들기 (2)

2. 프론트 세팅

• 폴더세팅

- src/public 폴더 생성
ㄴ js 폴더 생성
  ㄴ app.js 파일 생성

- src/views 폴더 생성
ㄴ home.pug 파일 생성

 

 

home.pug에서 일반적인 html을 우선 작업한다.

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 RTC
    body 
        h1 It works!

 

 

pug 세팅을 위해 server.js에서

import express from "express";

const app = express();

/** 추가된 부분 */
app.set("view engine", "pug"); 
app.set("views", __dirname + "/views"); 
/**/

const handleListen = () => console.log(`Listening On http://localhost:3000`); /*추가*/
app.listen(3000, handleListen);

 

이상없이 작동하는지 확인하기 (npm run dev 명령어 실행)

 

• 라우터 세팅

- home으로 면 request, response를 받고 view단의 home을 렌더링 하도록 만든다.

- handleListen 윗 줄에 작성

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

 

• static 작업

- scripts에 public 폴더 추가

- /public으로 이동하게 될 경우, public 폴더를 보여줘

- 라우터 세팅 위줄에 작성

app.use("/public", express.static(__dirname + "/public"));

 

자바스크립트가 수정될 때만 빌드되도록 수정하기-> nodemon.json에서 ignore 명령어 추가

: src/public 하위의 모든 파일 무시

{
  "ignore": ["src/public/*"],
  "exec": "babel-node src/server.js"
}

 

app.js는 수정 후 저장해도 nodemone이 재시작되지 않지만, server.js를 수정후 저장하게되면, nodemon이 재시작된다.