개념
EJS는 HTML을 동적으로 생성하기 위한 템플릿 엔진 중 하나입니다. 이는 JavaScript 코드를 HTML에 삽입하여 동적으로 웹 페이지를 생성할 수 있게 해줍니다. EJS는 Node.js와 함께 사용되며, Express와 같은 Node.js 웹 애플리케이션 프레임워크와 특히 호환성이 뛰어납니다.
특징
- 간편한 문법: EJS는 HTML에 JavaScript 코드를 삽입하기 위해 <% %>와 같은 간단한 문법을 사용합니다.
- 재사용 가능한 코드: EJS는 템플릿으로서의 역할을 하므로, 동일한 코드 조각을 여러 페이지에서 재사용할 수 있습니다.
- 프론트엔드와 백엔드의 통합: EJS를 사용하면 프론트엔드와 백엔드 로직을 하나의 파일에서 관리할 수 있어 개발 생산성을 향상시킵니다.
- 프레임워크와의 호환성: 주요 Node.js 웹 프레임워크들과의 호환성이 높아 Express와 함께 많이 사용됩니다.
시작하기
- EJS 설치하기: 먼저 프로젝트 디렉터리에서 npm을 사용하여 EJS를 설치합니다.
npm install ejs - Express 애플리케이션에 EJS 설정하기: Express 애플리케이션을 생성하고 EJS를 사용하도록 설정합니다.
const express = require('express');
const app = express();
// EJS를 템플릿 엔진으로 설정
app.set('view engine', 'ejs');- EJS 템플릿 작성하기: .ejs 확장자를 가진 파일에 HTML과 JavaScript 코드를 함께 작성합니다.
<!-- views/index.ejs -->
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1>Hello, <%= name %>!</h1>
</body>
</html>- 템플릿 렌더링하기: 라우팅을 설정하여 템플릿을 렌더링합니다.
app.get('/', (req, res) => {
res.render('index', { title: 'Homepage', name: 'John' });
});