템플릿 엔진

바닐라js의 동적 파일을 관리하기 위해 템플릿 엔진을 사용하자.

Pug (구 Jade): 간결하면서도 가독성이 좋은 템플릿 엔진. 들여쓰기로 태그를 구분하므로 HTML 태그를 적을 때보다 코드의 양이 적어지고, 태그 구조를 파악하기 쉬워져 가독성이 향상
EJS (Embedded JavaScript): JavaScript 코드를 삽입하여 HTML을 생성하는 방식으로, HTML에 태그를 직접 입력하면서도 자바스크립트 코드를 삽입할 수 있어서 자유도가 높다.
Nunjucks: Jinja2(파이썬 템플릿 엔진)의 문법과 유사하여 파이썬 프로그래머들에게 익숙한 문법을 사용할 수 있다. 쉽게 사용 가능한 문법과 다양한 필터(filter) 기능을 지원하여 코드의 재사용성을 높임.

이 중 html과 비슷한 문법을 사용하는 ejs 와 nunjucks를 사용해 보았다.
동적인 파일은 views 폴더에 넣어 html.ejs(혹은 njs) 형태로 저장하는게 좋다.
이번 프로젝트에서는 html 코드를 재사용 하고(추후 리팩토링할 내용), 해당 parameter 로 render 해주기 위해 사용했다.

const express = require("express");
const path = require("path");
const app = express();
// const nunjucks = require("nunjucks");
// nunjucks.configure("view", {
//   autoescape: true,
//   express: app,
// });
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");
app.use(express.static("./"));

app.get("/contentLook/:id", function (req, res) {
  var pageid = req.params["id"];
  console.log("pageid:", pageid);
  res.render("index");
});

app.listen(3000, () => {
  console.log("server running...");
});

해당 코드는 저번시간의 서버에 ejs(njs) 를 추가한 내용이다.

__dirname은 현재 실행중인 파일(app.js)이 위치한 폴더의 경로를 뜻하고, "views"는 뷰 파일들이 위치할 폴더명, path.join() 메소드는 운영체제별로 경로 구분자를 지정하여 경로를 조합해주는 역할이다. 이를 통해 경로를 지정해줄수 있다.이렇게 경로를 지정해 주는 이유는 코드가 실행되는 환경(서버)에서 파일 경로가 변할 수 있는 경우가 있기 때문 -> 이를 통해 항상 같은 경로를 가리킬수 있게 됨.

app.set("view engine", "ejs"); 는 Express에서 사용할 뷰 엔진을 설정하는 코드. .ejs 확장자를 가진 뷰 파일들이 Express에서 자동으로 EJS 엔진을 사용하여 렌더링된다는 뜻.

따라서

app.get("/contentLook/:id", ...생략 ) 코드는 해당 경로일 때 views폴더 안의 index.ejs파일로 렌더해준다는 뜻이 된다.