EXPRESS, 리팩토링, Middleware

 

---

Node.js Express  ✔️

 

MERN Stack: MongoDB, Express, React, Node

 

프레임워크 Express

 

장점: 미들웨어 추가가 편리하다. 자체 라우터를 제공한다.

 

 

기본 라우팅 ☑️

라우팅은 URI 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다.

각 라우트는 하나 이상의 핸들러 함수를 가질 수 있으며, 이러한 함수는 라우트가 일치할 때 실행된다.

 

app.METHOD(PATH, HANDLER)

 

app은 express의 인스턴스
METHOD는 HTTP 요청 메소드 
PATH는 서버에서의 경로
HANDLER는 라우트가 일치할 때 실행되는 함수

 

간단한 라우트의 정의

 

// 홈페이지에서 Hello World!로 응답
app.get('/', function (req, res) {
	res.send('Hello World!');
});

// 애플리케이션의 홈 페이지인 루트 라우트(/)에서의 POST 요청에 응답
app.post('/', function (req, res) {
	res.send('Got a POST request');
});

// user 라우트에 대한 PUT 요청에 응답
app.put('/user', function (req, res) {
	res.send('Got a PUT request at /user');
});

// /user 라우트에 대한 DELETE 요청에 응답
app.delete('/user', function (req, res) {
	res.send('Got a DELETE request at /user');
});

 

 

Express에서 정적 파일 제공  ☑️

이미지, CSS 파일 및 Javascript 파일과 같은 정적 파일을 제공하려면 Express의 기본 제공 미들웨어 함수인 
express.static을 사용하면 됩니다 ! 

app.use(express.static('public'));​

 

example

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html​

 

다수의 정적 자산 디렉토리를 이용하려면 여러 번 호출하면 된다

app.use(express.static('public'));
app.use(express.static('files'));​

 

Express 앱을 다른 디렉토리에서 실행하는 경우에는 다음과 같이 제공하기 원하는 디렉토리의 절대 경로를 사용하는 것이 안전하다.

app.use('/static', express.static(__dirname + '/public'));​

 

 

라우팅 ☑️

라우팅은 애플리케이션 엔드포인트의 정의, 그리고 URI가 클라이언트 요청에 응답하는 방식을 말한다.

// 기본적인 라우트의 예
const express = require('express');
const app = express();

// GET 요청이 홈페이지에서 요청되면 'hello world' 로 응답한다.
app.get('/', function(req, res) {
	res.send('hello world');
});

// POST method route
app.post('/', (req, res) => {
	res.send('POST request to the homepage');
});

 

라우트 핸들러  ☑️

미들웨어와 비슷하게 작동하는 여러 콜백 함수를 제공하여 요청을 처리할 수 있습니다. 

차이점은 이런 콜백은 next('route')를 호출하여 나머지 라우트 콜백을 우회할 수도 있다는 점이다.

이러한 메커니즘을 이용하면 라우트에 대한 사전 조건을 지정한 후, 현재의 라우트를 계속할 이유가 없는 경우에는
제어를 후속 라우트에 전달할 수 있다.

const cb0 = function ( req, res, next ) { 
	console.log('CB0');
    next();
}

const cb1 = function ( req, res, next ) { 
	console.log('CB1');
    next();
}

app.get('/example/d', [cb0, cb1], function (req, res, next) {
  console.log('the response will be sent by the next function ...');
  next();
}, function (req, res) {
  res.send('Hello from D!');
});​

 

Express 앱에서 사용하기 위한 미들웨어 작성  ☑️

미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트(res), 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수에 대한 
액세스 권한을 갖는 함수이다.

그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시된다.

미들웨어 함수는 아래의 태스크를 수행할 수 있다.

모든 코드를 실행
요청 및 응답 오브젝트에 대한 변경을 실행
요청-응답 주기를 종료
스택 내의 그 다음 미들웨어를 실행

** 현재의 미들웨어 함수가 요청-응답 주기를 종료하지 않는 경우에는 next()를 호출하여
그 다음 미들웨어 함수에 제어를 전달해야한다. 
그렇지 않으면 해당 요청은 정지된 채로 방치된다.

const express = require('express');
const app = express();

const myLogger = function (req, res, next) {
  console.log('LOGGED');
  next();
};

app.use(myLogger);

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);​

 

미들웨어 사용  ☑️

Express는 자체적인 최소한의 기능을 갖춘 라우팅 및 미들웨어 웹 프레임워크이며, 
Express 어플리케이션은 기본적으로 일련의 미들웨어 함수 호출이다.

 

app.use('/user/:id', function(req, res, next) {
  console.log('Request URL:', req.originalUrl);
  next();
}, function (req, res, next) {
  console.log('Request Type:', req.method);
  next();
});

 

애플리케이션 레벨 미들웨어(app.use...)와 라우터 레벨 미들웨어(router.use...)의 차이

 

라우터 레벨 미들웨어는 express.Router() 인스턴스에 바인드된다는 점을 제외하면 애플리케이션 레벨 미들웨어와 동일

const router = express.Router();​

 

오류 처리 미들웨어

오류 처리 미들웨어에는 항상 4개의 인수가 필요하다.
어떠한 함수를 오류 처리 미들웨어 함수로 식별하려면 4개의 인수를 제공해야 한다.
next 오브젝트를 사용할 필요는 없지만, 시그니처를 유지하기 위해 해당 오브젝트를 지정해야 한다.
그렇지 않으면 next 오브젝트는 일반적인 미들웨어로 해석되어 오류 처리에 실패하게 된다.

app.use(function(err, req, res, next) {
  console.error(err.stack);
  res.status(500).send('Something broke!');
});​

 

오류 처리 미들웨어는 다른 app.use() 및 라우트 호출을 정의한 후에 마지막으로 정의해야 한다.

const bodyParser = require('body-parser');
const methodOverride = require('method-override');

app.use(bodyParser());
app.use(methodOverride());
app.use(function(err, req, res, next) {
  // logic
});​

---

 

스프린트를 진행하며 헷갈렸던 부분 🎧

 

1. req.param: 주소에 포함된 변수를 담는다. 예를 들어 https://myroom.com/post/0001 이라는 주소가 있다면 0001를 담는다

2. req.query: 주소 바깥, ? 이후의 변수를 담는다. 예를 들어 https://myroom.com/post?q=chair 일 경우 chair를 담는다

3. req.body: XML, JSON, Multi Form 등의 데이터를 담는다. 당연히 주소에선 확인할 수 없다.

---