pug는 Node.js환경의 템플릿 엔진이다. 템플릿 엔진에는
pug
이외에도handlebars
,mustache
등이 있다템플릿 엔진을 사용하는 이유는 코드 간소화라는 이유도 있지만 컴파일 후 html문서를 렌더링하는 형식이라 생산성이 높아지기 때문이다.
npm i pug
src/server.js
파일 생성 후 설정
pug 템플릿 문법
태그는 <> 없이 태그명만 적는다.
들여쓰기로 구분하므로 들여쓰기에 주의해야 한다.
속성(attributes)은 ()
소괄호로 나타낸다.
div
는 태그명 생략이 가능하다.
class는 그냥 [태그명].[클래스명]
h1.title
id 속성은 [태그명]#[id명]
이다.
button#login
여러줄 텍스트는 |
를 삽입한다.
인라인 스타일
<!DOCTYPE html>
<head>
<title>express with pug</title>
<link rel = 'stylesheet' href='./style.css/'></link>
</head>
<body>
</body>
</html>
doctype html
html
head
title = express with pug
link(rel='stylesheet', href='./stylesheets/style.css')
body
header
h1 Pug
main
h2 Welcome to Pug
script(src="/public/js/app.js")
express는 가장 인기있는 Node 웹 프레임워크라고 한다. 그리고 express를 이용하면 쉽게 웹 서버 오픈이 가능하다.
HTTP 통신 요청(Request; GET, POST, DELETE 등)에 대한 핸들러를 만든다.
템플릿에 데이터를 넣어 응답(response)을 만들기 위해 view의 렌더링 엔진과 결합(integrate)한다.
app.set('view engine', 'pug')
app.use("/", function(req, res) { res.sendFile(__dirname + "/index.html"); });
접속을 위한 포트나 응답 렌더링을 위한 템플릿 위치같은 공통 웹 어플리케이션 세팅을 한다.
핸들링 파이프라인(reqest handling pipeline) 중 필요한 곳에 추가적인 미들웨어 처리 요청을 추가한다.
import express from "express"; // Express를 불러오는 신식방법
const app = express();
app.get('/', function (req, res) {
res.send('Hello World!');
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});
// src/server.js
app.set("view engine" , "pug"); // 확장자를 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("/")); // 유저가 "/"(public폴더)내만 볼 수 있도록 다른 경로로 갔을 시 홈으로 리다이렉트 설정
const handleListen = () => console.log(`Listening on http://localhost:3000`);
app.listen(3000, handleListen);
express에서 최신 자바스크립트 문법을 사용하기 위해 babel을 적용한다.
npm install @babel/core -D //바벨 핵심 모듈
npm install @babel/node -D //바벨 node 작업용 패키지
npm install @babel/cli -D //바벨 cli 작업용 패키지
npm install @babel/preset-env -D //언어 변환역할을 수행하는 패키지
//babel.config.json 파일
{
"presets":["@babel/preset-env"]
}
nodemon은 Node.js 프로젝트에서 변경 사항이 발생했을 때 자동으로 서버를 재시작해주는 프로그램이다. 계속 ctrl + c로 서버를 종료했다가 켜는 것은 굉장히 불편하기 때문에 그런 상황에서 굉장히 유용한 모니터링 유틸리티이다.
npm i nodemon
// package.json 파일
"scripts": {
"dev": "nodemon"
},
// nodemon.json 파일
{
"ignore": ["src/public/*"], // public폴더 변경은 새로고침 X
"exec": "babel-node src/server.js"
}
npm run dev
이제 알아서 수정하고 저장했을 때 자동으로 프로그램을 재실행해준다.
오늘은 Node.js환경에서 서버를 열 때 사용할 수 있는 여러가지 모듈 패키지들을 알아보았다.
express는 http보다 훨씬 쉽게 서버를 오픈할 수 있는 Node.js 웹 서버 프레임워크로, 렌더링 엔진과 꼭 결합해서 사용해야 한다는 점이 흥미로웠다.
그리고 그 렌더링 엔진으로 pug가 있는데 html문법과 많이 달라서 처음에는 애를 먹을 수 있지만 획기적으로 코드의 양을 줄일 수 있다.
그리고 마지막으로 nodemon이 있는데, nodemon은 서버 환경에 변경사항이 생겼을 때 서버를 껐다 켜지 않아도 자동으로 서버를 재실행해주는 모니터링 유틸리티였다.
이 세가지는 Node.js환경에서 많이 사용하고 인기있는 모듈 패키지이다.