nodejs - express 프레임워크를 이용한 웹 어플리케이션 구축

 

 

 

nodejs란 javascript를 기반으로 한 서버 사이드 플랫폼으로, 현재 Vue, React, React-Native, Electron 등 다양한 프레임워크의 기반 플랫폼으로 사용되고 있습니다.

2009년 처음 nodejs가 릴리즈 된 후부터 브라우저 내에서만 사용되던 javascript가 서버 기반으로 활발하게 활용되고 있으며, 국내 호스팅 업체에서도 nodejs 프로젝트를 지원하고 있습니다.

 

nodejs는 필자가 사용한지는 얼마 되지 않아 전부 파악할 수는 없었지만, 느낀 바 가장 큰 매력은 바로 javascript만으로 프로젝트 전반을 통제할 수 있다는 점입니다.

일례를 들자면, 현재 국내에서 널리 쓰이고 있는 Java Spring Framework에서는 컨트롤러는 Java를 사용하지만, DB에 접속하려면 myBatis, iBatis와 같이 DB에 접속하기 위한 별도의 도구가 필요하고 초기 세팅에 많은 수고가 들며, 의존성 관리도 매우 까다롭습니다.

 

하지만 nodejs는 다양한 패키지로 인해 서버, db 접속, 라우트 등 다양한 부분을 javascript라는 언어 하나로 통제가 가능하며, 필요한 패키지는 npm, yarn 패키지 관리자를 통해 간단하게 관리할 수 있습니다.

이러한 부분을 고려했을 때 nodejs는 매우 매력 있는 플랫폼임엔 틀림없는 듯합니다.

 

본 포스팅을 통해 필자 또한 이 nodejs의 깊은 매력을 알아가고자 합니다.

각설하고, Nodejs와 express을 사용한 웹 애플리케이션 구축을 진행해 보도록 하겠습니다.

 

1. Nodejs 설치

Nodejs는 최초 릴리즈 버전이 리눅스 버전입니다. 따라서, 리눅스를 중점으로, 특히 Ubuntu를 기준으로 설명합니다.

 

Ubuntu

Ubuntu는 os를 설치할 때 nodejs도 자동으로 포함되어 설치되므로 따로 설치할 필요는 없습니다.

그래도 혹시 모르니 터미널에서 아래의 명령어로 nodejs가 설치가 되어있는지 확인합니다.

$node -v
v8.10.0

만약 설치가 되어있다면 위와 같이 버전 정보를 반환해 줍니다.

설치가 되어있지 않다면 apt로 nodejs를 설치해 줍니다.

 

$ sudo apt-get update
$ sudo apt-get install nodejs

설치가 되었다면 다시 한번 $node -v를 통해 제대로 설치가 되었는지 확인합니다.

 

 

Windows

아래의 사이트를 방문해 nodejs를 다운로드하여 설치합니다.

https://nodejs.org/ko/

Node.js

다운로드할 때에는 가급적이면 최신 버전보다는 지원 기간이 긴 버전인 LTS버전으로 받는 것을 권장합니다.

 

다운로드한 msi를 더블클릭해 설치를 진행합니다. 특별히 설정해줄 것은 없으므로 라이선스를 동의하고 계속 Next를 눌러 설치를 완료합니다.

 

ubuntu와 마찬가지로 설치가 완료되면 cmd를 열어 버전을 확인합니다.

> node -v

 

 

2. NPM 설치

npm은 Nodejs Package Manager의 약자로 nodejs에서의 의존성 관리 및 프로젝트 자동생성을 해 주는 편리한 도구이므로 필히 설치해야 합니다.

 

Ubuntu

ubuntu에서는 nodejs 설치와 마찬가지로 apt를 통해 설치합니다.

설치가 끝났다면 버전 확인도 잊지 말아 주세요.

$ sudo apt-get install npm
$ npm -v

 

Windows

Windows에서는 요즘은 Nodejs 설치와 동시에 npm도 설치가 같이 되므로 별도로 설치할 필요가 없습니다. cmd에서 npm 버전을 확인합니다.

> npm -v

 

 

3. Express 프레임워크 설치

이 항목은 windows, ubuntu 공통 항목입니다.

 

Express는 nodejs에서 웹 애플리케이션을 개발하기 위한 프레임워크의 일종입니다.

현재 수많은 nodejs기반 웹이 이를 사용하고 있어 사실상의 표준 프레임워크로 불리고 있습니다.

Express는 그 자체만으로도 http 서버를 내장하고 있어 apache나 nginx와 같은 별도의 서버 없이 스스로 구동하는 것이 가능합니다.

 

이제 npm으로 Express를 설치해야 하는데, 단순히 Express만 설치한다면 애플리케이션 디렉터리, 구조를 모두 수동으로 세팅해 줘야 하므로 그 과정이 매우 고달파집니다.

