MVC 패턴에서 V(View)는 결과가 나타나는 화면이다. 모델을 통해 얻은 데이터와 뷰 템플릿을 통해 클라이언트에게 응답할 결과를 보여준다.
웹 문서의 기본 형태를 뷰 템플릿으로 두어 사용하며 템플릿도 여러 가지 종류가 있지만 그중에서도 오늘은 'ejs'를 알아볼 것이다. 자바스크립트 파일 내에서 html 코드를 입력하지 않고 따로 각각의 파일을 만들어서 데이터를 웹 화면에 출력시킬 수 있다.
EJS
EJS -- Embedded JavaScript templates
Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!
ejs.co
EJS는 embedded javascript의 약자이다.
html 문서를 사용하며 그 안에서 자바스크립트 코드를 가능하게 해준다.
ejs는 이곳에서 볼 수 있다.
cmd 창 - 모듈 등록
npm install ejs --save
ejs를 사용하기 위해서는 cmd창에서 모듈을 등록해준다.
뷰 엔진 설정
app.set("views",__dirname + "/views");
app.set("view engine","ejs");
console.log("뷰엔진이 ejs로 설정되었습니다");
렌더링을 하려면 뷰 엔진을 설정해야 한다.
뷰 엔진은 뷰 템플릿으로 웹 결과 문서를 만든 후 응답을 보내는 기능을 지닌다.
set을 통해 뷰 페이지 폴더의 기본 경로를 지정한다. ejs 파일은 views라는 폴더 안에 저장했기 때문에 해당 경로를 지정해두었다.
__dirname : file명을 제외한 절대경로 (D:~)
cf) __filename : file명을 포함한 절대경로
뷰 엔진으로 html 출력 코딩을 분리
if(err){
res.writeHead("200",{"Content-type":"text/html;charset=utf-8"});
res.write("<meta name='viewport' content='width=device-width,height=device-height,initial-scale=1'>");
res.write("<h2>사용자 리스트 조회중 에러 발생</h2>");
res.write("<br/><br/><a href='/public1/login.html'>다시 로그인</a>");
res.end();
return;
}
if(result){
var context = {result:result,moment:moment};
req.app.render("listUser.ejs",context,function(err,html){
if(err){
res.writeHead("200",{"Content-type":"text/html;charset=utf-8"});
res.write("<h2>뷰 렌더링 중 에러 발생</h2>");
res.end();
return;
}
res.end(html);
};
err가 있는 경우에는 비교하기 위해 기존에 뷰 템플릿을 사용하지 않고 쓴 코딩을 넣었다.
rew.write()와 같이 html내용을 입력해줘야 했지만 일일이 넣다 보면 많은 양의 코딩을 넣기에는 한계가 있다.
따라서 렌더링을 해줌으로써 밑에 나올 뷰 템플릿을 바로 연결해줄 수 있다.
뷰 템플릿 파일 경로를 입력해주고(확장자명은 생략 가능하다.),
html에는 렌더링한 결과가 담아진다.
뷰 템플릿
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>사용자 리스트 페이지</title>
</head>
<body>
<h1>사용자 리스트( •̀ ω •́ )✧♥(View - ejs)</h1>
<div>
<ul>
<%for(var i=0;i<result.length;i++){%>
<li>
#<%=i+1 %> -
아이디: <%=result[i]._doc.id %>,
이름: <%=result[i]._doc.name %>,
나이: <%=result[i]._doc.age %>
</li>
<%} %>
</ul>
</div>
</body>
</html>
웹페이지에 출력될 뷰 템플릿이다.
for문을 표현하기 위해 <% %> 안에 담아주었다. 변수의 경우 <%=변수명 %>으로 입력해야 한다
result로 값을 넘겼기 때문에 배열로 받았다.
ejs 파일 분리
추가로 ejs 파일 안에서도 파일을 분리할 수 있다.
간단한 사용 예제를 살펴보겠다.
- header.ejs
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>사용자 추가 성공</title>
</head>
ejs 파일의 상단 부분만 입력해주었다.
- footer.ejs
<br/><br/>
<a href="/public1/login.html">로그인</a>
body의 마지막 부분이다.
이제 위의 두 파일을 합쳐서 새로운 ejs 파일을 만들어보겠다.
- addUser.ejs
<!DOCTYPE html>
<html>
<%- include("header") %>
<body>
<h2><%=title %></h2>
<%- include("footer") %>
</body>
</html>
include("ejs파일명") : 하나의 ejs 파일에서 다른 ejs 파일을 참조할 수 있다.
include 지시어를 사용한다.
참조하고 싶은 파일의 이름을 괄호 안에 입력해주면 된다.
Jade
Jade - Template Engine
jade-lang.com
HTML to Jade/Pug Converter
html2jade.org
Jade는 공백 2칸이 기본이다.
위의 두 개의 사이트에서 각각 html 코딩을 Jade로 자동 변형해주므로 사용해볼 수 있다.
또한 ejs 뷰 엔진 설정 코딩에서 ejs를 jade로 바꿔주면 jade 파일이 실행 가능해진다.
doctype html
html
head
meta(name="viewport" content="width=device-width, height=device-height, initial-scale=1")
title 성공!
body
block content
#container
p 하이
Jade의 코딩이다.
특이점은 태그를 닫아주지 않아도 된다는 것이다.
따라서 태그 시작점에 태그만 입력해주면 된다.
4월 8일 수업 🌜
'개발 교육 TIL > front-end' 카테고리의 다른 글
| [React] props 사용하기 - propType, defaultProps , 비구조 할당 (0) | 2022.04.14 |
|---|---|
| [React] Visual Studio Code 설치, es6(ecmascript) 자바스크립트 기초 문법 (0) | 2022.04.13 |
| [Node.js] Semantic-Ui 라이브러리 적용하기 (0) | 2022.04.07 |
| [Ajax] Ajax로 게시판 / 방명록 만들기 (jQuery, JSP) (0) | 2022.03.19 |
| [Javascript] DOM(Document Object Model) - HTML DOM 객체 생성 (0) | 2022.03.17 |
