[node.js] 익스프레스(express) 사용하기, 미들웨어란, 미들웨어 순서

Node.js 교과서'라는 책을 통하여 공부.

22.01.14(금) ~ 22.01.16(일)까지 공부한 내용을 기록.

227p ~ 256P

---

 

 

#익스프레스(express)와 노드몬(nodemon) 설치하기

npm을 통해서 익스프레스를 설치해준다. 또 개발의 편의를 위해 nodemon을 설치해주는데 앞선 포스팅에서 배웠던 것처럼 npm -D 옵션을 주어 개발자용으로 사용한다. nodemon은 서버를 재시작할 필요없이 서버.js을 저장하면 알아서 반영해준다. 마치 윕개발할때 live serever이나 리액트를 사용할때 처럼 말이다!

npm i express
node i -D nodemon

 

#익스프레스로 서버 시작해보기

const express = require('express'); 

const app = express(); //app에 express를 할당해준다.

app.set('port',process.env.PORT || 3000); //포트번호를 .env에 있으면 그걸 사용, 없으면 3000포트 사용

app.get('/',(req,res)=>{ // '/'으로 GET 요청이 들어오면 다음 미들웨어를 실행! 
  res.send('<h1>HELLO, NODE!</h1>');
})

app.listen(app.get('port'),()=>{ //set된 포트를 listen 하고, 성공한다면 다음 미들웨어를 실행한다는 뜻이다.
  console.log(app.get('port'), '번 포트 사용 중!');
})

먼저 express는 node의 서버 개발을 더 편리하게 해주는 하나의 프레임 워크다. 코드가 간결해지는 걸 알 수 있다! 또한 여러 미들웨어를 써드파티로 지원해 굳이 재가 코드를 짜지 않고, 다른 사람들이 쓴 코드를 require해서 사용하면 된다!

 

#미들웨어(middle)는 뭘까?

 내가 공부하고 있는 교재에서는, 사실상 익스프레스의 전부라고 표현을 하고 있다. req와 res의 중간과정이라고 하는데, 나는 아직까지는 req에서 뭔가를 보내주면 미들웨어에서 일단 처리를 해주고 res로 최종 결과물을 보낸다. 라고 생각하고 있는데 이건 공부하면서 오개념인지 아닌지 알 수 있을것 같다. 맞다면 다시 돌아와서 수정하도록 하겠다!

 

##미들웨어 사용해보기

미들웨어는 위에서 아래 방향으로 실행된다고 한다. 그래서 항상 순서에 유의를 해야한다. 기본적으로는 app.use()를 사용한다.

const express = require('express'); 

const app = express(); //app에 express를 할당해준다.

app.set('port',process.env.PORT || 3000); //포트번호를 .env에 있으면 그걸 사용, 없으면 3000포트 사용

app.use((req, res, next) => { //일단 모든 곳에서 아래의 미들웨어를 수행! 그리고 next()로 다음 미들웨어를 찾아 연결
  console.log("모든 곳에서 실행! 현재 주소 : ", req.url);
  next();
})

app.get('/',(req,res,next)=>{ // '/'으로 GET 요청이 들어오면 다음 미들웨어를 실행! 
  res.send('<h1>HELLO, NODE!</h1>');
})

app.get('/about', (req, res) => { // '/about'으로 GET 요청이 들어오면 다음 미들웨어를 실행! 
  res.send('<h1>about</h1>');
})


app.listen(app.get('port'),()=>{ //set된 포트를 listen 하고, 성공한다면 다음 미들웨어를 실행한다는 뜻이다.
  console.log(app.get('port'), '번 포트 사용 중!');
})

이렇게 한 후 포트에 연결시켜보면 app.use()에 등록한 미들웨어는 '/' 과 '/about' 중 어느 곳으로 접속해도 등록한 미들웨어를 실행해준다.

3000포트에 / 접속 한 후 /about에 접속해봤다!

저 next()가 상당히 중요한 개념이다. 만약 next()를 적지 않으면 app.get('/') app.get('/about')으로 연결되지 않고, app.use()의 미들웨어만 실행하고 끝나버린다. 

 

## app.use()를 뒤로보내 버린다면?

const express = require('express'); 

const app = express(); //app에 express를 할당해준다.

app.set('port',process.env.PORT || 3000); //포트번호를 .env에 있으면 그걸 사용, 없으면 3000포트 사용

app.get('/',(req,res,next)=>{ // '/'으로 GET 요청이 들어오면 다음 미들웨어를 실행! 
  res.send('<h1>HELLO, NODE!</h1>');
  //next() => 적고 안적고의 차이를 극명하게 알 수 있다.
})

