Node.js | EJS 템플릿 엔진 | 템플릿에서 사용할 수 있는 특수 태그

Tags:

EJS는 템플릿이 되는 HTML 코드에 특수 태그를 사용하여 필요한 정보를 포함할 수 있다. 준비되어 있는 태그는 다음 두 가지이다.

<%= 값 %>

작성한 값을 그 자리에 써 낸다. 스크립트 측에서 준비한 변수 등을 표시하는데 사용한다. HTML 태그 등이 포함되어 있는 경우, 그들은 이스케이프 처리된다.

<%- 값 %>

마찬가지로 값을 그 자리에 써 낸다. 다만, 이곳은 HTML 관련 태그는 이스케이프 처리되지 않고 그대로 쓰여진다.

<% 스크립트 %>

스크립트를 작성하고, 그것을 렌더링할 때 실행한다. 이것은 HTML에 <script> 태그로 작성된 스크립트와는 다르다. <script> 태그는 클라이언트(브라우저)에 보내져 실행되지만, 이 <% %>으로 작성된 태그는 서버 사이드(Node.js 내)에서 실행되어 그 결과가 클라이언트로 보내진다.

이 태그는 닫기 부분은 모두 공통적 %>로 되어 있지만, 이것을 -%>와 같이 마이너스를 붙여 작성하면 값을 출력하고, 후에 줄바꿈할 수 있다.

실제로 이러한 태그를 어떻게 사용하는지는 해보지 않으면 모른다. 그럼, 간단한 예제를 만들어 보자. 아래 에 예제를 올려 두었다. 이것을 “hello.ejs"라는 파일 이름으로, Node.js 스크립트 파일과 동일한 위치에 저장한다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title><%=title %></title>
    <style>
    body { font-size:12pt; color:#006666; }
    h1 { font-size:18pt; background-color:#AAFFFF; }
    pre { background-color:#EEEEEE; }
    </style>
</head>

<body>
    <header>
        <h1 id="h1"><%=title %></h1>
    </header>
    <div role="main">
        <p><%-content %></p>
    </div>
</body>
 
</html>

이것이 EJS 템플릿 파일이다. 템플릿 파일은 일반적으로 “. ejs"확장명으로 만든다. 여기에서는 HTML에 다음과 같은 태그를 포함하고 있다.

<%=title %>
<%-content %>

이것들은 각각 title, content라는 변수를 출력하게 된다. 그것은 스크립트 측에서 이러한 변수를 준비하고, 템플릿 측에 전달할 수 있다면 되는 거다. <%= %>와 <%- %> 템플릿의 가장 기본이되는 것이라고해도 좋을 것이다. (덧붙여 content 출력은 <%= 대신 <%-을 사용하고 있다. 이것은 좀 더 나중에 이유를 알 수 있다)

최종 수정 : 2018-07-16