[Node.js] HTML templating (JS로 템플릿 사용하기)

Zero·2023년 3월 13일

node.js web

Node

목록 보기

6/11

HTML template 이란 ?

HTML과 data를 섞어서 html 화면에 변화를 주는 것

1) HTML Templating 작업이란 ?

반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)을 결합해서, 화면에 추가하는 작업이라고 할 수 있다.

EJS 용 Express 구성하기 🔍

기본 세팅 💡

npm init -y
npm i express

const express = require("express");
const app = express();
const port = 3000;

app.get('/', (req,res) = {
	res.send("Routing !!")
});

app.listen(port, () => {
  	console.log(`Starting Server : ${port}`);
})

템플레이팅 시작 💡

템플레이팅을 위해선 EJS를 사용하는데 Express에게 이를 알려주어야 한다.

EJS란?
Embedded JavaScript templating 의 축약어로 JavaScript로 HTML 마크업을 생성할 수 있는 간단한 템플릿 언어이다.

먼저 EJS를 설치하고 💡

npm i ejs

`app.set()` 메서드를 이용하여 `view engine`을 `ejs`로 설정한다. 💡

app.set("view engine", "ejs");

해당 설정을 마치고 나면 새 Express 앱을 만들고 view engine을 사용할 때 Express는 views나 템플릿이 views 디렉토리(default) 안에 있다고 가정한다.

why ? 현재 작업중인 디렉터리(precess.cwd())에서 /views 디렉터리로 기본 설정이 되어 있기 때문이다.

공식 문서 참고

기본 Path를 일치시키기 위해 현재 디렉터리 위치에서 /views 디렉터리를 생성하고 디렉터리 내에 EJS 파일을 생성한다

mkdir views
touch views/home.ejs

생성한 EJS파일에 HTML 콘텐츠를 추가한다. EJS 파일에서 표준 HTML을 사용할 수 있기 때문에 원하는대로 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>Home</title>
  </head>
  <body>
    <h1>The Home Page</h1>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nam nostrum
      deserunt, eos, debitis sequi vel saepe at aut quos non esse adipisci
      dolorem nihil error. Nostrum accusantium molestiae nesciunt. Maxime!
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id expedita,
      illum cum ex culpa officia vel adipisci ut neque saepe voluptate
      similique, amet exercitationem, molestias cupiditate minus explicabo
      itaque unde!
    </p>
  </body>
</html>

해당 템플릿을 라우트 안의 res.send() 대신 res.render()를 이용하면 문자열이 아닌 파일이나 템플릿을 보낼 수 있다.

res.render() 메서드는 첫 번째 인자로 view(렌더링할 view 파일의 파일 경로인 문자열)를 렌더링하고 렌더링된 HTML 문자열을 클라이언트에게 보내는 메서드이다.

또한 Path로 views/home.js로 적어주지 않아도 되는데, 그 이유는 render()메서드가 이미 views 디렉터리에 존재한다고 가정하기 때문이다.

const express = require("express");
const app = express();
const port = 3000;

app.set("view engine", "ejs");

app.get("/", (req, res) => {
  res.render("home.ejs")
});
app.listen(port, () => {
  console.log(`Starting server : ${port}`);
});

--> 결과

뷰 디렉터리 설정하기 🔍

문제점이 하나 존재한다. 실행 파일이 있는 정식 폴더 바깥에서 실행을 하게 되면 위와 같은 오류가 발생한다. 다른 폴더를 참조하여 실행하는 문제가 발생하는데 만약 다른 경로에서도 정상적으로 동작하게 하려면 (어디서나 동작하도록 views의 디렉토리를 바꾸고 싶다면) 다음과 같이 수정해야한다.

우리가 지금 원하는 디렉토리는 파일이 위치한 index.js 뒤에 /views가 붙는 형태이다.
아래의 코드를 추가해준다.

const express = require('express');
const app = express();
const path = require('path');

app.set('view engine', 'ejs');
app.set('views', path.join(__dirname , '/views'));

app.get('/', (req,res) => {
  // default 위치가 home.ejs
  res.render('home.ejs');
});

app.listen(3000, () => {
  console.log("LISTENING ON PORT 3000")
});