안녕하세요, 미래문 입니다!
이번 포스팅에서는 Node.js 에서 ejs 템플릿 엔진을 사용하는 방법에 대해서 알아보도록 하겠습니다.
1. ejs 란?
ejs는 Embedded JavaScript 의 약자로, HTML 안에 자바스크립트 코드를 내장시켜서 쓸 수 있는 템플릿엔진입니다.
템플릿 엔진이란 무엇이냐하면, 템플릿 파일을 읽어서 HTML 형식으로 변환 시켜주는 모듈을 말합니다.
템플릿 엔진을 사용하면 HTML 문서 사이사이에 서버에서 사용하는 변수를 삽입하기가 아주 용이해집니다.
2. ejs 설치하기
ejs는 npm을 이용하여 간단하게 설치할 수 있습니다.
npm install ejs
3. ejs 사용하기
먼저, ejs를 사용하기 위해서는 서버를 실행하는 js 파일 맨 위에 다음의 코드를 선언합니다.
const ejs = require('ejs');
express를 이미 사용중이라고 가정하고 진행하겠습니다.
express 객체를 받은 app 이라는 변수를 선언하고, app의 set 함수를 이용하여 ejs 를 템플릿엔진으로 설정합니다.
작성된 server.js 파일의 코드는 다음과 같습니다.
const express = require('express');
const ejs = require('ejs');
// express 객체 생성
const app = express();
// 포트설정
const PORT = process.env.PORT || 80;
// ejs를 템플릿 엔진으로 설정
app.set('view engine', 'ejs');
// 서버 시작
app.listen(PORT, () => {
console.log(`Server start!!! =============> ${PORT}`);
console.log('Server is Running..');
});
그 다음, 실제 페이지를 브라우저로 접근하기 위해서 프로젝트 폴더 내에 views 폴더를 생성하고, ejs 파일을 생성해 줍니다.
저는 파일 이름을 test.ejs라고 하겠습니다.
test.ejs 파일의 내용을 다음과 같이 작성합니다.
<html>
<head>
<title>EJS 테스트</title>
</head>
<body>
서버로 부터 받은 내용 : <%= content %>
</body>
</html>
여기서, <%= %> 태그는 ejs에서 사용하는 태그 입니다.
해당 태그안의 content라는 변수를 서버에서 받아와 출력하겠다는 의미입니다.
다음으로, server.js 를 편집하여 브라우저에서 get메서드로 test.ejs 파일에 접근할 수 있도록 합니다.
const express = require('express');
const ejs = require('ejs');
// express 객체 생성
const app = express();
// 포트설정
const PORT = process.env.PORT || 80;
// ejs를 템플릿 엔진으로 설정
app.set('view engine', 'ejs');
// test.ejs 페이지 설정
app.get('/', (req, res) => {
res.render('test', {
content: '테스트 입니다.'
});
});
// 서버 시작
app.listen(PORT, () => {
console.log(`Server start!!! =============> ${PORT}`);
console.log('Server is Running..');
});
res.render 함수의 인자로 test 라는 문자열을 넘겨줌으로써,
views폴더 안에 있는 test.ejs파일을 이용하여 렌더링을 하겠다는 것을 명시해줍니다.
그리고 두번째 인자로 key-value 기반 데이터를 넘겨줌으로써, ejs 템플릿에 들어갈 데이터를 지정해줍니다.
이제, 서버를 실행하여 브라우저로 접근해보면 아래와 같이 정상적으로 ejs를 이용한 페이지를 구성할 수 있습니다.
이상으로 ejs를 이용하여 클라이언트 페이지를 구성하는 방법에 대해서 알아보았습니다.
도움이 되셨다면 공감버튼 클릭 한번 부탁드립니다!
감사합니다.
'Web - 백엔드 > Node.js' 카테고리의 다른 글
| [Node.js] Passport 모듈을 이용한 로그인 구현 3 - 현재 로그인된 유저 보기 (0) | 2019.01.29 |
|---|---|
| [Node.js] Passport 모듈을 이용한 로그인 구현 2 - 로그인 구현 (0) | 2019.01.29 |
| [Node.js] Passport 모듈을 이용한 로그인 구현 1 - 모듈 설치 / 준비 (0) | 2019.01.29 |
| [ Node.js ] mLab을 이용한 MongoDB 연결 3 - CRUD 구현 (2) (0) | 2019.01.29 |
| [ Node.js ] mLab을 이용한 MongoDB 연결 - CRUD 구현 (1) (0) | 2019.01.28 |
댓글