[Node.js] express의 미들웨어, 라우터 미들웨어, 라우팅 파일 분리

 

익스프레스의 특징 중 하나는 미들웨어를 사용할 수 있다는 점이다.

미들웨어란, 클라이언트의 요청과 서버의 응답 사이에서, 요청을 처리하거나 원하는 형태로 응답을 수정하는 기능을 가진 함수 혹은 모듈을 의미한다.

 

예) 로그인 미들웨어

1. 요청 안에 포함된 아이디와 비밀번호의 값을 애플리케이션에서 읽을 수 있는 형태로 변환(파싱이라고 한다)

2. 아이디와 비밀번호 값을 사용하여 사용자 인증 처리

3. 처리 결과를 다음 단계(예: 화면 렌더링)로 넘겨줌

 

 

미들웨어의 역할

속성	설명
요청 전처리	요청이 서버에 도착하기 전에(클라이언트-미들웨어-서버 순) 실행하는 작업을 담당한다. 예를 들면 사용자 인증이나 폼 내용 검증 등의 작업 같은 것들
라우팅 처리	지금까지 특정 URL로 들어오는 요청을 미리 만들어 둔 함수(라우트 핸들러라 한다. app.get , app.post 같은 함수) 등으로 연결했다. 이러한 라우터 코드를 읽고 관리하기 쉽게 모듈화 하는 라우터 미들웨어도 있다.
응답 처리	서버에서 클라이언트로 응답을 보낼 때(서버-미들웨어-클라이언트 순), 자료를 적절한 형태로 변환하거나 오류를 처리하는 작업을 담당한다.

 

 

라우터 미들웨어

라우터 객체를 통해 라우터 코드를 읽기 쉽고 관리하게 쉽게 만들어주는 미들웨어

 

1.router 객체 만들기

const router = express.Router();

 

2. router 객체를 사용해 라우트 코드 작성

//목록조회, 데이터 저장
router.route("/contacts")
  .get( (req, res)=> { ... } )
  .post( (req, res)=> { ... } );

//1건 조회, 데이터 수정, 데이터 삭제
router.route("/contacts/:id")
  .get( (req, res)=> { ... } )
  .put( (req, res)=> { ... } )
  .delete( (req, res)=> { ... } );

 

3. app.js에서 router 객체를 미들웨어로 등록

app.use(router);

 

 

Router 객체 사용 전 후 비교

기존 라우터 처리 방식과, Router 객체를 사용한 방식을 비교해보자.

/contacts 경로로 들어오는 요청으로 get과 post가 있고, 그에 따른 코드이다.

const express = require('express');
const app = express();
const router = express.Router(); //Router 객체의 인스턴스 router 생성

/*
//연락처 목록 조회
app.get("/contacts", (req, res)=>{
    res.send("contacts 목록 조회");
})
//연락처 신규저장 
app.post("/contacts", (req, res)=>{
    res.send("contacts 데이터 create");
})
*/

router.route("/contacts")
    .get((req,res)=>{res.send("contacts 목록 조회");})
    .post((req,res)=>{res.send("contacts 데이터 create")});

 

기존 방식의 경우, app.get 과 app.post 로 각각 작성해주어야 하지만,

Router 객체를 사용할 경우, router.route("/contacts") 로 일단 경로 지정을 하고,

그 아래에 get()과 post()를 연달아 작성하여 동일한 경로에 대하여 get과 post를 달아서 읽기 쉽게 해준다.

 

* router.route(경로).get().post() ... 이런식으로 연달아 작성된 형태를 "체이닝"이라 한다.

 

 

Router 객체 사용하여 전체 코드 수정

const express = require('express');
const app = express();
const router = express.Router(); //Router 객체의 인스턴스 router 생성

//메인 화면
app.get("/", (req, res)=>{
    res.send("Hello Node!");
})

//목록조회, 데이터 저장
router.route("/contacts")
    .get((req,res)=>{res.send("contacts 목록 조회");})
    .post((req,res)=>{res.send("contacts 데이터 create")});

