오늘 ejs로 짜여진 코드를 살면서 처음 보게 되었으므로 하루 동안 알아본 바를 기록함.
express와 연결하기
const express = require("express");
const ejs = require("ejs");
const app = express();
const port = 3000;
app.set("view engine", "ejs");
app.set("views", "./views");
app.get("/", (req, res) => {
res.render("index");
});
app.listen(port, () => {
console.log(`Server running at ${port}`);
});
이렇게 하면, 연결됨. 5,6번째 코드가 연결 시켜주는 것이다. express, ejs를 구글링 하면 된다!
해당 코드의 의미는
ejs를 템플릿 엔진으로 활용할 것이며,
./views 디렉토리 안에 템플릿들이 있다고 표현한 것이다.
<% %>는 자바스크립트를 사용하는 공간!
<!DOCTYPE html>
<html lang="en">
<head>
<title>연습</title>
</head>
<body>
<% for (let i = 0; i < 5 ; i ++) { %>
<h1>치킨!!!!!</h1>
<% } %>
</body>
</html>줄이 바뀌는 부분을 유의할 것.
<% %>가 두 묶음이 들어가 있다.
결과👇
<%= %> 와 <%- %>
이 두 태그는 둘 다 내부에 들어가 있는 변수 값들을 출력하지만 다른 점이 하나 있었으니....
=
-
=의 경우는 HTML escpaed된 값을 집어 넣는다. 따라서
<div> 같은 html로 변환 가능한 문자들을 만나면 <div> 같은 것으로 변환해서 나중에 태그 자체를 뿌려주게 된다. (html sanitzing에서 한 번 봤었다!)
<%- include('dir')%>
<%- include('./part/footer') %>이런 식으로 사용할 수 있다.
dir는 현재 파일의 상대경로를 입력하면 된다.
ejs 파일에 변수 전달하기!
express에서 ejs 파일에 변수를 전달할 수 있었다.
방법은 위의 치킨 사진에 있으나 다시 한 번 표현해보자면, 👇
app.get("/", (req, res) => {
res.render("index", {
chicken: `<div>분째</div>`,
});
});이런식으로 하면 chicken에 '<div>분째</div>'라는 값을 담아 index.ejs 파일에 변수로 전달한다.
따라서 index.ejs에서 해당 값을 사용할 수 있었다.
