노드 애플리케이션을 템플릿화하기 위해 EJS 사용하는 방법

튜토리얼

소개

Node 애플리케이션을 빠르게 생성할 때, 때로는 애플리케이션을 템플릿화하는 빠른 방법이 필요합니다.

Jade는 Express의 기본 템플릿 엔진으로 제공되지만, Jade 구문은 많은 사용 사례에 너무 복잡할 수 있습니다.

내장된 JavaScript 템플릿 (EJS)는 대안 템플릿 엔진으로 사용할 수 있습니다.

이 문서에서는 Express 애플리케이션에 EJS를 적용하는 방법, 사이트의 반복 가능한 부분을 포함하고 뷰에 데이터를 전달하는 방법을 배우게 될 것입니다.

DigitalOcean App Platform을 사용하여 GitHub에서 프론트엔드 애플리케이션을 배포하세요. DigitalOcean이 앱의 확장에 집중하도록 해보세요.

전제 조건

이 문서를 따라 하려면 다음이 필요합니다:

참고: 전체 데모 코드의 git 리포지토리는 GitHub에서 찾을 수 있습니다.

이 자습서는 원래 express v4.17.1 및 ejs v3.1.5용으로 작성되었습니다. Node v16.0.0, npm v7.11.1, express v4.17.1 및 ejs v3.1.6에서 확인되었습니다.

단계 1 — 프로젝트 설정

먼저 터미널 창을 열고 새 프로젝트 디렉토리를 만듭니다:

  1. mkdir ejs-demo

그런 다음, 새로 만든 디렉토리로 이동하십시오:

  1. cd ejs-demo

이 시점에서 새 npm 프로젝트를 초기화할 수 있습니다:

  1. npm init -y

다음으로 express 패키지를 설치해야 합니다:

  1. npm install express@4.17.1

그런 다음 ejs 패키지를 설치하십시오:

  1. npm install ejs@3.1.6

이 시점에서 Express와 EJS를 사용할 준비가 된 새 프로젝트가 있습니다.

단계 1 — server.js로 구성

모든 종속성이 설치되었으므로 EJS를 사용하도록 응용 프로그램을 구성하고 인덱스 페이지와 About 페이지의 경로를 설정해 보겠습니다.

server.js 파일을 만들고 코드 편집기로 열고 다음 코드 라인을 추가하십시오:

server.js
var express = require('express');
var app = express();

// 뷰 엔진을 ejs로 설정
app.set('view engine', 'ejs');

// res.render를 사용하여 ejs 뷰 파일을 로드합니다.

// 인덱스 페이지
app.get('/', function(req, res) {
  res.render('pages/index');
});

// 소개 페이지
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

이 코드는 애플리케이션을 정의하고 8080 포트에서 듣습니다.

이 코드는 또한 Express 애플리케이션에 EJS를 뷰 엔진으로 설정합니다:

`app.set('view engine', 'ejs');`

코드가 res.render()를 사용하여 사용자에게 뷰를 보내는 방법에 주목하세요. res.render()는 뷰를 찾기 위해 views 폴더를 참조합니다. 따라서 전체 경로가 views/pages/index인 pages/index만 정의하면 됩니다.

다음으로, EJS를 사용하여 뷰를 생성합니다.

단계 2 — EJS 부분 만들기

빌드하는 애플리케이션 중 많은 양의 코드가 재사용될 것입니다. 이는 부분으로 간주됩니다. 이 예제에서는 인덱스 페이지와 소개 페이지에서 재사용되는 세 개의 부분이 있습니다: head.ejs, header.ejs, footer.ejs. 이제 이 파일들을 만들어 봅시다.

views 디렉터리를 새로 만듭니다:

  1. mkdir views

그런 다음, 새로운 partials 하위 디렉터리를 만듭니다:

  1. mkdir views/partials

이 디렉토리에 head.ejs 파일을 만들고 코드 편집기로 엽니다. 다음 코드 라인을 추가하십시오:

views/partials/head.ejs
<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  body { padding-top:50px; }
</style>

이 코드에는 HTML 문서의 head에 대한 메타데이터가 포함되어 있습니다. 또한 Bootstrap 스타일이 포함되어 있습니다.

다음으로, 새 header.ejs 파일을 만들고 코드 편집기로 엽니다. 다음 코드 라인을 추가하십시오:

views/partials/header.ejs
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

이 코드에는 HTML 문서의 내비게이션을 포함하며 Bootstrap의 여러 클래스를 스타일링에 사용합니다.

다음으로, 새 footer.ejs 파일을 만들고 코드 편집기로 엽니다. 다음 코드 라인을 추가하십시오:

views/partials/footer.ejs
<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

이 코드에는 저작권 정보가 포함되어 있으며 Bootstrap의 여러 클래스를 스타일링에 사용합니다.

이제 index.ejs 및 about.ejs에서 이 부분을 사용할 것입니다.

단계 3 — 뷰에 EJS 부분 추가

세 개의 부분이 정의되었습니다. 이제 뷰에 include 할 수 있습니다.

