.jpg)
뷰 템플릿 엔진 사용해보기
Table of Content
View Template Engine이란?
웹 페이지를 구성하는 주된 마크업 언어(Markup Language)는 HTML이며, 이는 정적인 언어. 따라서, Javascript의 반복문을 사용하여 간단하게 처리할 수 있는 동적 연산을 HTML로 표현하려면 직접 코드를 작성해야 하는 불편함이 있다.
•
템플릿 엔진(Temlplate Engine)은 위에서 언급한 불편한 상황을 해소시키기 위한 도구
•
템플릿 프로세서를 이용하여 웹 페이지를 동적으로 구현할 수 있는 시스템
•
Node.js의 대표적인 템플릿 엔진으로는 Pug(Jade), EJS, Handlebars 등이 있음
•
템플릿 엔진은 웹 템플릿들과 웹 컨텐츠 정보를 처리하기 위해 설계된 소프트웨어
•
템플릿 엔진은 view code(html)와 data logic code(db connection)을 분리해주는 기능을 한다.
•
필요성
◦
대부분의 템플릿 엔진은 HTML에 비해 간단한 문법을 사용함으로써 코드량을 줄일 수 있음
◦
데이터만 바뀌는 경우가 굉장히 많으므로 재사용성을 높일 수 있음
◦
유지 보수에 용이
Express와 뷰 템플릿 엔진
Express에서의 뷰 템플릿 엔진 시작 공식문서에서는 기본적으로 Pug라는 뷰엔진을 사용하는 실습 코드를 제공하고 있다. 하지만 Pug라는 뷰 엔진에 대해서 처음 들어보았기 때문에 정보가 필요하다.
Java를 배우면서도 JSP, Thymeleaf, Mustache 등 여러 뷰 템플릿 엔진이 있었고 특히 문법들에 차이가 있을 수 있어서 뷰 템플릿 엔진도 그 부분을 먼저 살펴볼 필요가 있었다.
Pug VS EJS VS Handlebars
•
Pug는 기존의 Jade라는 이름에서 개명된 이름이며, 꾸준히 인기를 얻고 있는 Node.js 기반의 템플릿 엔진
•
EJS는 HTML 친화적인 템플릿으로, Pug의 고유 문법에 익숙하지 않은 개발자들이 주로 사용하는 템플릿 엔진
•
Handlebars는 Mustache를 기반으로 구현한 템플릿, 동적 컨텐츠의 경우 EJS 와 비슷하게 이중 중괄호 플레이스 홀더를 사용
위 두 설명을 통해서는 어떤것을 사용해야 할 지 모르겠지만 실제 코드로 보면 선택에 도움이 된다.
Pug
// index.html
doctype html
html
include header.pug
include body.pug
JavaScript
복사
<!-- header.pug -->
head
title=title
JavaScript
복사
<!-- body.pug -->
body
p Hello World
JavaScript
복사
Pug의 장점
•
Pug는 독자적인 문법을 가지고 있음
•
Pug는 EJS보다 깔끔한 구문을 가지고 직관적인 느낌을 주는 장점
•
<>와 같은 기호들을 제거하여 가독성을 극대화 시킨 부분이 특징
Pug의 단점
•
새로운 문법에 익숙해지는데 시간은 조금 걸리는 단점(러닝커브) → 치명적인 부분으로 작용
•
새로운 문법이라는 것은 호환성의 불리함이 있다는것(기존 HTML 소스를 모두 재가공해야함)
EJS
<!-- index.ejs -->
<!DOCTYPE html>
<html>
<%- include('header.ejs') %>
<%- include('body.ejs') %>
</html>
JavaScript
복사
<!-- header.ejs -->
<head>
<title><%= title %></title>
</head>
JavaScript
복사
<!-- body.ejs -->
<body>
<p>Hello World</p>
</body>
JavaScript
복사
EJS의 장점
•
Javascript 로직을 그대로 사용 할 수 있음
•
렌더링 전 후의 코드 차이가 없음
•
에러를 확인하고 처리하는데 수월
•
HTML 과 Javascript를 알고 있다는 전제 하에, 러닝 커브가 상당히 낮다.
EJS의 단점
•
block 을 사용하기 위해서는 별도의 third-party-library 를 추가하여 사용해야 함
•
<% %> <%= %> 와 같은 문법이 HTML에 들어가 있어 코드를 읽기가 쉽지 않음
•
javascript를 그대로 사용할 수 있는 장점
Handlebars
<!-- index.hbs -->
<!DOCTYPE html>
<html>
{{> header}}
{{> body}}
</html>
JavaScript
복사
<!-- header.hbs -->
<head>
<title>{{title}}</title>
</head>
JavaScript
복사
<!-- body.hbs -->
<body>
<p>Hello World</p>
</body>
JavaScript
복사
Handlebars의 장점
•
Logic 과 Markup 을 깔끔하게 분리 할 수 있음. {{ }} 안에 있는 것이 로직
•
컴파일 단계에서 코드가 해석이 되므로, 클라이언트에서 따로 코드를 해석하는 단계가 필요없다. 그러므로 로딩이 빠름
•
HTML 오픈 소스를 복사/붙여넣기 가 가능하다. (pug는 불가능, pug 형식에 맞게 다시 작성해야 함)
Handlebars의 단점
•
auto-complete, syntax highlighting 등 과 같은 기능을 에디터에서 제공해 주지 않을 수 있음
무엇을 사용해야 하는가?
물론 팀과 프로젝트의 룰에 따라가는 것이 가장 우선순위이다.
하지만 선택의 기로에 있는 학습자 입장에서는 실제 사용량을 확인하는 것이 하나의 지표라고 생각된다. 이것이 트렌드의 흐름을 파악 할 수 있기 때문이다. 그리고 생각보다 러닝커브로 소모되는 시간도 무시 할 수 없다.
pug는 진입 난이도 등 사용량이 현저히 낮아보인다. 오히려 ejs, handlebars 생태계 점유율이 높은 것을 볼 수 있다. 수많은 소스를 그나마 원본을 최대한 활용 할 수 있는 재사용성을 높은 두 엔진의 활용도가 높은 것으로 보여진다.
EJS 사용하기
실습에서는 EJS를 사용해보고자 한다.
•
우선 추가적으로 Git사용 연습을 계속하기 위해서 Frontend, Backend, master로 3개의 브랜치를 사용해보자.
•
그리고 현재는 Frontend와 관련된 부분이므로 Frontend 브랜치에 체크아웃하여 진행
NPM을 통한 EJS 패키지 설치
npm install ejs
JavaScript
복사
EJS 객체 생성 및 Express에 세팅
EJS 뷰 템플릿 엔진은 Express 위에서 실행되야 하기 때문에 Express에 세팅해줘야 한다.
아래처럼 EJS 패키지를 ejs변수로 선언, 할당하고 뷰 엔진으로 설정한다.
루트 경로에 /views 폴더를 뷰페이지 관련 폴더로 설정한다.
이제 해당 폴더를 기준으로 아래 라우트함수 내 res.render()함수를 통해서 반환되는 문자열+.ejs 파일의 소스를 뷰 템플릿 엔진을 거쳐 반환하게 된다.
const express = require('express')
const ejs = require('ejs')
const app = express()
const port = 3000
app.set('view engine', 'ejs');
app.set('views', './views')
//Root URL('/') 경로에 대한 Get 요청
app.get('/', function (req, res) {
res.render('index');
})
//특정 URL 경로에 대한 Get 요청 - 1
app.get('/boards', function (req, res) {
res.render('boards');
})
//특정 URL 경로에 대한 Get 요청 - 2
app.get('/users', function (req, res) {
res.render('users');
})
JavaScript
복사
index.ejs 뷰 페이지 작성
res.render('index'); 를 통해서 index.ejs라는 파일이 반환될 것이다.
따라서 /views/index.ejs 와 같은 경로로 생성되어야 한다. boards.ejs, users.ejs 도 기본 페이지를 작성해둔다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage</title>
</head>
<body>
<h1>홈페이지에 오신것을 환영합니다.</h1>
</body>
</html>
JavaScript
복사
맵핑된 URL마다 상태 확인
Related Posts
Search
