제로하우스

[Web] req.body와 req.params와 req.query의 차이 (cf. JavaScript, Axios, Express.js) 본문

Web

[Web] req.body와 req.params와 req.query의 차이 (cf. JavaScript, Axios, Express.js)

송제로투 2022. 8. 23. 14:13

Request 객체에서 데이터 받아오기

JavaScript, Axios, Express.js를 사용하는 경우를 예시로 살펴본다.

 

💡 req.body

JSON과 같은 데이터를 받을 때 사용한다.

// axios로 요청보내기
await axios.({
  url: "http://localhost:8080",
  method: "POST",
  data: {
    title: "hello",
    content: "hello world",
  }
})

서버에서 받을 때는 아래와 같이 설정해주어야 한다. (express 4.16.0 버전 이상)

const express = require("express")

app.use(express.json());
app.use(express.urlencoded({ extended: true }))

위와 같이 설정 후 req.body로 값을 받을 수 있다.

exports.createPost = async (req, res, next) => {
  console.log(req.body); // { title: "hello", content: "hello world" }
  // ...
};

 

💡 req.params

예를 들어 http://localhost:8080/post/1?name=kim이라는 url이 있고, 서버 라우터가 다음과 같을 때

router.get("/:id", function)

req.params의 값은 {id: 1}이다.

exports.getPostDetail = async (req, res, next) => {
  console.log(req.params); // { id: 1 }
  // ...
};

 

💡 req.query

위와 동일하게 http://localhost:8080/post/1?name=kim이라는 url이 있고, 서버 라우터가 다음과 같을 때

router.get("/:id", function)

req.quey의 값은 {name: "kim"}이다.

exports.getPostDetail = async (req, res, next) => {
  console.log(req.query); // { name: "kim" }
  // ...
};

'Web' 카테고리의 다른 글

[HTTP] HTTP 요청 메소드  (0) 2022.09.14
PWA(Progressive Web App)란?  (0) 2022.09.13
ngrok  (0) 2022.06.08
[Web] Preflight Request란?  (0) 2022.05.27
[TIL][Web] 14 HTTP 상태 코드 정리  (0) 2022.05.20
Comments