To Do List 2] EJS 템플릿 시작하기

app.get( )으로 요일 별로 다른 html 문서를 보내야 할 때 

html 문서를 일일이 7개 만들 필요없이 

템플릿 하나만 써서 문서 안에 내용만 일부 바꿔서 보낼 수 있다. 

 

EJS, PUG(구 jade), nunjucks 등 다양한 템플릿이 있지만 

 

지금은 EJS에 대해 알아보겠다. 

EJS 배우기: https://learn.co/lessons/using-ejs-in-express

 

 

Templating 이란?

HTML template를 만들어서

내용 중 일부분만 변경해 사용하는 것

 

 

Express에서 EJS Templates 사용하는 법 

 

1. 터미널에서 ejs 다운받기

 

 npm i ejs 

터미널

 

 

2. views 폴더 만들기

일단 탬플릿 파일을 먼저 만들어 보자.

 views 폴더 만들기

작업 중인 Todolist 폴더 안에

views 폴더를 만든다. 

 

 

3. ejs 파일 만들기 

views 폴더 안에 index.ejs 파일을 만든다. 

index 말고 다른 파일 이름을 써도 상관없다.

단, 파일은 ejs 익스텐션을 사용해야한다.

 

 

 

4. index.ejs 파일 안에 html 내용 복사해 오기 

index.ejs

 

 

오늘이 평일이면 빨간 박스 안에 weekday가 나오게 하고, 

주말이면 weekend가 나오게 해보자. 

 

그럴려면 app.js에서 로직을 만들고

그 결과를 list.ejs 파일에 보내 

list.ejs에 있는 문구가 적용된 후 나오게 한다.

 

5. view engine 가동하기 

app.js 파일에서 

const app = express(); 코드 아래에

app.set('view engine', 'ejs');를 적어준다.

app이 생성되고 나서 적용된다.

 

express()로 생성된 app은 view engine을 이용해 EJS를 사용한다. 

app.js

 

 

 

6. ejs 파일 안에서 embeded하기 

index.ejs

그러면 이제 list.ejs에서 weekday를 지우고 탬플릿을 만든다.

a weekday를 지우고

그 빈자리를 ejs 변수로 만들어 준다. 

 

만드는 방법은 다음과 같다. 

<%= 변수이름  %> 즉

<%= kindOfDay  %> 로 해주었다

 

 

 

7. 렌더하기 

app.js에서 나온 결과를

ejs 파일에서 적용되도록 렌더한다.

 

키:벨류 페이로 적어준다.

res.render('index', {kindOfDay: day});

render:  view engine을 사용하여 특정 페이지를 렌더링한다.

index: ejs 탬플릿 파일 이름을 적어준다. index.ejs 인데 ejs는 생략한다. 

kindOfDay: ejs 파일에서 사용한 변수 

day: node에서 사용한 변수

 

보통은 {kindOfDay: day} 라고 서로 다른 단어를 쓰지 않고 

{day: day} 이런식으로 같은 단어로 쓴다. 

지금은 헷갈리니까 다르게 적어본다.

 

마지막에 한 줄로만 써주는 것이 좀 더 간편하다.

 

 

 

 

오늘 요일 나오게 하기 

탬플릿을 이용해서 오늘 요일에 따라 내용을 바꿔보자.

It's Thursday!

 

if / else가 아니라 좀 더 편하게

switch / break 를 사용한다. 

app.js

브라우저

const express = require("express");

const bodyParser = require("body-parser");

 

const app = express();

// const path = require('path');

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

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

 

app.get("/", function(req, res) {

var today = new Date();

var dayOfTheWeek = today.getDay();

var day = "";

 

switch (dayOfTheWeek) {

case 0:

day = "Sunday";

break;

case 1:

day = "Monday";

break;

case 2:

day = "Tuesday";

break;

case 3:

day = "Wednesday";

break;

case 4:

day = "Thursday";

break;

case 5:

day = "Friday";

break;

case 6:

day = "Saturday";

break;

default:

console.log("Error: current day is equal to: " + dayOfTheWeek);

};

res.render('index', { kindOfDay: day });

});

 

app.listen(3000, function() {

console.log("server is running on port 3000")

});

 

 

 

이 다음 포스트에서는 switch를 쓰지 않고

더 간단하게 오늘 요일 나오는 법을 알아보자.