리퀘스트: POST 리퀘스트 보내는 방법

fetch 함수는 기본적으로 GET 리퀘스트를 보냈는데 POST나 다른 종류의 리퀘스트는 어떻게 보낼 수 있을까?

fetch 함수의 두번째 아규먼트로 다양한 옵션을 넘겨줄 수 있다. POST 리퀘스트를 보내려면 옵션의 method 프로퍼티를 POST로 설정하면 된다.

//main.js
fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST' //POST가 아니라도 PATCH나 DELETE로 설정도 가능하다.
});

• GET : 리소스 조회 (최근에는 Representation이라는 이름을 많이 사용)
• POST : 요청 데이터 처리, 주로 등록에 사용된다.
• PUT : 리소스를 대체, 해당 리소스가 없으면 생성한다.
• PATCH : 리소스 부분 변경
• DELETE : 리소스 삭제

POST 리퀘스트는 보통 바디를 같이 전달하는데, color-survey API의 경우 MBTI, 좋아하는 색깔의 헥스코드, 그리고 설문에 대한 비밀번호를 바디로 전달해야한다.

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000' //여기서 비밀번호는 설문객체를 생성한 사람만이 나중에 수정/삭제를 할 수 있게 하는 용도
};

fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: surveyData //리퀘스트 바디도 옵션으로 설정 가능, body라는 프로퍼티로 설정
});

중요한 점! surveyData는 자바스크립트 객체이고, 외부로 데이터를 주고 받을 때는 JSON 문자열을 사용한다. 그래서 surveyData를 JSON 문자열로 변환해주어야 한다. 

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000'
};

fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: JSON.stringify(surveyData) //JSON 문자열로 변환
});

JSON.stringify 메소드를 사용하면 자바스크립트 객체를 JSON 문자열로 변환 할 수 있다. 

마지막으로 데이터를 보낼 때는 Content-Type 헤더로 어떤 형식의 데이터를 보내는지 알려주는 것이 좋은데 headers 프로퍼티로 헤더까지 설정해주자.

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000'
};

fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: JSON.stringify(surveyData),
  headers: {
    'Content-Type': 'application/json', //필요하다면 다른 헤더들도 아래 추가할 수 있다.
  },
});

이제 POST 리퀘스트를 보낼 준비는 끝났다. 리스폰스를 처리하는 코드만 작성해주면 되는데 GET 리퀘스트와 완전 동일하다.

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000'
};

const res = await fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: JSON.stringify(surveyData),
  headers: {
    'Content-Type': 'application/json'
  }
});

const data = await res.json();
console.log(data);

POST 리퀘스트로 데이터를 생성하면 서버가 생성된 데이터를 리스폰스로 돌려주는 경우가 많은데 const data = await res.json(); 의 json 메소드로 리스폰스를 파싱해서 출력한다. 

결과창

코드를 실행해 보면 새로 생성된 설문 객체가 잘 돌아온다. 

실제 웹 개발을 하는 상황이라고 생각해 보면 사용자가 폼에 mbti, 좋아하는 색상 정보를 입력하면 그 값으로 surveyData 같은 객체를 만들고 그걸 POST 리퀘스트의 바디에 전달해서 설문 결과를 생성하는 것이다. 그리고 생성된 결과가 리스폰스로 돌아오면 그걸 화면에 보여주거나 할 수 있다.