param vs query vs body + API

hyeonyohwan·2021년 7월 21일
0

공통

  • Request(요청) 객체는 API를 컨트롤하기 위한 메소드로 param, query, body 3가지를 갖고 있다.

  • API(Application Programming Interface)란 프로그램들이 서로 상호작용하는 것을 도와주는 매개체로 서버와 데이터베이스에 대한 출입구 역할을 한다. (어떤 응용프로그램에서 데이터를 주고 받기 위한 방법이라고 볼 수 있다)

param

// @route    GET api/posts/:id
// @desc     'get' 메소드를 써서 파라미터 프로퍼티인 id값에 맞는 포스트를 가져오는 요청

router.get("/:id", auth, async (req, res) => { // 'id'라는 프로퍼티
  try {
    const post = await Post.findById(req.params.id);
    res.json(post);
  } catch (err) {
    res.status(500).send("Server Error");
  }
});

query

  • 주소 바깥, ? 이후의 변수를 담는다.(경로의 각 쿼리 문자열 매개변수에 대한 속성이 포함된다)
  • https://naver.com/search?searchWord=구글검색 라는 주소가 있으면 searchWord 매개변수의 구글검색이라는 값을 가져온다.
// GET /search?q=tobi+ferret
console.dir(req.query.q)
// '/search'라는 라우트 경로에서 query.q에 해당하는 값은 'tobi ferret'
// => 'tobi ferret'

// GET /shoes?order=desc&shoe[color]=blue&shoe[type]=converse
console.dir(req.query.order)
// '/shoes'라는 라우트 경로에서 query.order에 해당하는 값은 'desc'
// => 'desc'

console.dir(req.query.shoe.color)
// '/shoes'라는 라우트 경로에서 query.shoe.color에 해당하는 값은 'blue'
// => 'blue'

console.dir(req.query.shoe.type)
// '/shoes'라는 라우트 경로에서 query.shoe.type에 해당하는 값은 'converse'
// => 'converse'

body

  • JSON 등의 데이터를 담을 때 사용한다.(주로 POST로 유저의 정보 또는 파일 업로드를 보냈을 때)
  • 요청 본문에 제출된 키-값 데이터 쌍을 포함한다. 기본적으로 정의되어 있지 않아 express.json(), express.urlencoded() 등의 미들웨어를 사용해야 한다.
  • 정리하자면 body-parser를 사용하기 전에는 default값으로 undefined 설정되어 있다.
// POST https://swamp.com/login
//
//      {
//        "email": "sam@gmail.com",
//        "password": "chompz4lyfe"
//      }

app.post('/login', (req, res) => { 
  // '/login'인 라우터 경로에 post 메소드를 써서 요청, 응답
  console.log(req.body.email) // "sam@gmail.com"
  console.log(req.body.password) // "chompz4lyfe"
})

출처 - https://velog.io/@aaronddy/Express-req.params-vs.-req.body // https://studyingych.tistory.com/34 // https://dar0m.tistory.com/222 // http://blog.wishket.com/api%EB%9E%80-%EC%89%BD%EA%B2%8C-%EC%84%A4%EB%AA%85-%EA%B7%B8%EB%A6%B0%ED%81%B4%EB%9D%BC%EC%9D%B4%EC%96%B8%ED%8A%B8/

profile
웹 프론트엔드 개발자입니다.

0개의 댓글