[Node.js] 템플릿엔진

juneverbena·2021년 2월 6일

ejs html js nodejs 설리번프로젝트

Nodejs

목록 보기

1/1

'템플릿엔진'이란?

웹 프로그래밍을 할 때 주로 사용하는 마크업 언어인 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>

장점 : 문법이 간단하여 코드의 양이 줄어든다.
단점 : HTML과는 문법이 매우 달라 호불호가 갈린다.
// 터미널 상 설치
npm i pug

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문법을 사용할 수 있다.
단점 : HTML 문법과 별 차이가 없어서 간단하진 않다.
// 터미널 상 설치
npm i ejs

juneverbena

6월생 사람의 사는 얘기

1개의 댓글

note.JW

2021년 2월 7일

답글 달기