다른 파일에 EJS 부분을 포함시키려면 <%- include('파일의/상대/경로') %>를 사용하십시오.

  • 렌더링할 때 EJS에게 원시 HTML을 렌더링하도록 하려면 <%-대신에 <%를 사용하십시오.
  • 부분의 경로는 현재 파일을 기준으로 상대적입니다.

그런 다음 새로운 pages 하위 디렉터리를 만듭니다:

  1. mkdir views/pages

이 디렉터리에 새 index.ejs 파일을 만들고 코드 편집기로 엽니다. 다음 코드 라인을 추가합니다:

views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

이 파일에 대한 변경 사항을 저장한 다음 응용 프로그램을 실행합니다:

  1. node server.js

웹 브라우저에서 http://localhost:8080/을 방문하면 색인 페이지를 확인할 수 있습니다:

다음으로 새로운 about.ejs 파일을 만들고 코드 편집기로 엽니다. 다음 코드 라인을 추가합니다:

views/pages/about.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

이 코드는 부트스트랩 사이드바를 추가하여 다른 템플릿 및 페이지 간에 재사용할 수 있는 부분을 어떻게 구조화할 수 있는지 보여줍니다.

이 파일에 대한 변경 사항을 저장한 다음 응용 프로그램을 실행합니다:

  1. node server.js

웹 브라우저에서 http://localhost:8080/about을 방문하면 사이드바가 있는 어바웃 페이지를 확인할 수 있습니다:

이제 노드 응용 프로그램에서 데이터를 뷰로 전달하는 데 EJS를 사용할 수 있습니다.

단계 4 — 뷰 및 부분에 데이터 전달하기

색인 페이지로 전달할 기본 변수와 목록을 정의해 보겠습니다.

코드 편집기에서 server.js를 열고 app.get('/') 라우트 내에 다음 코드 라인을 추가합니다:

server.js
var express = require('express');
var app = express();

// 뷰 엔진을 ejs로 설정
app.set('view engine', 'ejs');

// res.render를 사용하여 ejs 뷰 파일을 로드합니다

// 인덱스 페이지
app.get('/', function(req, res) {
  var mascots = [
    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
    { name: 'Tux', organization: "Linux", birth_year: 1996},
    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
  ];
  var tagline = "No programming concept is complete without a cute animal mascot.";

  res.render('pages/index', {
    mascots: mascots,
    tagline: tagline
  });
});

// 소개 페이지
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

이 코드는 mascots라는 배열과 tagline이라는 문자열을 정의합니다. 다음으로, index.ejs에서 이들을 사용해 봅시다.

EJS에서 단일 변수 렌더링

단일 변수를 출력하려면 <%= tagline %>을(를) 사용할 수 있습니다.

코드 편집기에서 index.ejs를 다시 열고 다음 코드 라인을 추가합니다:

views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

이 코드는 인덱스 페이지에서 tagline 값을 표시합니다.

EJS에서 데이터 반복

데이터를 반복하려면 .forEach를 사용할 수 있습니다.

코드 편집기에서 index.ejs를 다시 열고 다음 코드 라인을 추가합니다:

views/pages/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

이 파일의 변경 사항을 저장한 다음 응용 프로그램을 실행합니다:

  1. node server.js

웹 브라우저에서 http://localhost:8080/을(를) 방문하면 인덱스 페이지에서 mascots을(를) 확인할 수 있습니다:

EJS에 데이터 전달하기

EJS 부분은 부모 뷰와 동일한 데이터에 액세스할 수 있습니다. 그러나 주의하십시오. 부분에서 변수를 참조하는 경우 부분을 사용하는 모든 뷰에서 정의되어야 합니다. 그렇지 않으면 오류가 발생합니다.

또한 다음과 같은 include 구문을 사용하여 EJS 부분에 변수를 정의하고 전달할 수 있습니다:

views/pages/about.ejs
...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

그러나 다시 한 번 변수가 정의되었다고 가정하는 것에 주의해야 합니다.

가끔 정의되지 않을 수 있는 부분에서 변수를 참조하고 기본값을 지정하려는 경우 다음과 같이 할 수 있습니다:

views/partials/header.ejs
...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

위의 줄에서 EJS 코드는 variant의 값을 정의하고 있으며, 정의되지 않은 경우 default를 렌더링합니다.

결론

이 글에서는 EJS를 Express 애플리케이션에 적용하는 방법, 사이트의 반복 가능한 부분을 포함하고 데이터를 뷰에 전달하는 방법을 배웠습니다.

EJS를 사용하면 추가적인 복잡성이 필요하지 않을 때 응용 프로그램을 구축할 수 있습니다. 부분을 사용하고 뷰에 변수를 쉽게 전달할 수 있는 능력을 활용하여 빠르게 훌륭한 응용 프로그램을 구축할 수 있습니다.

추가 정보는 기능 및 구문에 대한 EJS 문서를 참조하십시오. 서로 다른 뷰 엔진의 장단점을 이해하려면 Jade, Mustache, Dust 등을 비교하는 JavaScript 템플릿 엔진을 참조하십시오.

Source:
https://www.digitalocean.com/community/tutorials/how-to-use-ejs-to-template-your-node-application