app.get('/about', (req, res) => { // '/about'으로 GET 요청이 들어오면 다음 미들웨어를 실행! 
  res.send('<h1>about</h1>');
})

//위치를 이동시켜 봤다.
app.use((req, res, next) => { //일단 모든 곳에서 아래의 미들웨어를 수행! 그리고 next()로 다음 미들웨어를 찾아 연결
  console.log("모든 곳에서 실행! 현재 주소 : ", req.url);
  next();
})


app.listen(app.get('port'),()=>{ //set된 포트를 listen 하고, 성공한다면 다음 미들웨어를 실행한다는 뜻이다.
  console.log(app.get('port'), '번 포트 사용 중!');
})

그러면 이렇게 적으면 어떨까? 먼저 app.get('/')에 접속해보면 일단 그 안에 적은 미들웨어는 성공적으로 실행된다. 그래서 페이지가 잘 열린다.

근데 app.use()는 실행되지 않는다. next()로 안넘겨줘서 그냥 저기서 멈춰버린거다. 그래서 next()를 일단 잘 사용해야 한다는 것을 알 수 있었고, 또 use에 적었다고 가장 먼저 실행되는건 아닌거 같다. 그렇기 때문에 사용할 미들웨어는 순서에 맞게 위에서부터 적어줘야하는 것을 어림잡아 짐작해 봤다.

//추가
app.use('/about',(req,res,next)=>{ // '/about'으로 접속할때만 사용된다.
  console.log('/about에서만 실행되지롱~')
  next();
})

이러면 '/about'으로 접속했을때만 실행된다!

app.get('/about/my', (req, res) => { // '/about/my'으로 GET 요청이 들어오면 다음 미들웨어를 실행! 
  res.send('<h1>about/my</h1>');
})

그래서 이걸 추가시켜보고 '/about/my'로 접속해봤다.

그러면 app.use('/about')으로 지정해놨던 미들웨어도 실행된다..! 이거 잘 알고 있어야 할 것 같다!

 

#써드파티 미들웨어!

 그렇다. 이제 남이 만든 미들웨어를 사용하여 개발을 더 용이하게 해보자! 남이 만든 패키지를 사용해보자는 뜻이다!

npm 을 통해 원하는 패키지를 다운 받는다.

npm i cookie-parser

그리고 사용한다. 다 적지는 않고 그냥 이렇게 쓴다는 느낌만 기록해 두겠다!

const express = require('express'); 
const cookieParser = require('cookie-parser');

const app = express(); //app에 express를 할당해준다.

app.set('port',process.env.PORT || 3000); //포트번호를 .env에 있으면 그걸 사용, 없으면 3000포트 사용
app.use(cookieParser(process.env.COOKIE_SECRET));

앞에서 했던거랑 똑같은 느낌이다. 순서대로 미들웨어들이 실행된다고 했는데, 저렇게 상단에다가 패키지를 통해 받은 미들웨어를 사용해버리면, 모든 위치에서 일단 저 미들웨어가 실행될 것이고, 이제 사용법에 맞게 사용하면 된다. 예를 들면 저 쿠카파서 미들웨어가 이제 가장 첫번째로 실행되서 뭔가 쿠키들을 좀 쉽게 볼수 있도록 req.### 무엇인가를 조작해 놓을 것이고, 그러면 나는 이제 그 뒤에서 작업 해줄때 그냥 사용하면 된다! ===> cooke-parser는 req.signedCookies 객체에 서명된 쿠키정보를 조작해준다.

 

###body-parser

바디 파서는 익스프레서 4.16.0 버전부터 내장지원된다고 한다. 따로 설치할 필요가 없다는 뜻이다!

 

### next(), next('route'), next(err)

- next()는 다음 미들웨어로 이동시킨다.

- next('route')는 다음 라우터로 이동시킨다.

- next(err)은 에러처리 미들웨어로 이동시키는데, err은 그냥 내가 정한 인수명이고, 아무거나 입력하면 그것이 매개로 이동한다.

 

---

노드는 재밌다. 아직은 재밌다. 사실 뭐 어려운걸 아직 안하고 있어서 그런가..? 이번주 부터는 장고도 해야한다 ㅠㅠ 의도치 않은 백엔드 몰아치기 공부가 될 것 같당 ㅠ

 

책에 모든 부분을 기록하지는 않았다. 세션패키지 사용하는 법이나, multer 사용하는 것또 넘어갔고, router분리시키는 것도 넘어갔는데.. 이건 뒤에서 실습예제 하다가 하나씩 해보면 좋을것 같다..