Node.js | Express 프레임워크

Node.js으로 효율적인 Web 어플리케이션을 개발한다면, 이를 위한 프레임워크를 도입하는 것이 가장 좋다. 여기에서는 Node.js의 Web 어플리케이션 프레임워크 간판이라고 할 수있는 “Express"를 설치하고 이용해 보자.
Tags:

프레임워크 장점과 Express

지금까지 Web 어플리케이션의 기본적인 기능에 대한 처리 방법에 대해 설명하였다. 그런데 솔직히 말하면 “생각보다 귀찮다"고 느꼈을 수도 있다.

프레임워크의 필요성

어쨌든, 무엇을 해야 할때도 모든 것을 세세하게 스스로 처리를 쓰지 않으면 안된다. EJS을 도입하여 템플릿을 사용할 수 있게 됐지만, 템플릿 파일을 미리로드해 놓고 그것을 렌더링 처리를 직접 작성해야 한다. 여러 페이지를 준비해야 한다면, 직접 URL 기반의 라우팅 프로세스를 만들어 두지 않으면 안된다. POST로 된 데이터는 이벤트를 사용하여 데이터를 모두 꺼내 와서 그것을 디코드하여 필요한 값을 사용할 수 있도록 이도 또한 처리를 직접 작성해야 한다. 이것으로는 다수의 페이지를 가진 복잡한 Web 응용 프로그램을 만들려는 의욕이 사라질 것이다.

이러한 작업의 대부분은 “Web 응용 프로그램이라면 반드시 필요한 것"이기도 한다. 그렇다면, Web 응용 프로그램이 사용하는 기능을 미리 모두 구현하여, Web 응용 프로그램으로 기본 시스템을 준비해 두면 보다 쉽게 개발을 할 수 있게 될 것이다.

이러한 생각에 탄생한 것이 “Web 어플리케이션 프레임워크"로 일반적으로 불리는 것이다. 단순히 기능을 모은 라이브러리가 아닌 Web 어플리케이션으로서의 기본적인 시스템 자체를 제공하는 프로그램이다.

Express 프레임워크

Node.js에도 이 Web 어플리케이션 프레임워크는 준비되어 있다. 그 중에서도 가장 널리 사용되고 있는 것이 “Express"라는 거다.

Express는 EJS과 동일하게 Node.js 패키지로 제공되고 있다. npm에서 간단히 설치하고, 이를 통합한 서버 프로그램을 만들 수 있다. 또한 템플릿 엔진에 EJS을 이용할 수 있기 때문에, 지금까지 만든 EJS 템플릿을 그대로 재사용할 수 있다.

Express에는 Web 응용 프로그램을 위한 기본적인 시스템이 구축되어 있으며, 이에 필요한 처리를 추가하는 것이다. Node.js에서만의 구현과 동일하게 이벤트 처리를 통합해 간다는 기본적인 개발 스타일은 변함이 없지만, 준비되어 있는 다양한 객체를 이용하여 아주 쉽게 필요한 처리를 조합할 수 있다.

Express 사이트는 아래와 같다. 여기에 문서 등도 공개되어 있다. (단, npm을 이용하기 때문에 여기에서 라이브러리 파일 등을 다운로드할 필요가 없다)

http://expressjs.com/

Express을 이용한 Web 어플리케이션 생성

그러면 실제로 Express를 이용하여 보자. Express를 사용하려면 먼저 npm을 사용하여 설치한다. 먼저 명령 프롬프트(Mac OS X라면 터미널)을 시작한다.

Express를 설치하는 경우, 생각해야 하는 것은 “Express를 어디에 설치 하느냐 “이다. 이는 다음 두 가지가 있다.

Node.js 모듈로 설치

Node.js 본체의 모듈로 저장한다. 이렇게 하면 어느 Web 애플리케이션에서도 사용할 수 있다. 그러나 응용 프로그램을 서버에 배포할 때에 해당 서버에 Express가 없으면 동작하지 않는다.

Node.js 모듈로 설치하는 것은 간단하다. EJS과 같이 명령 프롬프트에서 다음과 같이 실행하면 된다.

$ npm install express

Web 어플리케인션 폴더에 설치

이 방식은 어플리케인션을 만들 때마다 매번 설치해야 한다. 단, 어플리케인션에 모든 파일이 포함되어 있기 때문에 서버에 배포하게 되었을 때, 서버에 Express가 없어도 문제없이 동작한다.

실제로 만든 응용 프로그램을 배포하는 것을 생각한다면, 어플리케이션에 필요한 모듈을 전부 설치하는 것이 좋다. 여기에서는 그 방식으로 간단한 어플리케이션을 만들어 보자. 다음 단계에 따라 작업을 진행하십시오.

1. 응용 프로그램 폴더를 준비한다.

