express - req.params, req.query

게시판의 첫 페이지에서 여러 게시물들을 10개씩 보여주는 코드를 작성하는 과정에서 req.params, req.query, req.body가 헷갈려서 정리해보려고 한다.

대부분의 커뮤니티는 게시물을 특정 개수만큼 보여주고 다음 페이지로 이동했을때 더 많은 게시물들을 보여주고 있다. 인스타그램이나 페이스북처럼 무한스크롤(infinity scroll)을 쓰지 않는다면 보통 이런 형태로 게시물을 보여주는 것 같다.

그래서 구현하려고 하는 내용은 다음과 같다.

• 클라이언트에서 lists/:page로 서버에 get 요청을 보내면 서버에서는 req.params를 활용해 데이터베이스에서 10개씩 데이터를 전달한다.
• 이때, 클라이언트는req.query로 게시물 채택여부와 카테고리를 서버에 params와 함께 보내면 서버에서는 게시물을 필터링한 결과를 전달한다.
• 단, 필터링을 하지 않는다면 10개씩 데이터를 전달한다.

클라이언트에서 axios를 쓴다면 다음과 같이 요청을 보낼 것이다.

axios({
  method:"get",
  url: "www.example.com/board/lists/1", //page가 1인 경우
  params: {category: "연애", isSolved: 0}
})
//전송되는 url은 "www.example.com/board/lists/1?category=연애&isSolved=0"이 될 것이다.

따라서 서버에서는 다음과 같이 요청 정보를 읽을 수 있다.

let {page} = req.params;
const {category, isSolved} = req.query;

체크해야할 내용 2가지!

• 첫째로, 클라이언트에서의 params와 서버에서의 params가 다르다는 점이다.
  axios 요청에서 params로는 category와 isSolved가 객체에 저장되어 있지만, 서버에서는 req.query로 불러온다.

• 둘째로, 라우터에서 params를 설정해줘야한다는 것이다!
  router.get("/lists",lists)을 router.get("/lists/:page",lists)으로 수정해주어야한다.