'템플릿엔진'이란?
웹 프로그래밍을 할 때 주로 사용하는 마크업 언어인 HTML은 정적인 언어이다.
따라서 Javascript로 표현하면 반복문으로 간단하게 처리할 수 있는 동적 연산을 HTML으로만 표현하게 되면 일일이 직접 적어주어야 하는데, 이런 과정이 불편해서 나온것이 '템플릿엔진' 이다.
템플릿 엔진은 Javascript를 사용해서 HTML을 렌더링할 수 있게 도와주는 도구이다.
템플릿엔진의 종류
Pug(Jade)
EJS
Handlebars
......
템플릿엔진에는 굉장히 다양한 종류가 있지만, 대표적으로는 Pug와 EJS를 많이 사용한다.
Pug(Jade)
예전 이름인 Jade로 더 유명한 Pug는 꾸준히 많은 인기를 얻고 있는 엔진이다.
- Pug 구조와 HTML 구조 비교
doctype html
html
head
title=title
link(rel='stylesheet', href='/stylesheets/style.css')
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylehsheet", href="/stylesheets/style.css">
</head>
</html>
장점 : 문법이 간단하여 코드의 양이 줄어든다.
// 터미널 상 설치 npm i pug
단점 : HTML과는 문법이 매우 달라 호불호가 갈린다.
EJS
EJS는 Pug의 HTML 문법 변화에 적응하기 힘든 사람을 위한 템플릿 엔진이다.
- EJS 구조와 HTML 구조 비교
<!DOCTYPE html>
<html>
<head>
<title><%=title%></title>
<!--EJS에서는 변수를 사용할 시 <%= %> 로 감싼다.-->
<link rel="stylesheet", href="/stylesheets/style.css">
</head>
<html>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylehsheet", href="/stylesheets/style.css">
</head>
</html>
장점 : HTML 문법을 그대로 사용하되, 추가로 Javascript문법을 사용할 수 있다.
// 터미널 상 설치 npm i ejs
단점 : HTML 문법과 별 차이가 없어서 간단하진 않다.https://velog.io/@juneverbena/Node.js-%ED%85%9C%ED%94%8C%EB%A6%BF%EC%97%94%EC%A7%84
출처
'Node.js' 카테고리의 다른 글
Nodejs Express MariaDB(Ubuntu) 회원가입 및 로그인 (1) (0) | 2021.12.21 |
---|---|
[MERN] SNS Chat App 만들기 (1) (0) | 2021.11.24 |
[Node.js] Express Server 구축 (0) | 2021.11.09 |
[React] constructor() 생성자 사용법 (0) | 2021.10.20 |
[Node.js/vue.js] 영화정보 페이지 제작(frontend, backend 연동) (0) | 2021.09.17 |