1. POST request

POST request의 경우, 추가할 정보를 request의 body에 넣어줘야 한다.

우선, 아래 코드를 한 번 살펴보자.

const newMember = {
  name: 'Jerry',
  email: 'jerry@codeitmall.kr',
  department: 'engineering'
};

fetch('https://learn.codeit.kr/api/members', {
  method: 'POST',
  body: JSON.stringify(newMember)
})
  .then((response) => response.text())
  .then((result) => {console.log(result);})

위 코드에서 이 부분은, 보낸 request에 관한 설정을 적는 객체이며, 이를 옵션 객체라고 한다.

  method: 'POST',
  body: JSON.stringify(newMember)

fetch 함수는 옵션 객체를 따로 설정해주지 않으면, 기본적으로 GET request를 보내도록 되어 있다.

즉, GET이 아닌 다른 method 값을 가진 request를 보내고자 한다면, 옵션 객체가 필요하다는 뜻이다.

앞에서, POST request의 경우, 추가할 정보를 request의 body에 넣어줘야 한다고 했는데, 이 코드가 그 역할을 해주고 있는 것이다.

  body: JSON.stringify(newMember)

그런데 잘보면, 새로운 객체인 newMember를 그냥 넣어준 게 아니라, JSON 객체의 stringify method의 argument로 새로운 객체를 넣은 것을 확인할 수 있다.

이전 글에서 parse method에 대해 언급했던 적이 있는데, stringify method는 이와 정반대의 기능을 한다.

parse method는 문자열 타입의 JSON 데이터를 자바스크립트 객체로 변환해줬지만,

stringify method는 자바스크립트 객체를 문자열 타입의 JSON 데이터로 변환하는 역할을 한다.

JSON 데이터는 기본적으로 문자열 형태이기 때문에, stringify method가 필요한 것이다.

코드를 실행해보면, 아래와 같이 새로운 정보가 추가된 것을 확인할 수 있다.

여기서 잘 보면, 따로 추가해준 적이 없는 id라는 프로퍼티가 보인다.

이는 서버가 새로운 정보를 추가할 때, id 값으로 7을 설정하여 추가했다는 의미이다.

일반적으로, 서버의 데이터베이스에서 어떤 데이터를 고유하게 식별하기 위해 사용하는 값을 이런 방식으로 설정해주는 경우가 많다.

POST request를 보냈을 때, 어떤 response가 오는 지에 대해서는 서버마다 차이가 있다.

위의 결과 예시처럼, 실제로 추가된 데이터의 모습을 보여주는 서버도 있지만, 그냥 잘 추가되었다는 문자열 하나만 출력해주는 서버도 존재한다.

2. PUT request

const member = {
  name: 'Alice',
  email: 'Alice@codeitmall.kr',
  department: 'marketing'
};

fetch('https://learn.codeit.kr/api/members/2', {
  method: 'PUT',
  body: JSON.stringify(member)
})
  .then((response) => response.text())
  .then((result) => {console.log(result);})

우선, PUT request의 경우, 특정 정보를 수정하는 것이기 때문에, id 값을 알아야 하며,

이 id 값은 fetch 함수 내 url 뒤에 붙여주면 된다.

fetch('https://learn.codeit.kr/api/members/2', {

자바스크립트 객체의 데이터를 body에 담아서 외부로 전송하려면 반드시 stringify method를 사용해서 문자열 타입으로 변환해야 한다는 것을 기억하자.

3. DELETE request

DELETE request의 경우, POST나 PUT request와 달리, body 프로퍼티가 필요하지 않다.

fetch('https://learn.codeit.kr/api/members/2', {
  method: 'DELETE',
})
  .then((response) => response.text())
  .then((result) => {console.log(result);})