환경은 node.js 이다.
바벨 (최신버전 자바스크립트를 서버 혹은 웹브라우저에 맞는 ES5 자바스크립트 언어로 만들어 주는)
nodemon 이건 코드를 바꾸면 실시간으로 반영해주기 위한
그 다음
express 이거는 서버 뭐 그런 거 같음.
pug 이거는 html 쉽게 쓰는거임.
{
"name": "zoom",
"version": "1.0.0",
"description": "Zoom Clone using WebRTC and Websockets",
"main": "index.js",
"scripts": {
"dev": "nodemon"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/cli": "^7.23.0",
"@babel/core": "^7.23.2",
"@babel/node": "^7.22.19",
"@babel/preset-env": "^7.23.2",
"nodemon": "^3.0.1"
},
"dependencies": {
"express": "^4.18.2",
"pug": "^3.0.2"
}
}
이렇게가 package.json이고,
{
"ignore" : ["/src/public/*"],
"exec" : "babel-node src/server.js"
}
이게 nodemon.json
nodemon 설정임. nodemon 실행하면 저기에 맞춰서 실행됨.
{
"presets" : ["@babel/preset-env"]
}
이건 바벨 설정. 대충 설정이 저거에 맞춰져 있단 뜻 같음.
.gitignore에는
/node_modules
아무래도 우리가 다운받은 라이브러리들을 깃에 올리는 건 좀..
라이브러리 정보만 있으면 되지. package.json만 올리면 됨.
그 다음 패키지 구조가
이런 식임.
src중에 public이 클라이언트에게 줄 것들임.
즉, js/app.js는 클라이언트에서 실행할 것이라는 거임.
views에 저거 home.pug
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
title Noom
body
header
h1 Noom!
main
h2 Welcome to Noom
script(src="/public/js/app.js")
이게 pug인데 걍 html 쉽게 쓰는 뭐 그런 거 같음.
자, 이제 서버를 구동시키는 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"));
console.log(__dirname);
app.get("/", (req, res) => res.render("home"))
app.get("/*", (req, res) => res.redirect("/"))
const handleListen = () => console.log(`Listening on http://localhost:3000`);
app.listen(3000);
express 가져와서
view engine은 pug로 설정해주고
views라는 곳은 저 디렉토리, 설정 해 주고.
그리고 public은 use 해서 경로까지 명시해서 저기 있는건 클라이언트에게 보낸다는 뜻.
GET 요청이 오는데 / 이 url로 오면 home을 render함.
vuew engine, views 이런 게 다 문자열이지만 예약어 인가 봄.
뷰 엔진이 pug이고 views가 저 위치라고 명시해 줬으니,
render(템플릿명) 하면 알아서 저 위치의 템플릿명.pug 해서 렌더링 해 주는 듯
그리고 일단은 걍 아무 url이나 들어오면 리다이렉트로 /로 보내서 즉, 다 home.pug 페이지 보여줌
이제
app.listen(포트번호)
하면 서버가 띄워짐.
app.js는 현재
저기 pug 보면 script 해서 불러오는데,
그냥 이렇게만 해 놨음.