1. 다이나믹 라우팅 세팅하기
Express에서 다양한 경로의 데이터를 주고 받기 위해서는 다이나믹 새그먼트라는 방식을 이용할 수 있다.
다이나믹 라우팅을 하는 이유는 라우팅을 유동적으로 하여 다양한 데이터, 예를 들어 id가 u1인 유저의 데이터를 보여줄 때 수만명의 아이디를 위해서 /user/u1, /user/u2 처럼 다 일일이 만드는 것 보다는 /user/아이디들 처럼 만들어서 뒤에 라우터 패스만 변경해서 처리하면 편하기 때문에 사용한다.
이는 리액트의 라우터에서 동적 라우팅을 하기 위해서 /user/:뭐시기라고 했던 것과 유사한 방식이다.
우선 더미 파일을 세팅해주면
const DUMMY_DATA = [
{
id: "p1",
title : "더미입니다.",
creator : "u1"
}
]형식의 데이터가 있다고 가정해본다.
2. app.js 라우터 패스 변경
app.js에서 내가 사용하고자 하는 라우터 주소를 설정해준다.
const placesRoutes = require("./routes/places-routes");
// 기존
app.use(placesRoutes)
// 변경
app.use("/api/places", placesRoutes)위의 코드 처럼 변경하면 placesRoutes에 등록된 라우터들은 /api/places의 주소로만 사용하도록 변경된다.
즉 /api/places 로만 사용해도 되고 /api/places/'''뒤에 붙혀서 사용해도 된다.
3. places-routes.js 변경
이제 /api/places 뒤에 다양한 아이디가 들어오게끔 만들어서 라우팅을 해볼 것이다.
예를 들어 /api/places/u1, /api/places/u2...
places-routes.js
const express = require("express");
const router = express.Router();
router.get("/:pid",(req,res,next) => {
const placeId = req.params.pid
const place = DUMMY_DATA.find((p) => {
return p.id === placeId
})
res.json{{place}}
})처럼 만들어 주면 된다.
여기서 /:pid는 라우터 주소 뒤에 localhost:5000/api/places/p1에서 가장 마지막에 동적 새그먼트인 p1(이는 p2로 요청하면 변경이 됨)이 되며
console.log(req.params)를 실행했을 경우 {pid: "p1"}을 가지게 된다.
즉 요청으로 동적 새그먼트인 :pid를 키로 하며 내가 요청한 값인 p1을 값으로 가지는 객체가 생성된다.
이 객체와 더미데이터의 id와 동일한 데이터만 리턴하고
응답값(res)로 place라는 키를 만들어 보내주게 된다.
3. 라우팅 순서 문제
만약에 위의 코드 뒤에 /user/:uid라는 라우터 path를 가진 라우팅을 하나 만들었을 때 localhost:5000/api/places/user라는 값을 보내면 에러가 나올까?
정답은 빈객체만 나오게 된다.
이유는 places 뒤에 동적 새그먼트가 붙어있기 때문에 /user라는 것도 /:pid라고 인식하기 때문이다.
이를 방지하기 위해서는 순서를 조정해 줄 필요가 있으며 /user/:uid의 라우터를 위로 올려주면 된다.
