노드 미들웨어 사용하기

//app.js
const express = require('express');
const path = require('path');

const app = express();
app.set('port', process.env.PORT || 3000);

app.get('/', (req, res) => {
  console.log('모든 요청에 실행');
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.post('/', (req, res) => {
  console.log('모든 요청에 실행');
  res.send('hello express!');
});

app.get('/about', (req, res) => {
  console.log('모든 요청에 실행');
  res.send('hello express');
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

전 게시글에서 express를 통해 만든 서버 코드에 모든 분기에 console.log를 입력해 보았다.

이처럼 모든 요청에 대하여 실행하고 싶은 코드가 있으면 중복이 일어나게 된다. 

이런 중복을 제거할 때 나오는 개념이 미들웨어이다. 

 

app.use를 사용하고 거기에 공통되는 코드를 넣으면 된다.

//app.js
const express = require('express');
const path = require('path');

const app = express();
app.set('port', process.env.PORT || 3000);

app.use((req, res, next) => {
  console.log('모든 요청에 실행');
  next();
})

app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.post('/', (req, res) => {
  res.send('hello express!');
});
 
app.get('/about', (req, res) => {
  res.send('hello express');
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

app.use에 공통되는 console.log를 넣었다. 

 

app.use는 3개의 인자를 가진다. req, res, 그리고 next이다. 

노드도 기본적으로 위에서 아래로 코드가 실행되는데 이 next가 없으면 app.use가 먼저 실행되고 그 밑으로 코드가 넘어가지 않는다.

next() 를 해 줘야 app.use가 실행되고 그 다음에 라우터에 맞는 부분이 실행된다. 

 

*라우터 router

이런 분기마다 처리할 메서드들이 있는데 이것을 라우터라 한다. 

요청이 / 면 app.get('/') 라우터가 대응되어 실행된다.

 

*라우트 매개변수 router parameter 와 wildcard

app.get('/:name', (req, res) => {
	res.send('hello ${req.params.name}');
});

와일드 카드 : 를 이용해서 라우트 매개변수를 사용했다. 

위의 코드를 보면 주소창에  / 이후에 입력된 것은 req.params.name 에 담기게 되고 그것을 ${} 표현식을 통해서 가져다 쓸 수 있다. 

따라서 / 뒤에 node 가 입력 됐다면 hello node가 출력이 되고 Python이 입력 됐다면 hello Python이 출력이 된다. 

 

이런 식으로 라우트 매개변수를 사용하여 수 많은 요청에 대한 수 많은 라우터들을 생성하지 않아도 된다. 

단, 위치가 매우 중요하다. 예를 들면 다음과 같다

app.get('/:name', (req, res) => {
	res.send('hello wildcard');
});

app.get('/Javascript', (req, res) => {
	res.send('hello Javascript');
});

이렇게 만들고 주소창에 /Javascript를 입력하면 어떻게 될까?

원하는 출력은 hello Javascript이지만 출력은 hello wildcard가 된다. 이유는 위에 설명되어 있다. 

따라서 와일드 카드를 사용할 때는 위치에 신경써야 한다.

 

정리하자면 와일드카드는 보통 다른 미들웨더보다 밑에 위치해야 한다.

 

다음 포스팅에 좀 더 자세히 다루겠다.

https://kmryu807.tistory.com/96