👨💻 중요 파일 설명
app.js : node.js를 통해 서버 코드를 적어놓는 곳
restaurants.json : 식당 정보들을 저장해놓은 파일(식당들은 이름, 주소등을 가진 객체로서 저장된다.)
👨💻 EJS 정리
What is EJS?
저번에 html 파일을 정적인 파일으로서 불러오는 기능을 설명했었는데 이번에는 .html 파일을 동적인 파일으로서 불러와서 사용하기 위해 ejs template engine을 사용할려고 한다.
터미널에서
npm install ejs
를 통해서 설치를 해준다.
그리고 nodeJs 코드를 작성하는 app.js 파일에 가서
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");를 작성해주는데, 위와 밑의 각각 parameter 첫번째 값은 정해져 있는 값으로 우리가 변경하는 것이 아니다.
1번 줄의 두번째 파라미터에는 html 코드들이 담겨있는 파일들이 모여있는 폴더의 경로를 넣어준다.
2번 줄의 두번째 파라미터에는 view engine으로서 어떤 engine을 사용하는지 적어주면 된다.
나는 views 폴더에 html 파일들을 넣어놓았고 ejs를 view engine으로 사용하니 위와 같이 적었다.
그리고 ejs로 html 코드를 불러들이기 위해서 html 파일들의 확장자를 다 .ejs로 바꿔줘야 한다.
app.get("/", function(req, res) {
// const htmlFilePath = path.join(__dirname, "views", "index.html");
// res.sendFile(htmlFilePath);
res.render("index") //ejs -> html
})위의 주석처리를 해놓은 것이 저번까지 사용한 원래 코드이다. 하지만 ejs를 사용하면서는 render를 통해서 간결하게 나타낼 수 있다.
render는 확장자 ejs파일을 불러와 html로 변환시켜 전달해준다.
(참고로 view engine이 ejs이기에 index.ejs에서 .ejs는 생략할 수 있다.)
👨💻 HTML 코드를 동적으로 사용하기 - 내용 변경
<p>We found <%= numberOfRestaurants %> restaurants.</p>html 파일에 지금까지 내가 json파일에 등록한 식당 갯수가 몇 개인지 동적으로 불러오게 하기 위해 위의 코드를 넣었다.
동적으로 변환하고 싶은 곳에다가 <%= %>태그와 안에 변수 이름을 적으면 된다.
그리고 app.js에서
app.get("/restaurants", function(req, res) {
const filePath = path.join(__dirname, "data", "restaurants.json");
const fileData = fs.readFileSync(filePath);
const storedRestaurants = JSON.parse(fileData);
res.render("restaurants", { numberOfRestaurants: storedRestaurants.length })
} )이렇게 식당 정보를 저장해놓은 restaurants.json 파일을 가져와서 그 안의 정보 갯수를 변수에 넣어주면 된다.
그러면 웹에서 확인했을 때, 이런식으로 뜨는데 <%= %>태그가 안보이는 이유는 .ejs 파일이 서버에서 분석되고 렌더링된 다음 완전한 html파일로서 전달이 되기 때문이다. (짜잔~)
👨💻 HTML 코드를 동적으로 사용하기 - for문, if문 사용
restaurant.html에 아니 .ejs에 내가 적어놓은 식당들의 정보들을 다 추가하고 싶다.
하지만 식당들은 계속 추가될테니 동적으로 만들어 놓을 필요가 있다.
<% for (const restaurant of restaurants) { %>
<li class="restaurant-item">
<article>
<h2><%= restaurant.name %></h2>
<div class="restaurant-meta">
<p><%= restaurant.cuisine %></p>
<p><%= restaurant.address %></p>
</div>
<p>
<%= restaurant.description %>
</p>
<div class="restaurant-actions">
<a href="<%= restaurant.website %>">View Website</a>
</div>
</article>
</li>
<% } %>restaurants.ejs 파일에 이와 같이 <% for (const restaurant of restaurants) { %> <% } %> 태그를 통해 html 코드를 for문의 내용으로 하는 for문을 작성할 수 있다.
그리고 위에서 했듯이 restaurants 변수를 app.js에서 지정만 해주면 된다.
app.get("/restaurants", function(req, res) {
const filePath = path.join(__dirname, "data", "restaurants.json");
const fileData = fs.readFileSync(filePath);
const storedRestaurants = JSON.parse(fileData);
res.render("restaurants", { numberOfRestaurants: storedRestaurants.length,
restaurants : storedRestaurants})
} )
이런식으로 if else문도 사용이 가능하다.
<% if (numberOfRestaurants === 0) { %>
<p>Unfortunately, we have no restaurants yet - maybe start recommending some?</p>
<% } else { %>
<p>Find your next favorite restaurants with help of our other users!</p>
<p>We found <%= numberOfRestaurants %> restaurants.</p>
<ul id="restaurants-list">
<% for (const restaurant of restaurants) { %>
<li class="restaurant-item">
<article>
<h2><%= restaurant.name %></h2>
<div class="restaurant-meta">
<p><%= restaurant.cuisine %></p>
<p><%= restaurant.address %></p>
</div>
<p>
<%= restaurant.description %>
</p>
<div class="restaurant-actions">
<a href="<%= restaurant.website %>">View Website</a>
</div>
</article>
</li>
<% } %>
<% } %>👨💻 include 기능 이용하기
.ejs 파일들에 header, head, aside 태그의 내용들이 다 겹친다.
css에서도 겹치는 내용은 shared.css로 정리해놓듯이 html도 겹치는 내용은 묶어놓는 것이 구조상 보기가 좋을 것이다.
고맙게도 ejs에서는 include 기능을 제공해준다.
예시로 설명하겠다.
이런식으로 head, aside, header 내용을 모아둘 ejs 파일을 만들고 각각의 내용을 긁어서 파일안에 넣어준다.
<!-- head.ejs -->
<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>Eatwell - Make The World A Tastier Place</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@700&family=Roboto:wght@400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/shared.css" />
<script src="scripts/responsive.js" defer></script>그리고 원래 head가 있어야 할 자리에
<head>
<%- include("includes/head") %>
</head>이런식으로 작성을 해주면 된다.
눈치가 빠른 사람들은 확인했겠지만 for문, if문과 같은 것을 사용할 때는 <%= %> 태그를 사용했다.
하지만 여기서는 <%- %> 이렇게 태그가 살짝 다르다.
그 이유는 =은 내용 그대로, 즉 변수의 내용이 그대로 들어가고 -는 html 코드로서 분석이 되서 들어간다.
<%- include("includes/restaurants/restaurant-item", {restaurant: restaurant}) %>그리고 이런식으로 만약 include로 사용하는 ejs 파일에 변수가 있다면 ,를 하고 그 변수를 설명해줄 수 있다.
👨💻 느낀점
Ejs를 통해서 더 동적이고 구조적인 프로그래밍이 가능해진 것 같아 좋았다.
나중에 자바로도 개발할 건데 그때도 ejs같은 게 있을려나..? ㅎ
암튼 이제 아시안컵 대한민국 대 요르단을 보러가야 해서 느낀점은 이정도만 쓰겠다:0 bye
