HTML 파일에 서버 데이터를 넣기 위해 "template engine"인 ejs를 사용하면 된다.
✨ejs 셋팅
- 템플릿 엔진을 사용하기 위해 터미널에
npm install ejs입력
- 이후 셋팅을 위해 서버파일 상단에
app.set('view engine', 'ejs');작성해준다.
- 이제 html 파일에 데이터를 넣기 위해서는
.ejs파일을 만들어주면 된다. 이때, ejs파일은views라는 폴더에 넣어주는 것이 관습!
아래는list.ejs인데,
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/list.css" />
</head>
<body class="grey-bg">
<div class="white-bg">
<div class="list-box">
<h4>글제목</h4>
<p>글내용</p>
</div>
<div class="list-box">
<h4>글제목</h4>
<p>글내용</p>
</div>
</div>
</body>
</html>
css 연결이라거나.. 이래저래 다 그냥 html 문법이랑 동일하다!
- 그럼 다시
server.js로 돌아가서 list페이지에 접속 시에 list.ejs를 보여줄 수 있도록 아래처럼 코드를 작성해준다.
app.get("/list", async (요청, 응답) => {
let result = await db.collection("post").find().toArray();
응답.render("list.ejs");
});.render()를 사용해주면 ejs파일을 보여줄 수 있다.
✨서버데이터 ejs파일에 넣기
그럼 이제 대망의 서버데이터를 ejs파일에 넣어보자.
-
ejs파일에 데이터를 보내기 위해
응답.render("list.ejs", {보낼데이터});뒤에 보낼 데이터를 넣어주면 되는데(보통 object 형식으로 보내준다.),
앞에서 뽑아뒀던 데이터를 "글목록"으로 보내준다. -
ejs파일 안에서는
<%=데이터이름%>으로 받아주면 되는데,
위 사진처럼 html 중간에 array나 object를 넣으면
이렇게 깨져서 보이기 때문에..
<%= JSON.stringify(글목록) %> 이런 식으로 JSON.stringify()를 사용해서 확인해볼 수 있다.
깨지지 않고 잘 들어오니 이제 데이터를 제대로 넣어 사용해보자.
이렇게 작성하고 확인해주면,
데이터가 잘 꽂혀있는 모습을 확인할 수 있다.
✔정리하자면..
1) ejs를 사용하면 html 내부에 서버데이터를 꽂을 수 있다.
2) ejs 파일은 views 폴더 안에 만들어주자
3) 응답.render를 통해 유저에게 보내줄 수 있다.
4) 서버파일에서 object형식을 활용하여 서버데이터를 전송하고,
<%=데이터명%>으로 html에 데이터를 넣어줄 수 있다.
+추가) "/time"이라고 접속하면 현재 서버 시간을 보내주는 기능
server.js파일에
app.get("/time", (요청, 응답) => {
응답.render("time.ejs", { time: new Date() });
});
이후에 views폴더 아래에 time.ejs파일 생성하여
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>현재 서버 시간</title>
</head>
<body>
<h3>현재 서버 시간: <%= time%></h3>
</body>
</html>이렇게 넣어주었고, 아래는 결과!
