Embedded javascript template.
js을 html에서 사용할 수 있게 하는 템플릿 언어.
EJS -- Embedded JavaScript templates
Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!
ejs.co
- <% 'Scriptlet' tag, for control-flow, no output ==> js문에 사용(if, else 등 한 라인마다 작성)
- <%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
- <%= Outputs the value into the template (HTML escaped) ==> HTML문에 사용(h1, p 등)
- <%- Outputs the unescaped value into the template
- <%# Comment tag, no execution, no output
- <%% Outputs a literal '<%'
- %> Plain ending tag
- -%> Trim-mode ('newline slurp') tag, trims following newline
- _%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it
-------------------------------------------------------------------------------------
[예시 app.js]
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.set("view engine", "ejs");
app.get("/", function(req, res){
var today = new Date();
var currentDay = today.getDay();
var day = "";
switch (currentDay) {
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 da is equal to : " + currentDay);
}
res.render("list", {
kindOfDay : day
})
});
app.listen(3000, function(){
console.log("Server started on port 3000.");
});
-------------------------------------------------------------------------------------
[예시 list.ejs] << nodemon 실행하는 폴더의 하위폴더(views) 안에 생성
<html>
<head>
<title>To Do List</title>
</head>
<body>
<h1> It's a <%= kindOfDay %>!</h1>
</body>
</html>
-------------------------------------------------------------------------------------
위 예시처럼 작성하고 nodemon 실행해서 로컬호스트로 접속하면,
당일의 날짜를 표시한다.(It's a 000day !)
>> [app.js]에서 설정한 kindOfDay 가 [list.ejs]의 kindOfDay와 연동 됨.
반복적인 내용이 필요한 웹사이트 제작에 사용하는 템플릿인거 같은데,
예를 들어 투두리스트를 만들 때
요일마다 다른 사이트를 표시하고 싶다면?
app.js에 [express]로 기본 양식 작성 후에
app.use("view-engine", "ejs"); 입력 후
views라는 폴더 만들면 views 폴더를 읽는다.
views폴더 안에 [list.ejs]파일을 만들고 파일의 내용은 index.html로 복붙해준다.
그리고 app.js(express)에서 index.html을 요일마다 다르게 표시해주고 싶을 때, index.html에서 <%= "000" %> 을 사용한다.
후에 app.js에서 [res.render("list", {000: 111})]로 ejs 사용.
* 000 : key 역할, 111 : value 역할
* 여러 항목을 [render]하고 싶을 때, [res.render] 한 라인에 같이 적어 줘야함. (ex {000: 111, 222: 333})
-------------------------------------------------------------------------------------
[ejs]파일로 작성된 html에 css를 입히고 싶을때,
프로젝트 하위폴더 생성(ex : public/css/style.ss)후
[<link rel = "stylesheet" href = "css/styles.css">]로 경로 지정해준뒤에,
[app.js]파일에 [app.use(express.static("public"));] 작성. (app.js로 하여금 public이라는 경로 읽게함.)
-------------------------------------------------------------------------------------
footer, header등으로 여러개의 ejs 파일을 생성한 후
<%- include ("footer") -%> 하면 복사해서 삽입 가능
'코딩' 카테고리의 다른 글
| [DB] SQL vs NOSQL (0) | 2020.08.17 |
|---|---|
| [JS] Lodash (0) | 2020.08.08 |
| [GIT] Forking, Pull request (0) | 2020.07.19 |
| [GIT] Gitbranch, Gitmerge (0) | 2020.07.18 |
| [GIT] Gitclone (0) | 2020.07.18 |
