티스토리 뷰

프로그래밍 💻/nodejs

[Nodejs] 노드 express 템플릿으로 ejs 사용하기

박보희 2019. 5. 28. 14:44

안녕하세요.

nodejs에 express 템플릿으로 ejs를 사용하는 방법에 대해 간단하게 알아보겠습니다.

( nodejs가 설치되어 있다는 전제하에 진행하겠습니다. )

 

만약 express 템플릿으로 html을 사용하고 싶은 분들은 제 다른 글을 참고해주세요.

2019/05/21 - [프로그래밍/nodejs] - [Nodejs] 노드 express 템플릿으로 html 사용하기

 

[Nodejs] 노드 express 템플릿으로 html 사용하기

안녕하세요. : ) 1일 1블로그를 마음먹은 지 2주째... 예기치 못한 캠프로 마음이 지쳐 5일째 블로그를 멈췄습니다... Error: Cannot find module 'html' 오늘은 nodejs express에서 html을 사용하는 방법에 대해..

boheeee.tistory.com

 

먼저, node-project 라는 이름에 새로운 폴더 생성 후 기본이 되는 app.js 파일을 생성해 주세요.

app.js 파일에 서버가 실행되는 기본 코드를 작성하겠습니다.

const http = require('http');
const express = require('express');

const app = express();
const server = http.createServer(app);

const hostname = '127.0.0.1';
const port = 3000;

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

 

위 파일을 실행시켰을 때 아래와 같은 오류가 난다면 express 모듈을 설치해주셔야 합니다.

( 아래와 같은 오류가 나지 않은 분들은 넘어가 주세요. )

Error: Cannot find module 'express'

> npm install express

 

다음으로 ejs 템플릿을 사용하기 전에 ejs 모듈을 설치해주셔야 합니다.

> npm install ejs

 

ejs 설치도 완벽하게 마쳤다면 이제 ejs 템플릿을 사용해보도록 하겠습니다.

먼저, views 폴더를 생성해 주신 후 index.ejs 파일을 생성해주세요.

node-project 폴더 내에 파일 구조가 다음과 같이 되어 있어야 합니다.

 

views/index.ejs 파일에 간단하게 텍스트를 하나 작성하겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>index</title>
</head>
<body>
  <h1>is Index !</h1>
</body>
</html>

 

app.js 파일에 ejs 템플릿을 사용하겠다고 설정하겠습니다.

11번째 줄에는 view (보여지는) 템플릿으로 .ejs 파일을 사용하겠다고 설정했습니다.

12번째 줄에는 view (ejs 파일들)가 담겨있는 폴더 경로를 설정했습니다.

const http = require('http');
const express = require('express');
const ejs = require('ejs');

const app = express();
const server = http.createServer(app);

const hostname = '127.0.0.1';
const port = 3000;

app.set('view engine', 'ejs');
app.set('views', './views');

app.get('/', (req, res) => {
  res.render('index');
})

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

 

아래 코드는 '/' 경로로 들어왔을 때 index 파일을 띄워주겠다는 코드입니다.

11번째와 12번째에서 ejs 파일이 담겨있는 경로와 view 템플릿을 ejs로 설정해주어서 index만을 적고 나머지는 생략 가능합니다.

 

다시 app.js를 실행시켰을 때 아래와 같이 나오면 성공입니다. !

 

설명이 잘못된 점이 있거나 부족한 점이 있다면 댓글로 알려주세요.

감사합니다. ♥

저작자표시 비영리 동일조건

'프로그래밍 💻 > nodejs' 카테고리의 다른 글

[Nodejs] 노드 흥미롭고 신기한 모듈 (1) - colors  (0) 2019.07.02
[Nodejs] 노드 express 템플릿으로 html 사용하기  (0) 2019.05.21
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
글 보관함