ExpressJS::개발환경 구축과 실행

NodeJS를 위한 빠르고 개방적인 간결한 웹 프레임워크인 ExpressJS의 실습을 위한 간단한 개발환경 구축 및 실행방법에 대하여 정리해 보았습니다.

NodeJS 설치하기

Express를 위해서는 NodeJS가 우선적으로 설치가 되어 있어야 합니다. https://nodejs.org/en/ 에서 다운로드 받은 후 간단한 절차를 통해 설치가 가능합니다. terminal에서 node 버전확인을 통해 설치가 제대로 되었는지 알 수 있습니다.

$ node -v

node version: 6.10.2

프로젝트 생성하기

개발툴에서 ExpressJS 실습을 위한 프로젝트를 생성해줍니다. 저의 경우 visual studio code(vscode)에서 started_express 라는 이름의 폴더를 생성해 주었습니다. 개발툴은 자신에게 잘 맞는 것으로 사용하시면 됩니다.

Visual Studio Code다운로드: https://code.visualstudio.com/download

package.json 생성하기

NodeJS를 사용하는 프로젝트 진행시에 npm을 이용하여 필요한 모듈을 내려 받게 됩니다. 이 경우, 소스코드가 모듈에 의존하게 되면서 모듈 버전에 의한 문제가 생길수 있습니다. 실제로 이것은 빈번히 발생하는 문제입니다. 때문에 의존성 모듈에 대한 버전관리가 필수적인데, 그 역할을 JSON 형식으로 이루어진 package.json 파일이 할 수 있습니다. package.json은 모듈에 대한 의존성관리 뿐만 아니라 프로젝트에 관한 정보를 담고 repository 경로 정의 등의 역할을 합니다. 

 아래의 명령어를 통래 기본적인 package.json 파일을 생성할 수 있습니다. terminal에서 작업을 할 경우 해당 프로젝트 경로에서 수행을 하면되고  vscode를 사용할 경우 통합 터미널(ctrl+`)에서 수행해 줍니다.

$ npm init -y

npm init을 수행하게 되면 인터렉티브 프롬프트가 동작하면서 프로젝트에 대한 여러가지 정보를 사용자에게 묻게되고 사용자는 그에 대한 답을 입력 할 수 있습니다. 입력한 정보를 기반으로 파일이 생성됩니다. '-y' option을 추가하면 파일 생성시 사용자에게 응답받는 모든 항목들을 yes로 하여 생성하게 됩니다. 실제로는 프로젝트에 관한 정보를 입력해주는 것이 좋지만 간단한 환경구성을 위한 포스팅이므로 '-y'를 사용하여 package.json을 생성하도록 하겠습니다.

 

npm init 명령어 실행

 npm init -y 명령어 실행

생성된 package.json파일

ExpressJS 설치하기

$ npm install express --save

npm install express 명령을 수행하면 로컬모드로 node_modules폴더가 생성됨과 동시에 ExpressJS를 사용하기 위한 여러 모듈들이 node_modules 하위에 추가 됩니다. NodeJS에서는 require를 통해 해당 모듈을 등록하여 사용할 수 있습니다. '--save' 옵션을 사용하면 package.json의 dependencies항목에 해당 모듈이 추가 되는데 이 후 해당 모듈의 버전을 변경한 후 npm install 하게되면 npm이 dependencies에 추가된 모듈을 해당 버전에 맞도록 모두 재설치합니다. 이는 모듈에 대한 버전 정보를 확인 할 수 있을 뿐만 아니라 사용할 모듈의 버전의 변경 또한 간편히 할 수 있도록 합니다.

npm install express --save를 통해 package.json dependencies에  express 모듈이 추가된다. 

node_modules폴더 하위에 생성된 모듈

로컬 모드는 해당 프로젝트 경로를 의미 합니다. '-g' 옵션을 추가하여 글로벌 모드로 설치하게 되면 로컬 디렉토리가 아닌 시스템 디렉토리에 있는 node_modules에 모듈을 설치하게 되는데, 글로벌 모드로 설치된 모듈은 require를 사용할 수는 없고 아래와 같이 npm link 명령어를 입력해야 사용 할 수 있습니다. 글로벌 설치시에는 sudo를 사용하여 관리자 권한으로 수행해줍니다.

$ sudo npm install -g express

$ cd [local path]/[project]

$ npm link express

ExpressJS 실행하기

 Express를 실행하기에 앞서 테스트를 위한 index.js 파일을 생성하도록 합니다. vscode 에서 아래와 같이 파일생성 버튼을 눌러 생성할 수 있습니다.

 

terminal 또는 vscode 통합터미널에서 touch 명령어를 통해서 파일을 생성하는 방법도 있습니다.

$ touch index.js

생성된 index.js

var express = require('express');
var app = express();
 
app.get('/', function(req, res) {
    console.log('Hello Express!!');
});
 
app.listen(3000);

NodeJS에서 기본적으로 제공하는 node 명령어에 실행할 파일명을 입력하고 수행한 후 http://localhost:3000 으로 접속하면 'Hello Express!!' 가 뜨는 것을 확인 할 수 있습니다. 3000 port로 listen 해주었기 때문에 http://localhost:3000 으로 접속한 모습입니다. ExpressJS에 관한 개념 또한 정리할 예정이니 향후 참조해 주시기 바랍니다.

$ node index.js

Express 실행

nodemon, supervisor 확장 모듈 설치 및 수행

위에서 사용했던 node를 사용한 웹서버 실행은 소스코드 수정이 있을때마다  ctrl + c로 서버를 종료하고 재수행 해주어야 브라우저에 반영이 되는 불편함이 있습니다. npm을 이용하여 supervisor나 nodemon 확장 모듈을 설치하여 사용하면 소스코드 수정을 자동으로 감지하여 매번 서버를 종료하고 재수행하는 수고를 하지 않아도 됩니다.

nodemon(node monitor)

$ sudo npm install -g nodemon

$ nodemon index.js

nodemon으로 서버 실행

supervisor

$ sudo npm install -g supervisor

$ supervisor index.js

참조

https://blog.outsider.ne.kr/665 :: package.json 으로 npm 의존성 모듈 관리하기

http://uiandwe.tistory.com/956 :: nodemon과 supervisor 모듈