[Node.js] EJS로 Express 구성하기

EJS

EJS(Embedded JavaScript)를 효과적으로 사용하기 위해서는 Express 앱을 적절히 구성해야 합니다. 이번 글에서는 간단한 Express 앱을 만들고 EJS를 설정하여 동적 템플릿을 적용하는 방법에 대해 살펴보겠습니다.

 

Express 앱 생성

먼저, Express 앱을 생성하고 필요한 패키지를 설치합니다.

npm init -y
npm i express

 

그리고 index.js 파일을 생성하여 Express 앱을 기본적으로 설정합니다.

// index.js

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

app.listen(3000, () => {
  console.log("LISTENING ON PORT 3000");
});

// 간단한 홈 라우트 추가
app.get('/', (req, res) => {
  res.send("HI");
});

 

EJS 설정

Express에 EJS를 사용하도록 앱을 설정합니다. 먼저, EJS 패키지를 설치합니다.

npm i ejs

 

그리고 Express 앱에서 EJS를 사용하도록 설정합니다.

// index.js

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

app.listen(3000, () => {
  console.log("LISTENING ON PORT 3000");
});

// EJS를 앱에 설정
app.set('view engine', 'ejs');

 

템플릿 파일 생성

이제 views 디렉토리를 생성하고, 그 안에 EJS 템플릿 파일을 작성합니다.

mkdir views
touch views/home.ejs

 

views/home.ejs 파일에 간단한 HTML 템플릿을 추가합니다. Lorem

<!-- views/home.ejs -->

<h1>The Home Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Nulla euismod, risus ut bibendum vulputate, felis felis posuere orci, vel scelerisque lectus nisl a nunc.</p>

 

Express에서 템플릿 렌더링

이제 Express 앱에서 EJS 템플릿을 렌더링하도록 코드를 수정합니다.

// index.js

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

app.listen(3000, () => {
  console.log("LISTENING ON PORT 3000");
});

// EJS를 앱에 설정
app.set('view engine', 'ejs');

// 홈 라우트 수정
app.get('/', (req, res) => {
  res.render('home');
});

 

http://localhost:3000/

 

 

이제 서버를 시작하고 웹 브라우저에서 http://localhost:3000으로 접속하면 EJS 템플릿이 렌더링된 홈 페이지를 확인할 수 있습니다. Express와 EJS를 통해 동적인 웹 애플리케이션을 더욱 효과적으로 구현할 수 있습니다. 앞으로 EJS의 다양한 기능과 활용법에 대해 더 자세히 알아보겠습니다. 계속해서 함께해주세요! 🚀