EJS
html안에 js를 통해서 데이터를 꽂아 넣을 수 있다.
그러기 위해서는 템플릿 엔진을 사용하면 되는데, 간단한 ejs를 사용해보자
셋팅
터미널을 열어서 npm install ejs를 작성하고
server.js 상단에
app.set('view engine', 'ejs')를 작성하면 셋팅완료
ejs 파일은 view라는 폴더를 따로 만들어 거기에 따로 보관을 해줘야한다.
사용
만약 유저가 /board 라는 url에 방문을 하면 글 목록 페이지를 보여주고 싶을 때,
만들어둔 ejs 페이지를 sendFile 이렇게 보내주는 것이 아닌
app.get('/board', (req, resp =>{
resp.render('board.ejs')
})로 보내준다.
데이터 넣기
나는 미리 Mongodb에 post라는 도큐먼트를 만들어서 그 안에 데이터를 집어넣어 두었다.
그리고 그 데이터를 꺼내서 쓸거다.
ejs는 html안에 데이터를 넣을 수 있는데,
app.get('/list', async (req, resp) => {
let posts = await db.collection('post').find().toArray()
resp.render('list.ejs', { posts : posts })
})이렇게 데이터를 전송해주고
list.ejs 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>list</title>
<link href="/main.css" rel="stylesheet">
</head>
<body class="grey-bg">
<!-- <%=JSON.stringify(posts)%> -->
<!-- <% : html 사이에 자바스크립트 문법을 쓸 때 사용
<%- : include() 문법을 쓸 때 사용 + html이 렌더링이 되어서 html로 나오게 된다.
<%= : <%- 와 비슷하지만 <%= 을 사용하면 html이 문자처럼 다 나오게 된다. -->
<%- include('nav.ejs' , {age : 20 }) %>
<div class="white-bg">
<% for(let i = 0; i < posts.length; i++){ %>
<div class="list-box">
<h4><%= posts[i].title %></h4>
<p><%= posts[i].content %></p>
</div>
<% } %>
</div>
</body>
</html>
이렇게 넣어두었다.
이렇게 서버쪽에서 html에 데이터를 넣어서 유저에게 보내주는 것을 SSR이라 부른다.
참고로 알아두자.
이 전까지는 CSR이라고 해서 리액트를 통해서 모바일 앱처럼 부드러운 사이트를 많이 만들었지만, 웹 페이지 자체가 무거워져서 퍼포먼스도 안 좋고, SEO도 안 좋다는 단점 때문에 최근은 다시 SSR이 주목을 받고 있다.
EJS 문법
<% : html 사이에 자바스크립트 문법을 쓸 때 사용
<%- : include() 문법을 쓸 때 사용 + html이 렌더링이 되어서 html로 나오게 된다.
<%= : <%- 와 비슷하지만 <%= 을 사용하면 html이 문자처럼 다 나오게 된다.
ha lee :)