Express에서 EJS를 활용한 동적 웹 페이지 만드는 방법

이 글에서는 Node.js의 Express 프레임워크와 EJS 템플릿 엔진을 사용하여 동적 웹 페이지를 만드는 방법을 소개합니다. EJS는 JavaScript 코드를 HTML 템플릿에 쉽게 삽입할 수 있게 해주는 강력한 템플릿 엔진으로, 웹 애플리케이션에서 다양한 데이터를 동적으로 표시할 수 있도록 도와줍니다.

EJS 설치

먼저, Express 애플리케이션에 EJS를 설치하고 설정해야 합니다. 터미널에서 다음 명령어를 실행하여 EJS를 설치합니다.

npm install ejs

간단한 EJS 템플릿 만들기

EJS를 사용하여 동적 웹 페이지를 만들어보겠습니다. ‘views’ 폴더 내에 ‘index.ejs’ 파일을 생성하고, 다음과 같은 내용을 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Hello EJS</title>
</head>
<body>
    <h1>Welcome to EJS, <%= name %>!</h1>
</body>
</html>

EJS 사용 예제

이제, Express 라우트를 설정하여 ‘index.ejs’ 템플릿을 렌더링해 보겠습니다. 애플리케이션의 메인 파일 (예: app.js)에서 다음 코드를 작성합니다. 그리고 Express 애플리케이션에서 EJS를 뷰 엔진으로 사용하도록 설정해야 합니다.

// Express 모듈을 불러옵니다.
const express = require('express');
// Express 애플리케이션을 생성합니다.
const app = express();

// 애플리케이션의 뷰 엔진으로 EJS를 설정합니다.
app.set('view engine', 'ejs');

// 루트 URL('/')에 대한 GET 요청을 처리합니다.
app.get('/', function(req, res) {
  // 'index' 뷰를 렌더링하고, 뷰로 'name' 변수를 전달합니다.
  res.render('index', {name: 'BlueShare'});
});

// 3000번 포트에서 서버를 시작하고, 서버가 시작되면 콘솔에 메시지를 출력합니다.
app.listen(3000, function() {
  console.log('Server is running on port 3000');
});

Express 모듈을 불러오고, 이를 사용하여 새로운 Express 애플리케이션 인스턴스를 생성합니다.
애플리케이션의 뷰 엔진으로 EJS를 사용하도록 설정합니다. 이를 통해 .ejs 파일을 사용하여 애플리케이션의 뷰를 렌더링할 수 있습니다.
루트 URL(‘/’)에 대한 GET 요청이 들어올 경우, index.ejs 파일을 렌더링하도록 합니다. 이때 name 변수에 'BlueShare' 문자열을 할당하여 뷰로 전달합니다. EJS 템플릿 내에서 이 변수를 사용하여 동적인 콘텐츠를 생성할 수 있습니다.
Express 서버를 3000번 포트에서 시작합니다. 서버가 성공적으로 시작되면, “Server is running on port 3000” 메시지를 콘솔에 출력하여 서버 시작 상태를 알립니다.

브라우저에서 ‘http://localhost:3000’으로 접속하면, ‘Welcome to EJS, BlueShare!’라는 메시지를 볼 수 있습니다. 이 예제에서는 ‘name’이라는 변수를 ‘index.ejs’ 템플릿에 전달하고, 템플릿 내에서 이 변수를 사용하여 페이지에 메시지를 동적으로 표시했습니다.

참고 사이트

이 가이드를 통해 Express 애플리케이션에서 EJS 템플릿 엔진을 사용하여 동적 웹 페이지를 만드는 기본적인 방법을 배울 수 있습니다. EJS와 Express를 활용하면, 서버 사이드에서 데이터를 처리하고 클라이언트에 동적인 콘텐츠를 효과적으로 제공할 수 있습니다.

Express에서 EJS를 활용한 동적 웹 페이지 만드는 방법

EJS 설치

간단한 EJS 템플릿 만들기

EJS 사용 예제

참고 사이트

관련 이전 게시글

동일 카테고리 게시글