우선은 응용 프로그램을 만들 폴더를 준비한다. 여기에서는 바탕 화면에 “expressapp"라는 폴더를 준비하기로 한다.

명령 프롬프트를 시작하는 경우는, cd로 적당히 설치하고 싶은 폴더로 이동하여 다음과 같이 실행하면 폴더가 생성된다.

mkdir expressapp

2. 명령 프롬프트에서 폴더로 이동

명령 프롬프트(Mac OS X라면 터미널)을 시작한다. 그리고 cd 명령에서 “expressapp"폴더로 이동한다.

3. npm을 초기화

npm을 초기화한다. 이것은 다음과 같이 실행한다.

npm init

실행하면 이름, 버전, 설명문, 엔트리 포인트, 테스트 명령, git 저장소, 키워드, 저자, 라이선스 등을 차례로 묻어 온다. 잘 모르는 경우 전부 그대로 Enter 키를 누른다. 이것으로 package.json 파일이 생성된다.

4. Express 설치

Express를 설치한다. 이것은 다음과 같이 실행한다.

npm install express --save

이제 응용 프로그램의 “expressapp"에 “node_modules"라는 폴더를 만들지고, 그 안에 ’express’라는 폴더가 저장된다. 이것이 Express 파일이 저장되는 폴더이다.

5. EJS 설치

이어 Express에서 템플릿 엔진으로 사용하는 EJS을 설치한다. 역시 npm을 사용하여 다음과 같이 실행한다.

npm install ejs

이것으로 “node_modules"폴더에 “ejs"폴더가 만들어지고 거기에 파일이 저장된다.

 

이제 Web 응용 프로그램 작성을 위한 준비가 되었다. 이 후에는 여기에 스크립트 및 템플릿 등 구체적인 코드를 추가하여 응용 프로그램을 구축해 나가면된다.

Express을 이용한 기본 스크립트

그럼 Express를 이용한 응용 프로그램의 스크립트를 작성한다. 먼저 Express를 사용하는 가장 기본적인 스크립트를 생각해 본다.

기본 스크립트 작성

텍스트 편집기를 사용하여, 아래의 스크립트를 작성한다. 그리고 앞전에 “expressapp"폴더에 “app.js"라는 이름으로 저장한다.

var express = require('express');
var app = express();
 
app.get('/', function(req, res){
    res.send('Hello World!');
})
 
var server = app.listen(3000, function(){
    console.log('Server is running!');
})

