SEB 섹션2. 15일차 TIL - Web Server (2)_express.js

 

---

Express JS 개요

MongoDB, Express, React, Node 모두 자바스크립트 생태계내 각 분야별 프레임워크에서 1짱을 먹고 있다. 아 물론 리액트는 라이브러리(페북 주장에 따르면), Node는 런타임이긴 하지만 그냥 여기선 넓은 개념으로 프레임워크라고 치자.

 

이 4대장들을 묶어서 MERM stack이라고 부른다.

 

그 중에서 Express는 서버 쪽을 담당하고 있다.

이번에는 서버를 구축하는 과제와 함께 Express 와 대면하는 시간을 가져봤다.

 

 

Express JS 장점

Express를 사용하기 바로 직전에는 Node.js의 http모듈을 활용하여 서버를 만들었는데 그것도 나름 코드가 못 알아볼 수준은 아니고 이 정도 쓰고 서버가 작동한다고? 생각이 들 정도로 나쁘진 않았던 경험이 있었는데 Express는 그것보다 훨씬 간단해서 놀라움을 주었다. 이러한 코드가 간결하다는 장점과 함께 대표적인 장점들을 정리해보면 다음과 같다.

 

 

코드 간결성

우선 기본 http모듈에서 라우팅을 진행하기 위해서는 다음과 같은 과정을 거치게 된다. createServer함수 내에서 라우팅 및 메소드를 조건문으로 구현한다. 사실 이게 몇 개 안되면 모르겠지만 갯수가 많아질 수록 조건문이 많아지고 코드가 지저분해질 수 있는 가능성이 높다.

 

const http = require('http');

http.createServer((request, response) => {
	if(request.method === 'GET' && request.url === '/'){
     // 생략
    }
    // 기타 라우팅
}).listen(8080);

 

반면에 위와 같은 처리는 express에서 아래와 같이 간단해질 수 있다.

 

const Express = require('Express')
const app = Express()

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

 

상당히 코드가 간결해졌고 직관적으로 대상되는 http 메시지의 메소드와 라우트 주소를 확인해볼 수 있다.

 

 

미들웨어

미들웨어란 서버로 오는 요청에 대하여 응답이 발송되기 전까지 처리가 필요한 과정들을 진행시켜주는 도구다. 미들웨어는 모듈로 볼 수도 있다. 미들웨어를 물론 직접 코드 작성하여 내용을 구현할 수 있지만 이미 존재하는 미들웨어는 편하게 npm 등에서 가져와 사용할 수 있다. 대표적으로는 body-parser, cors가 있는데 body-parser는 어느 순간부터 express에 기본 내장으로 바뀌어서 모듈을 따로 가져와도 쓸 수가 없다.

(express의 dependency로 body-parser가 존재하는 것을 확인할 수 있다. => express.json()으로 동일한 기능 구현) 

 

미들웨어는 익스프레스에서 아주 유용하게 사용될 수 있기 때문에 큰 장점으로 볼 수 있다.

 

 

라우팅 기능

express 에서는 라우팅 기능을 자체적으로 제공하고 있다. 아까 언급한 코드 간결성 부분의 코드를 참고하면 http 모듈에서는 조건문을 덕지덕지 붙여가면서 라우팅을 구현할 수 있지만 express에서는 express.Router()를 활용하여 손쉽게 라우팅 기능이 적용될 수 있다.

 

 

---

Express JS 세부 활용

 

서버 Listen (서버 연결)

const express = require('express')
const app = exrpess()
const PORT = 3000

app.listen(PORT, () => {
	console.log(`app listening at http://localhost:${PORT}`)
})

 

express를 사용할 때 전체적인 app 단위로 기능을 분류할 때는 express() 호출을 app이라고 지정하고 활용한다. 물론 app이 아니라 다른 명칭으로도 활용이 가능하지만 express문서 상에서 app으로 통일하여 이야기 하고 있으며, API Reference에서도 app이라고 표기하면서 분류하여 설명하고 있으므로 가급적 app으로 설정하여 사용하는 것이 바람직해 보인다.

 

app.listen()은 첫번째 인자로 Port넘버를 받고 해당 포트 넘버로 서버를 띄운다. 그 외 두번째 인자는 host를 받는다. 그리고 추가적으로는 백로그도 받는다고 표기되어 있는데 활용하는 방식에 있어서 http모듈의 server.listen()과 동일하여 exrpess API 문서에서 상세한 부분은 해당 문서를 참고하게끔 유도하고 있다.

 

 

서버 메소드, 라우팅 기본

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

 

express에서는 http 모듈과 다르게 creatServer함수 내에서 메소드와 라우팅을 진행 해 줄 필요가 없다. 위와 같은 방식으로 app.Method([path], callback) 형태로 넣어줄 수 있다. Method 부분은 HTTP메시지의 해당되는 메소드를 설정하고 위의 코드 내용과 같은 방식으로 사용이 가능하다. 그리고 각 메소드에 따라서 매개변수의 내용이 일부 변경될 수 있다.

 

 

 

미들웨어 적용

앞서서 다루었던 미들웨어의 경우, 적용을 하는 방법은 크게 2가지가 있다. 

1. 각 라우팅에 개별로 적용

2. app.use()를 활용하여 전체적으로 적용

 

app.get('/', express.json(), (req, res) => {
	res.send("Hello world!");
})

위 코드는 'GET /' 을 오리진으로 가지는 경로에 미들웨어로 express.json()을 적용한 경우다. 이 경우엔 특정한 메소드를 활용한 특정한 라우팅에만 미들웨어의 작동이 적용된다.

 

app.use(express.json())

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

app.use를 사용하는 경우라면 모든 메소드와 라우팅에 미들웨어로 express.json()가 적용된다. 따라서 결과적으로 위 2개의 경우 모두 동일한 미들웨어 기능이 작동한다.