하지만, 고맙게도 패키지 중에 그러한 작업을 대신해주는 패키지가 있으니 우리는 그것을 이용하도록 합니다.

 

터미널 및 cmd에 다음과 같이 입력합니다.

#window
> npx install express-generator -g

#ubuntu
$ sudo npx install express-generator -g

명령어 끝에 -g는 global 즉, 어디에서든지 사용할 수 있게 전역으로 설치한다는 의미로 빠뜨리지 않고 입력합니다.

이제 원하는 디렉토리에서 설치한 express-generator를 이용해서 프로젝트를 생성합니다.

 

4. Express 프로젝트 생성

본 예제에서는 프로젝트 생성은 윈도의 경우 C드라이브 하위, 우분투는 기본 디렉터리에서 node_project라는 폴더 안에 myapp이라는 이름의 프로젝트를 생성해주도록 하겠습니다.

express 프로젝트를 생성하기에 앞서 뷰 페이지를 어떤 것을 사용할 것인지 설정하는 옵션을 지정해주어야 합니다.

여기서는 ejs 확장자의 파일을 view 파일로 사용하는 프로젝트를 생성하겠습니다.

 

ejs 파일은 Embedded JavaScript의 약자로, javascript를 html 파일에 내장한 파일입니다.

쉽게 말해 Spring 프레임워크에서 사용되는 jsp파일에서 el / jstl을 이용해 java 코드를 직접 접근할 수 있는 것처럼 이것과 같은 개념으로 보면 됩니다.

jsp와 마찬가지로 표현식으로 작성된 코드는 html 파일에서 보이지 않는다는 공통점을 갖습니다.

표현식에 대한 자세한 설명은 다음 포스팅에서 작성 예정입니다.

 

각각 cmd, 터미널을 실행합니다.

Ubuntu

$ cd
$ mkdir node_project
$ cd node_project
$ express --view=ejs myapp

//프로젝트 모듈 설치
$ cd myapp
$ npm install

// 프로젝트 실행
$ DEBUG=myapp:* npm start

Windows

> c:
> cd ../../
> mkdir node_project
> cd node_project
> express --view=ejs myapp

//프로젝트 모듈 설치
> cd myapp
> npm install

//프로젝트 실행
> set DEBUG=myapp:* & npm start

 

마지막 명령어 실행 시 위와 같이 터미널에서 출력해 준다면 정상적으로 세팅이 되었다고 보면 됩니다.

express 프레임워크는 기본적으로 3000번 포트를 할당받습니다.

 

브라우저에서 localhost:3000으로 접속해 봅니다.

 

초기 출력 화면은 매우 심플하게 문장 2줄이 출력됩니다.

 

프로젝트 생성에 관한 자세한 내용은 아래 링크를 참고해 주세요.

https://expressjs.com/ko/starter/generator.html

Express 애플리케이션 생성기

 

이제 탐색기 등을 통해 앞서 세팅한 프로젝트 폴더로 가서 구조를 살펴봅니다.

 

프로젝트의 기본 구조는 아래와 같습니다.

.
├── app.js
├── bin
│   └── www
├── package.json
├── public
│   ├── images
│   ├── javascripts
│   └── stylesheets
│       └── style.css
├── routes
│   ├── index.js
│   └── users.js
└── views
    ├── error.ejs
    └── index.ejs

 

타 프레임워크에 비해 굉장히 심플한 구성으로 되어있습니다.

각각의 파일들의 역할들은 아래와 같습니다.

 

디렉토리 / 파일 명	역할
bin/www	http 서버 설정 및 생성 (서버 구동 시 가장 먼저 로드됩니다.)
app.js	view 엔진 및 라우팅 기능을 하는 express 객체를 세팅(환경 설정)
routes/*	요청 수신 및 view렌더링 (spring 프레임워크에서의 controller 역할)
public/*	주로 view에서 사용될 css, img, js 파일 관리
views/*	라우팅을 통해 브라우저에서 보여줄 화면 단 파일 (여기에 ejs파일이 위치합니다.)
package.json	nodejs의 의존성, 앱 이름 등 기본 정보 명세 npm install 명령어 수행 시, 이 파일을 기준으로 의존성 설치가 됩니다.

위 구조를 도식화한다면 아래와 같습니다.

 

여기서 npm start 명령어를 입력하면 먼저 bin/www 에서 서버를 생성하고, app.js를 요청해 express(view엔진 라우터 등) 설정을 합니다.

 

브라우저에서 http 요청을 받으면 app.js를 거쳐 routes/*.js를 호출하고, 여기서 데이터와 view를 처리하는 구조임을 확인할 수 있습니다.

 

이렇게 nodejs / Express 프레임워크를 이용한 웹 애플리케이션 초기 세팅이 완료되었습니다.

다음은 Express에서 MySql 접속을 통한 DB 연결 작업과 화면 이동(라우팅)에 대해 포스팅할 예정입니다.