[Node.JS] Express, EJS를 활용한 웹 서버 사용하기

Express란?

js를 위한 웹 애플리케이션 프레임워크이다.

이전 포스팅에서 node.js는 브라우저가 아닌 서버에서 js를 활용하도록 해주는 플랫폼으로 설명했는데 이를 기반으로한 미들웨어 중심의 웹 프레임워크다.

Express 설치 / 준비

npm install express

종속 항목 목록을 추가하지 않으려면 위와 같은 command로 진행하면 되고, 종속 항목을 수정하고 싶다면 --save 옵션을 기입하면 된다.

설치가 완료되면 package.json 파일에 dependencies - express에 버전이 기입된다.

 

express를 사용하기 위해선 js파일에 다음과 같이 몇 가지 설정을 해줘야한다.

const express = require('express')
const app = express()
const port = 8000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Listening on port ${PORT}! http://localhost:${PORT}`)
})

1. express 모듈 가져오기
2. const app 객체 : express함수를 호출하면서 만들어진 express application을 말한다.
3. 포트 번호 설정 - 실습 간에는 8000번으로 설정하였다.

express 최초 설정 후 출력 화면

EJS 엔진

EJS(Embeded Javascript Template) 엔진 설명에 앞서 템플릿 엔진에 대해 간략하게 알아보자.

템플릿을 데이터 모델과 결합해서 문서를 결과 문서를 생성하도록 설계된 소프트웨어를 말한다.

서버에서 DB 또는 API에서 가져온 데이터를 미리 정의된 템플릿에 넣고 html을 그려 클라이언트에 전달해주는 역할을 한다.

템플릿 엔진 다이어그램

일반적으로 앱의 프레임워크의 일부나 템플릿 시스템으로 사용되며 목적에 따라 문서, 웹페이지, 코드 등이 될 수 있다.

대표적인 템플릿 엔진은 EJS, Handlebars, Pug(Jade) 등이 있다.

 

EJS 엔진 사용 이유?

기존 html에서도 script 태그를 이용해 js를 사용할 수 있지 않냐는 반문이 있을 수 있다.

엔진을 사용하기 전에는 html과 script가 철저하게 분리되어 있다.

반면 EJS는 html의 태그처럼 js 내용을 사용할 수 있기 때문에 동적으로 구성하는데 수월하다.

이렇게 <script> 태그 내에서 정의 하더라도 사용할 수가 없다.

EJS 엔진 설치

express와 마찬가지로 명령어를 통해 설치할 수 있다.

npm install ejs

설치가 완료되면 package.json 파일 내 dependencies - ejs에 버전이 기입된다.

ejs 설치 완료시 package.json 내 버전 확인

 

EJS 문법

EJS의 문법은 js 문법과는 약간 다른 점이 있다.

html 내부에 js 문법을 넣는 것이기 때문에 약간의 태그가 필요하다.

html내에서 사용하기 위해 태그를 추가해야하는데 공식 홈페이지에서 제공하는 태그는 다음과 같다.

ESJ 태그

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

기존 js, html 문법 처럼 사용하고자 하는 함수의 처음과 끝만 태그로 감싸면 될 것 같지만

아웃풋 태그 <% 를 사용해서 사용하고자 하는 js의 줄마다 태그로 처리를 해줘야한다. 

아웃풋 태그를 통해 js 문법을 사용하더라도 html에서 혼용이 가능하게 만들었다.

<%= %> 태그와 <%- %> 태그의 차이는 이스케이프(태그 인식)의 여부다.

EJS 템플릿 설정

렌더링을 하기 위해선 뷰 엔진을 설정해줘야한다.

set을 통해 뷰페이지의 기본 경로를 설정할 수 있는데 default는 ./views 다.

 

미들웨어

미들웨어는 Express 애플리케이션에서 요청과 응답 처리를 중개하고 변형하는 역할을 한다.

이는 Express의 기능 중 하나이며, 웹 애플리케이션에서 다양한 작업을 수행하는 데에 사용된다.

 

Express에서의 미들웨어 사용

내장 미들웨어

Express에는 기본적으로 내장되어 있는 미들웨어가 있다. 

미들웨어는 app.use()와 함께 사용되는데 간단한 예시를 통해 알아보자.

웹 페이지에 모든 경로를 일일이 기입할 순 없기 때문에 공통의 로직이 필요하다.

epxress, ejs의 기본 설정을 index.js에 기입했는데 마찬가지로 공통 로직에 대한 부분을 해당 파일에 기입함으로써 

아래 예시와 같이 정적 파일을 제공할 수 있다.

app.use("/static", express.static(__dirname + "/static"));

예시는 절대 경로를 사용했는데, node프로세스가 실행되는 디렉터리에 따라 static 메서드가 상대적일 수 있기 때문에 절대 경로를 사용하는 것을 권장한다.

 

서드 파티 미들웨어

서드 파티 개발자가 만든 미들웨어 패키지를 Express 애플리케이션에 추가해서 사용할 수 있다.

일반적으로 'npm'을 통해 설치해서 사용한다.

const express = require('express');
const bodyParser = require('body-parser'); // 서드 파티 미들웨어

const app = express();

app.use(bodyParser.urlencoded({ extended: false })); // POST 데이터 파싱

애플리케이션 레벨 미들웨어

사용자가 직접 작성해서 미들웨어 함수를 생성하여 Express 애플리케이션에 추가할 수 있다.

요청과 응답을 조작하거나 추가 작업을 수행하는데 사용한다.

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

// 사용자 정의 미들웨어 함수
function myMiddleware(req, res, next) {
  // 요청 또는 응답 조작
  next(); // 다음 미들웨어로 전달
}

app.use(myMiddleware);

 

라우터 레벨 미들웨어

특정 라우터에 대한 미들웨어로 Express 라우터 객체에 추가되고, 이런 미들웨어는 해당 라우터에 해당하는 요청에 대해서만 영향을 미친다.

Express에서 말하는 라우터는 네트워크 계층의 라우터가 아닌 웹 앱의 라우팅 및 요청 처리를 담당하는 개념을 말한다.

const express = require('express');
const router = express.Router();

// 라우터 레벨 미들웨어
router.use((req, res, next) => {
  // 라우터 전용 미들웨어
  next();
});

 

오류 처리 미들웨어

오류가 발생했을시 실행되는 미들웨어로 오류 처리 미들웨어가 등록된 경우 애플리케이션에서 발생한 모든 에러는 이 미들웨어를 통해 처리된다.

app.use((err, req, res, next) => {
  // 오류 처리
  res.status(500).send('Something went wrong');
});

참고 자료

https://ejs.co/

EJS -- Embedded JavaScript templates

https://expressjs.com/

Express - Node.js web application framework