//(특정 id) 조회, 수정 삭제
router.route("/contacts/:id")
    .get((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 조회`);
    })
    .put((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 수정`);
    })
    .delete((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 삭제`);
    })

app.use(router);		//router 객체를 미들웨어로 등록
app.listen(3000, () =>{
    console.log("서버 실행중");
})

/contacts/:id 경로에 해당하는 get, put, delete 함수도 Router 객체를 이용한 방식으로 마저 작성해주었다.

하단에 app.use(router); 작성하여 router 객체를 미들웨어를 등록하였다. (이거 꼭 해줘야 함)

 

이전 코드와 비교하면 훨씬 보기 편하고 간단해졌다. (이전 코드: https://dev-traveler.tistory.com/61 참고)

 

위에 작성한 코드를 썬더 클라이언트로 테스트 해보았다. 

오류없이 전부 잘 작동한다.

 

 

라우트 파일 작성하기

맨 처음 npm init하여 프로젝트를 시작하였을 때, entry point에  app.js 라고 작성했었다.

package.json 파일을 열어보면, main에 app.js 라고 기록되어 있는데, 

app.js 파일이 애플리케이션 전체를 시작시키는 시작파일임을 알려주고 있다.

 

 

현재 이 파일(app.js)에는 라우팅 관련 정보만 작성되어 있지만,

프로젝트를 진행하다보면 애플리케이션과 관련된 여러 정보들이 추가적으로 작성될 것이다.

 

라우팅 정보를 냅다 app.js에 박아 적는 것은 바람직하지 않다.

나중에 애플리케이션 크기가 커지면서 수많은 라우팅 정보가 app.js에 산재되어 있으면 프로젝트의 구조 파악이 어려워질 수 있기 때문이다.

 

라우팅 관련 정보를 별도의 파일로 따로 저장해두고,

모듈 형태로 가져다가 app.js에 붙여서 사용하면 더 좋을 것 같다.

 

 

myContacts 프로젝트 폴더 아래에 routes 폴더 생성 후, contactRoutes.js 파일 생성하고 아래와 같이 작성하였다.

 

 

contactRoutes.js

const express = require('express');
const router = express.Router();

//목록조회, 데이터 저장
router.route("/contacts")
    .get((req,res)=>{res.send("contacts 목록 조회");})
    .post((req,res)=>{res.send("contacts 데이터 create")});

//(특정 id) 조회, 수정 삭제
router.route("/contacts/:id")
    .get((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 조회`);
    })
    .put((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 수정`);
    })
    .delete((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 삭제`);
    });

module.exports = router;

app.js에서 router를 사용한 코드 부분을 그대로 붙여 넣었고,

module.exports = router; 선언을 하여 모듈로 생성해 주었다.

 

 

그리고 app.js도 아래와 같이 수정하여 작성하였다.

app.js

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

//메인 화면
app.get("/", (req, res)=>{
    res.send("Hello Node!");
})

//미들웨어 등록
app.use("/", require("./routes/contactRoutes"));

app.listen(3000, () =>{
    console.log("서버 실행중");
})

위와 같이 간단하게 작성되었다.

라우팅은 라우팅 파일로 관리하게 함으로써, 앱을 전체적으로 살펴보기 훨씬 편리해졌다.

 

 

공통되는 최상위 경로 따로 빼기

contactRoutes.js 파일에서 route 함수의 파라미터(경로값)는  /contacts 혹은 /contacts/:id 이다.

/contacts 라는 경로가 중복되고 있다. 

 

app.js 의 미들웨어 등록 하는 부분을 아래와 같이 수정한다.

//미들웨어 등록
app.use("/contacts", require("./routes/contactRoutes"));

 

 

contactRoutes.js 의 route 파라미터의 최상위 경로를 / 로 변경한다.

const express = require('express');
const router = express.Router();

//목록조회, 데이터 저장
router.route("/")
    .get((req,res)=>{res.send("contacts 목록 조회");})
    .post((req,res)=>{res.send("contacts 데이터 create")});

//(특정 id) 조회, 수정 삭제
router.route("/:id")
    .get((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 조회`);
    })
    .put((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 수정`);
    })
    .delete((req, res)=>{
        res.send(`특정 id ${req.params.id}의 연락처 삭제`);
    });

module.exports = router;

 

최상위 경로인 /contacts가 /telList 라는 이름으로 바뀌어야 한다고 할 때,

라우팅 관련 파일 contactRoutes.js 은 일일이 수정하지 않아도 되고,

app.js에서 미들웨어 등록하는 부분만 수정하면 되니 관리가 편해진다.

 

 

https://youtu.be/2Gi8mNBKVPo?feature=shared