저장되면, 명령 프롬프트에서이 app.js가 있는 폴더( “expressapp"폴더)로 이동하여,

node app.js

이렇게 node 명령을 실행한다. 그리고 브라우저에서 다음을 방문해 본다.

http://localhost:3000/

화면에 “Hello World!“로 텍스트가 표시된다. 아직 템플릿도 아닌, 단지 텍스트를 출력하고 있는 만큼 간단한 예제이지만, “Express를 사용하는 응용 프로그램"의 기본 스크립트는 완성 되었다.

Express 기본 처리 정리

이 예제에서는 Express를 이용하기에 기존의 스크립트는 작성법이 변경 되었다. 그럼 포인트를 정리한다.

Express를 로드한다.

var express = require('express');

먼저 Express 라이브러리를 로드한다. 이는 require('express')으로 수행할 수 있으며, 로드된 변수 express를 사용하여 Express 기능을 이용할 수 있다.

Express Application 객체 만든다.

var app = express();

최초에 실행하는 것은 애플리케이션의 객체를 준비이다. 이는 express 함수를 호출한다. 이 함수는 Express 애플리케이션인 ‘Application’ 객체를 생성하고 반환한다.

GET 등록하기

app.get("/", function(req, res){...중략...});

이어서 GET 등록을 수행한다. 이는 HTTP의 GET에 의한 액세스를 등록한다. 첫번째 인수에는 액세스하는 경로를 두번째 인수에는 실행하는 함수를 각각 지정한다. 이것으로 첫번째 인수의 경로에 액세스가 있었을 때, 두번째 인수의 함수를 호출을 하게 된다.

두번째 인수의 콜백 함수는 request와 response 객체가 각각 인수로 전달된다. 이는 이미 잘 알고 있는 요청 및 응답 객체가 전달된다.

이 get 메소드에 필요한 만큼 액세스하는 경로에 함수를 등록해 나가면, 얼마든지 페이지를 추가해 나갈 수 있다. 이걸로 귀찮은 라우팅 처리 등이 필요 없어지게 된다.

포트를 수신(listen)한다.

app.listen(3000, function(){...중략...});

마지막으로, 포트 번호를 지정하여 “listen"를 호출한다. 이것으로 지정 포트 번호로 대기 상태를 시작한다. 콜백 함수로 수신 시작 후의 처리를 준비할 수 있다.

이것으로 서버 시작 처리가 완료된다. 이 후에는 어디선가 지정된 경로에 액세스가 있으면, 그 처리가 실행되게 된다.

Node.js 자체로 만들었던 것과 비교하면, 충분히 깔끔한 스크립트가 되었다. Express를 사용하면 충분히 효율적으로 Web 어플리케이션을 만들 수 있다.

Express에서 템플릿 사용

우선, Express를 이용한 기본적인 처리의 흐름은 대체로 알 수 있었다. 이어서 템플릿을 이용하여 표시을 해 보도록 한다. 템플릿 파일을 준비하고, app.js 스크립트를 수정하면 가능할 것이다.

템플릿 준비

먼저 템플릿부터 작성한다. 이번에는 “test.ejs"라는 파일명으로 생성할 수 있다. 아래에 소스 코드를 올려 두었다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title><%=title %></title>
    <style>
    body { font-size:12pt; color:#000066; }
    h1 { font-size:18pt; background-color:#DDDDFF; }
    pre { background-color:#EEEEEE; }
    </style>
    </head>
<body>
    <header>
        <h1><%=title %></h1>
    </header>
    <article>
        <%-content %>
    </article>
</body>
</html>

이번에 작성한 test.ejs는 Web 어플리케이션에 그대로 배치는 하지 않는다. Web 어플리케이션의 폴더에 새로운 “views"라는 폴더를 준비한다. 그리고 이 폴더에 test.ejs을 넣어 둔다.

Express에는 화면 표시 관련 템플릿은 이렇게 “views"폴더에 정리 된다(설치 장소 및 폴더 이름은 변경할 수 있지만, 디폴드로 views라는 폴더로 되어서 여기에서는 그대로 작성한다).

만든 템플릿은 기본적으로 앞전에 EJS 템플릿과 거의 동일하다.

여기에서는 헤더 부분과 바디에 <%=title %>라는 제목을 출력하는 태그를 준비하고, 컨텐츠를 표시하기 위해 <%-content %>라는 태그를 준비하고 있다. Node.js의 스크립트에는 이러한 태그로 출력하는 title과 content 같은 변수에 값을 전달하는 방식으로 처리를 준비하면 된다.

템플릿 이용한 처리

그럼 Node.js 스크립트를 작성해 보도록 한다. app.js를 아래과 같이 작성한다.

var express = require('express');
var ejs = require("ejs");
  
var app = express();
  
app.engine('ejs', ejs.renderFile);
  
app.get("/", function(req, res){
    res.render('test.ejs',  {title: 'Test Page',  content: 'this is test.'});
});
  
var server = app.listen(3000, function(){
    console.log('Server is running!');
})

다시 “node app.js"에서 서버를 시작하고, localhost:3000에 액세스해 본다. 템플릿을 렌더링한 표시가 나타날 것이다.

템플릿 이용 포인트

이것으로 EJS을 사용한 템플릿 기능이 Express에서도 제대로 사용할 수 있게 되었다. 그럼 수정 사항을 체크해 보겠다.

EJS 로드

var ejs = require("ejs");

우선 먼저 require으로 EJS을 로드해야 한다. 이것은 이미 익숙한 작업이기 때문에 알것이다.

템플릿 엔진 설정

app.engine('ejs', ejs.renderFile);

템플릿 엔진을 설정한다. 이것은 Application 객체의 “engine"메소드를 사용하여 설정한다. 첫번째 인수는 템플릿 파일의 확장명을 두번째 인수에는 템플릿 엔진의 콜백 함수를 설정한다. 이 콜백 함수는 ejs 객체의 renderFile 프로퍼티를 설정한다. 이것으로 템플릿 엔진의 설정이 완료되었다.

GET 콜백 함수 준비

콜백 함수안에서 수행하고 있는 것은 EJS 템플릿을 사용한 페이지 표시이다. response의 render 메소드를 호출하고 있다.

res.render( 템플릿 파일, 객체 );

첫번째 인수에 사용하는 템플릿 파일 이름, 두번째 인수에는 템플릿에 전달할 변수 이름을 키로 값을 연관 배열로 정리하여 결합을 지정한다. 이것으로 페이지가 렌더링된다.

주의할 것은 템플릿 파일 이름이다. 이것은 “views"폴더에 저장되어 있어야 한다. 여기서 “views/test.ejs"와 같은 식으로 views 폴더의 경로를 쓸 필요는 없다. 다만 “test.ejs” 파일 이름만 지정하면 된다.

Express는 자동으로 “views"폴더에서 파일을 검색할 수 있게 되어있는 것이다. 반대로, “views” 폴더가 아닌 어플리케이션 폴더안에 파일이 있거나 하면 발견되지 않고 오류가 발생되므로 주의한다.

자, 이것으로 우선 Express를 사용한 응용 프로그램의 기본은 알았다. 사용법만 알면, Node.js 단독으로 사용하는 것보다 전체가 정리되어 알기 쉬워진다.




최종 수정 : 2018-07-16