19.[Node.js] Express

1. express

  Node.js 기반의 웹 서버의 요청을 하기 위해선 우리는 매번 서버를 올려야 한다. 그리고 서버를 올리는 데는 많은 사전작업이 필요하다. 우리는 더 빠르고 효율적인 웹 서버 개발을 위해서 Node.js 기반으로 작동하는 웹 애플리케이션을 만들어야 할 필요성이 존재한다. 이때 사용하는 Node.js기반의 웹 프레임워크가 바로 express이다.

- express의 특징

• 빠르고 간편한 Node.js 시스템 구축을 위한 웹 프레임워크
• 미들웨어(Middleware) 구조를 통해 개발자가 필요로 하는 라이브러리만 골라서 사용 가능

- express 공식 홈페이지

https://expressjs.com/ko/

  우선 express 프레임워크를 사용하기 위해서는 설치가 선행되어야 한다. npm 패키지를 이용해 express 설치가 가능하다. 다음의 npm 명령어로 설치를 하도록 하자.

- npm 설치 명령어

npm install express --save

  설치를 끝내면 node.js 프로젝트의 node_modules 폴더 안에 express가 추가 된 것을 확인할 수 있다. 

2. express 웹 서버 만들기

  express 프레임워크를 활용해 기본적인 웹 서버를 만들어보자. 앞의 과정으로 express 설치가 끝났다면 손쉽게 구축할 수 있다. Hello world 를 출력해보자.

  express 공식 홈페이지에서 기본 코드가 제공 되어 있다.

const express = require('express')
const app = express()
const port = 3000
 
app.get('/', (req, res) => res.send('Hello World!'))
 
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

  출처 : https://expressjs.com/ko/starter/hello-world.html

 

const express = require('express')

  express 객체는 우리가 express 프레임 워크를 사용하여 웹 서버를 구축할 것을 명시한다.

const app = express()

  express 객체를 app 객체에 선언하게 되는데, 우리가 express에서 제공하는 라이브러리와 미들웨어를 사용하기 위한 기본 문법이다. 이곳에 우리가 구축하려는 웹 서버에서 사용할 express 기능이 선언된다. 대표적으로 라우팅, 미들웨어, 에러 처리 로직 등이 있다. 추후에 배워보자.

const port = 3000

  웹서버를 3000 port에 올리기 위해 명시적으로 선언을 해준다.

app.get('/', (req, res) => res.send('Hellw World'))

  app.get은 express에서의 웹 서버 요청이 들어간다. 기본적인 형태가 app.[메소드]('[URL]', 웹 서버 콜백 함수); 이다. 즉, 웹 서버에 get 요청을 하는 경우 app.get(...)이 될 것이고 post 요청을 하는 경우 app.post(...)가 된다. 위의 코드를 분석하자면 express 프레임워크를 통해 구현할 웹 서버에 get 요청을 하고, 기본 라우팅 URL('/')에서 응답 시 'Hello world')를 출력할 것이라는 의미가 된다.

  이제 저 기본 웹 서버를 구동 시키고 localhost에서 내용을 확인해보자.

  위와 같은 결과가 나오면 express 기반으로 하는 기본 웹서버 구축에 성공한 것이다.

3. express 라우팅

  앞선 시간에 배웠던 Node.js의 기본 웹 서버를 살펴보자.

<Node.js 라우팅>

http.createServer(function (req, res) {
    var pathname = url.parse(req.url).pathname; 
    if(pathname == '/') {
        // http://localhost:3000/ 
        res.writeHead(200, { 'Content-Type' : 'text/plain' });
        res.end("Hello world");
    } 
        
    else if(pathname == '/1') { 
        // http://localhost:3000/1
        res.writeHead(200, { 'Content-Type' : 'text/plain' }); 
        res.end("/1"); 
    }
 
}).listen(3000, function(){
    console.log('server on : 3000port')
});
 

  pathname을 parse 메소드를 통해 분리하여 if 문을 통해 라우팅을 지정해주었다. 

  express에서는 app.get 메소드의 파라미터를 사용하여 라우팅을 구현 할 수 있다. app.get의 기본 형태를 다시 살펴보자.

app.get(path, callback method[, callback method]);

  사용자가 get 요청으로 접속했다면 첫번째 라우팅 인자 전달을 통해 쉽게 라우팅을 추가할 수 있다. 위의 http 서버와 동일한 기능을 하는 app.get 요청은 다음과 같이 구현된다.

<express 라우팅>

const express = require('express')
const app = express()
const port = 3000
 
app.get('/', (req, res) => res.send('Hello World!'))
 
app.get('/1', (req, res) => res.send('/1'))
 
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

- localhost:3000/1

  이 처럼 express 코드는 node.js와 다르게 직관적인 구현이 가능하다. node.js 처럼 pathname에 대한 parsing 절차가 없어도 되므로 개발 편리성이 올라간다.