익스프레스에서 뷰 템플릿을 적용하는 법을 알아보겠습니다.
목차
- MVC 패턴과 뷰 엔진
- ejs 뷰 템플릿 사용 1
- ejs 뷰 템플릿 사용 2
MVC 패턴과 뷰 엔진
MVC 패턴이란 Model, View, Controller로 구성되는 구조입니다. 눈에 보이는 부분을 뷰, 뷰로 표현되는 데이터를 제공하는 것은 모델, 처리되는 과정을 담당하는 것을 컨트롤러라 합니다.
뷰 에서는 모델에서 얻는 데이터와 뷰 템플릿을 바탕으로 사용자에게 응답할 웹문서를 만들어 응답합니다.
ejs 뷰 템플릿 사용 1
ejs란 embedded javascript의 약자로 html 문서 내에 자바스크립트 코드를 넣을 수 있게 해 줍니다. 위의 그림에서 <%= user id%>를 통해 userid란 변수를 사용한 것 처럼 말입니다. 이 ejs를 통해 뷰를 구현할 수 있습니다.
먼저 % npm install ejs --save 명령어로 ejs 모듈을 설치합니다.
로그인 예제를 보겠습니다. 다음의 코드를 뷰를 사용하여 바꾸는 것이 목표입니다.
docs가 존재하면 로그인이 성공한 코드인데 중요한건 res에 문자열로 html 코드를 입력하여 응답을 처리하는 것입니다. 이렇게 하면 불편한 점이 많기 때문에 응답할 html 코드를 분리해 주는 것이 뷰의 역할이라 볼 수 있습니다.
익스프레스 객체에 다음 코드로 뷰 엔진을 설정해줍니다.
지정한 경로('/views')에 ejs 뷰 템플릿을 만듭니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 성공 페이지</title>
</head>
<body>
<h1>로그인 성공</h1>
<div><p>사용자 아이디 : <%= userid %> </p></div>
<div><p>사용자 이름 : <%= username %> </p></div>
<br><br><a href='/public/login.html'>다시 로그인하기</a>
</body>
</html>/views/login_success.ejs
바꾸고자 했던 부분을 뷰 엔진으로 바꿉니다.
if(docs){
console.dir(docs);
var username = docs[0].name;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
// 뷰 템플릿을 사용하여 렌더링한 후 전송
var context = {userid:'jjang01', username:'짱구'};
req.app.render('login_success', context, function(err, html){
if(err){
console.error('뷰 렌더링 중 에러 발생 : ' + err.stack);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>뷰 렌더링 중 에러 발생</h2>');
res.write('<p>' + err.stack + '</p>');
res.end();
return;
}
console.log('rendered : ' + html);
res.end(html);
});
}/routes/users.js
이렇게 코드를 바꾸고 실행해보면 바꾸기 전과 동일하게 작동하는 것을 볼 수 있습니다.
ejs 뷰 템플릿 사용 2
위의 예제에서 <%= 변수명 %>으로 html 문서 내에 변수를 지정하였습니다. 그리고 렌더링을 할 때 context를 받아 변수와 속성을 매핑하였습니다.
<% 자바스크립트코드 %> <%을 열어 자바스크립트 코드를 작성할 수 있습니다.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>로그인 성공 페이지</title>
<body>
<h2>사용자 리스트</h2>
<div>
<ul>
<% for (var i = 0; i < results.length; i++) {
var curId = results[i]._doc.id;
var curName = results[i]._doc.name; %>
<li>#<%=i %> - 아이디 : <%=curId %>, 이름 : <%=curName %></li>
<% } %>
</ul>
</div>
<br><br><a href='/public/listuser.html'>다시 요청하기</a>
</body>
</html>
<%-include(ejs템플릿 경로) %> 이 코드로 ejs 템플릿에서 ejs 템플릿을 참조할 수 있습니다.
<!DOCTYPE html>
<html>
<%-include('./head.ejs') %>
<body>
<h2><%=title %></h2>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>헤드 부분 - ejs에서 include됨</title>
</head>head.ejs
요약
- 뷰 엔진을 사용하여 js코드와 응답할 페이지를 분리할 수 있다
- ejs 템플릿에서 <% js 코드 %>, <%= 변수명 %>, <%-include(ejs템플릿 경로 %>
'Do it! Node.js 프로그래밍'을 공부한 내용입니다.
'개발 > Node.js' 카테고리의 다른 글
| [Node.js] 익스프레스로 웹 서버 만들기 2 - 자주 쓰이는 미들웨어 (0) | 2021.01.15 |
|---|---|
| [Node.js] 익스프레스로 웹 서버 만들기 1 - 익스프레스 서버와 미들웨어 (0) | 2021.01.14 |
| [Node.js] windows에서 노드 버전 변경 - downgrade/upgrade (1) | 2021.01.11 |
| [Node.js] 익스프레스에서 몽고디비 사용법 4 - 비밀번호 암호화 (0) | 2021.01.08 |
| [Node.js] 익스프레스에서 몽고디비 사용법 3 - 몽구스로 DB 다루기 (0) | 2021.01.07 |
댓글