[Express.js] Route Parameter (동적 Routing ,동적 params)

Route Parameter

일단 아래 코드에서 라우팅 경로를 보자.

app.get('/category/html', (req, res) => {

res.send(`hello html~~~~~`)

})

app.get('/category/css', (req, res) => {

res.send(`hello css~~~~~`)

})

app.get('/category/javascript', (req, res) => {

res.send(`hello javascript~~~~~`)

})

app.get('/category/nodejs', (req, res) => {

res.send(`hello nodejs~~~~~`)

})

....

'/category/html' 

'/category/css' 

'/category/javascript'

'/category/nodejs'

...

공통적인 라우팅 경로로 /category 로 작성되어있고 뒤에 카테고리별 각각의 경로가 추가적으로 작성되어있다.

만약에 category 목록이 100개라면 100개에 대한 경로를 위에서 처럼 하드 코딩으로 100개나 적어줘야한다.

이러한 하드 코딩을 없애고 카테고리 목록에 따른 라우팅 주소를 동적으로 받을 수 있게 해주는 방법이 Route Parameter 이다.

위에서 하드코딩된 라우터를 Route Paramter를 통해 변경해 보자.

Route Parameter는 아래 코드에서처럼 :categoryId 와 같이 작성해 주면 된다. 원하는 명칭을 : 기호와 함께 작성한다.

app.get('/category/:categoryId', async (req, res) => {

//Book 이라는 db에서 해당 카테고리를 찾는 코드

const content = await Book.findOne({

where: { id: req.params.categoryId },

});

// ...

//응답으로 해당 카테고리에 대해 찾은 내용을 응답으로 보내준다.

return res.send(content);

});

위에서처럼 라우터를 작성하게되면 주소에 http://localhost:3000/category/html 를 작성하게되면 서버에서 req.params.categoryId 로 카테고리 html 를 받을 수 있다.

그러면 이렇게 받은 html 카테고리를 Book 이라는 DB에서 검색해서 해당 카테고리에 대한 내용을 찾아 클라이언트로 응답을 보내줄 수 있다.

이렇게 작성하게되면 이전처럼 여러개의 라우터를 작성하지 않고도 하나의 라우터에서 카테고리를 동적으로 받아와서 처리할 수 있게 된다. 

// http://localhost:3000/category/css

// http://localhost:3000/category/javascript

// http://localhost:3000/category/nodejs

app.get('/category/:categoryId', (req, res) => {

res.send(req.params);

// 카테고리별 응답 객체

// {categoryId: css}

// {categoryId: javascript}

// {categoryId: nodejs}

});

해당 라우터로 전달된 동적 params 값은 req.params.categoryId로 css, javascript, nodejs를 받을 수 있다.

* Route Parameter를 사용하면서 주의할 점이 있다. 라우팅 주소를 동적으로 받는다 할지라도  같은 라우터에서 처리하지 않고 다른 라우터를 만들어서 처리하고 싶은 경우가 있을 수 있다.

예를들어 /category/html 라우터를 따로 만들게 된다면 Route parameter가 작성된 코드 위에 작성해주어야지만 따로 처리가 가능하다.

코드는 위에서 아래로, 왼쪽에서 오른쪽으로 순서대로 읽혀지는 특성이 있다.

그런데 이때 Route parameter 아래에 /category/html 경로에 대한 코드를 작성하면 /category 로 들어온 요청을 Route parameter에서 요청을 잡아가 모두 처리해 버리기 때문에 해당 경로에서 처리하지 못할 수 있다.

그러므로 범위가 넓은 포괄적인 코드를 아래쪽에 작성해야한다.