3. 라우터를 사용하여, 미들웨어를 설정하기

라우터는 express 의 핵심 기능중 하나이다.

라우터를 사용하여 클라이언트에서 요청하는 특정 URL 을 바탕으로,

"필요한 미들웨어를 아웃소싱하고 하나로 뭉쳐"

기능적으로 유사한 미들웨어들을 하나로 모아 관리할 수 있게 해준다.

 

0. 라우터의 기본 사용

< routes / diaryt-routes.js >

    const express = require("express")

    const route = express.Router()		// Router() 를 사용하여, route 를 만들어서

    route.get("/", (req,res,next)=>{		// app 과 같은 기능을 하는 route 를 사용한다.
        console.log("diary")
        res.json({message : "this is diary"})
    })
    
    module.exports = router;			// 바깥에서 사용하기 위해, export 한다.
    
< index.js >

    const express = require("express");
    const cors = require("cors");
    const bodyparser = require("body-parser");

    const diaryRouter = require("./routes/diaryt-routes");  // 불러와서

    const app = express();

    app.use(cors());
    app.use(bodyParser.json());
    app.use(diaryRouter);   // 미들웨어에 등록


    app.listen(5000);

 

 

1. 특정 경로에만 요청을 응답하는 미들웨어

 

위처럼 

    const diaryRoutes = require("./routes/diary-routes.js")
        ...
    app.use(diaryRouter);

설정하게되면, 모든 요청에 대해 diaryRoutes 미들웨어를 실행한다.

 

특정 경로로 들어오는 요청에 대해 미들웨어를 실행시키기 위해, 경로를 첫번째 인자에 넣어준다.

  const diaryRouter = require("./routes/diaryt-routes"); 
      ...
  app.use("/api/diary", diaryRouter);		// 특정 경로 지정

 

2. 그렇다면 경로는 어떻게 될까?

 

    < index.js > 에서 정의한 주소가 가장 먼저 들어가고
    < router / diary.js >   에서 정의한 주소는 그 이후 들어간다.

    ------------

        < index.js > 에서 
            app.use("/api/diary", diaryRouter);

        < router / diary.js >  에서
            router.get("/", (req,res,next) =>{

            })

    라고 정의했다면
    "http://localhost:5000/api/diary" 에  접속했을때, GET 요청을 하게되지만

    ------------

        < index.js > 에서 
            app.use("/api/diary", diaryRouter);

        < router / diary.js >  에서
            router.get("/ms", (req,res,next) =>{

            })

    라고 정의했다면
    "http://localhost:5000/api/diary/ms"    에 접속했을때, GET 요청을 하게된다.

 

 

3. 동적 새그먼트로 동적 라우트 만들기

 

     생성   /:<동적새그먼트>

      사용  req.params.<동적새그먼트>

 

    "next.js"            의 동적 API 를 "req.query" 로 가져오는 것처럼
    "react-router-dom "   에서 동적 페이지( /:id ) 를 "useParams" 로 가져오는 것처럼
    "express 에서도  "    동적 API 주소를 가져올 수 있다.

    < router / diary.js >
        const express = require("express");

        const router = express.Router();

        router.get("/:userEmail", (req, res, next) => {
            const userEmail = req.params.userEmail;     // params 로 가져온다.
            console.log(userEmail);
            res.json({ message: "this is diary" });
        });

        module.exports = router;

    => "http://localhost:5000/api/diary/ms@ms.com" 에 접속한다면
    { message: "this is diary" } 가 브라우저에,
    ms@ms.com 이 콘솔창에 적히는 것을 볼 수 있다.

 

 

4. req.body 로 정보를 담을까, 동적 API 라우트로 정보를 담을까?

 

서버에 값을 요청할때, body 에 data 를 담아, 서버에서 걸러내가니 받는 방법과

동적 API 라우트에, 동적 값을 할당해, req.params 로 해당 값을 통해 걸러내거나 받는 방법이 있다.

어떤것을 언제 사용하면 좋을까?

 

일반적으로, "ID 와 같이, 구분이 되도록 하는 요소"들은, "동적 새그먼트"를 사용하여

	"req.params" 를 이용해 해당 값을 가져온다.

"실질적인 데이터 부분"은 클라이언트에서 요청하여 "req.body" 에 넣는 것이 일반적이다.

1) GET 요청에서 "유저의 ID" 를 사용하여 값을 가져온다면 

    "/api/diary/:id" 에 GET 요청을 하여
    "req.params" 를 이용해 해당 값을 가져온후,
    서버에서 해당 유저의 id 값을 받아 데이터를 가져온다던가

2) DELETE 요청에서 "해당 아이템의 id" 에 해당하는 값을 받고, 데이터를 지울때에도

    /api/diary/:itemId 에 "DELETE" 요청을 하는것이 적합하겠다.

3) POST 요청에서 값을 보낸다면, "유저의 ID" 를 사용하여 동적 새그먼트를 작성해

    /api/diary/:id 에 "POST" 요청을 담고
    클라이언트측에서 body 에 값을 넣어 적절한 body data 로 "POST" 요청을 하는 것이 적절하다.
    

특히나 GET 요청에 경우, body 값을 담는 것이 불가능한데, (라이브러리를 통해 할 수는 있지만)
필터할 값을 클라이언트로부터 받지 못한다면, 서버는 적절한 데이터를 클라이언트로 보낼 수 없다.

따라서, 값을 특정할 수 있는 값은, 동적 API 라우트에 값을 입력해 보내는 것이 적절한 것일 것이다.

 

 

5. 여러개의 동적 새그먼트를 사용할때, 코드의 위치에 주의하자

동적 새그먼트가 많아진다면, 

    /:id
    /user/:id

가 동시에 존재할때, 

==>> "/user" 에 접속하면, "user는 id취급"을 받을것이다.

--------------------

반대로 뒤집힌다면

    /user/:id
    /:id


==>> "/user/" 에 접속하면, "user는 값이 없는 동적 새그먼트 취급"을 받을것이다.