(4) Sending a request with JavaScript - [fetch] POST Request

▶ 다음과 같은 openAPI를 사용합니다.

 

실습용 서버 호스트입니다.

learn.codeit.kr

설문 응답

사용자가 제출한 MBTI와 선호 색상 데이터를 저장합니다.

엔드포인트

  POST /api/color-surveys
   GET /api/color-surveys
   GET /api/color-surveys/:id
DELETE /api/color-surveys/:id
 PATCH /api/color-surveys/:id

설문 응답 객체

속성

id: integer 설문 응답 객체에 대한 고유 식별자

mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 설문 응답에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 설문을 삭제, 또는 수정할 때 사용합니다. 읽기 전용 속성이기 때문에 한 번 값이 정해지면 바꿀 수 없습니다.

createdAt: integer 객체가 생성된 시점에 대한 UNIX 타임스탬프

updatedAt: integer 객체가 수정된 시점에 대한 UNIX 타임스탬프

설문 응답 객체 예시

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "password": "0123",
  "createdAt": 1667969077,
  "updatedAt": 1667969077
}

설문 응답 생성

엔드포인트

POST /api/color-surveys

파라미터로 넘겨준 값들을 사용해서 새로운 설문 응답 객체를 생성합니다.

바디 파라미터

mbti: string 필수 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 필수 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 필수 설문에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 설문 응답을 삭제, 또는 수정할 때 사용합니다. 읽기 전용 속성이기 때문에 한 번 값이 정해지면 바꿀 수 없습니다.

리턴 내용

생성에 성공할 시, 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

POST <https://learn.codeit.kr/api/color-surveys>
Content-Type: application/json

{
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "password": "1234"
}

리스폰스 예시

상태 코드: 201

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667969077
}

여러 설문 응답 조회

엔드포인트

GET /api/color-surveys

설문 응답 객체 전체 목록을 최신 순서로 리턴합니다.

쿼리 스트링 파라미터

mbti: string 제출자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다. 쿼리 스트링 파라미터로 보내면 해당 MBTI에 대한 설문 응답들만 모아서 확인할 수 있습니다.

limit: integer 리턴받기 원하는 설문 응답 객체 수: 값을 전달하지 않으면 10개의 객체가 리턴됩니다. 10~100 사이 정수만 허용됩니다.

offset: integer 가장 앞 객체부터 건너뛰고 싶은 객체 수: 값을 전달하지 않으면 건너뛰지 않습니다.

리턴 내용

유효한 mbti, limit을 제공했을 시, 설문 응답 객체 목록이 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

count: integer 서버에 저장된 총 설문 응답 객체 수

next: string 페이지네이션에서 다음 페이지에 해당하는 주소

previous: string 페이지네이션에서 이전 페이지에 해당하는 주소

results: array of objects 리턴된 설문 응답 객체 목록

리퀘스트 예시

GET <https://learn.codeit.kr/api/color-surveys?offset=10&limit=10&mbti=ISTJ>

리스폰스 예시

상태 코드: 200

{
  "count": 42,
  "next": "<https://learn.codeit.kr/api/color-surveys/?offset=20&limit=10&mbti=ISTJ>",
  "previous": null,
  "results": [
    {
      "colorCode": "#CA6952",
      "createdAt": 1668752533000,
      "updatedAt": 1668752533000,
      "id": 42,
      "mbti": "ISTJ"
    },
    {
      "colorCode": "#CA6952",
      "createdAt": 1668752162000,
      "updatedAt": 1668752162000,
      "id": 41,
      "mbti": "ISTJ"
    },
    {
      "colorCode": "#33A560",
      "createdAt": 1668331218000,
      "updatedAt": 1668331218000,
      "id": 40,
      "mbti": "ISTJ"
    },
    ...
  ]
}

설문 응답 조회

엔드포인트

GET /api/color-surveys/:id

URL 파라미터 :id에 해당하는 설문 응답 객체를 조회합니다.

파라미터

없음

리턴 내용

유효한 고유 식별자를 제공했을 시 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

GET <https://learn.codeit.kr/api/color-surveys/14>

리스폰스 예시

상태 코드: 200

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

설문 응답 삭제

엔드포인트

DELETE /api/color-surveys/:id

URL 파라미터 :id에 해당하는 설문 응답 객체를 삭제합니다.

바디 파라미터

password: string 필수 설문 응답에 대한 비밀번호: 고유 식별자로 특정짓는 설문의 비밀번호와 일치해야 삭제할 수 있습니다.

리턴 내용

유효한 고유 식별자와 비밀번호를 제공했을 시, 삭제된 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

DELETE <https://learn.codeit.kr/api/color-surveys/14>
Content-Type: application/json

{
  "password": "0123"
}

리스폰스 예시

상태 코드: 204

{
  "id": 14,
  "mbti": "ENFP",
  "colorCode": "#CA6952",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

설문 수정

엔드포인트

PATCH /api/color-surveys/:id

파라미터로 넘겨준 값들을 사용해서 URL 파라미터 :id에 해당하는 설문 응답 객체를 수정합니다. 제공되지 않은 선택 필드는 수정되지 않습니다.

바디 파라미터

mbti: string 응답자의 MBTI: 16개의 MBTI만 허용하고 대소문자는 구별하지 않습니다.

colorCode: string 응답자의 선호 색상 코드: HEX 코드만 허용하고 # 유무와 대소문자를 구별하지 않습니다.

password: string 필수 설문 응답에 대한 비밀번호: 숫자로 4개로 이뤄진 문자열만 허용합니다. 고유 식별자로 특정짓는 설문의 비밀번호와 일치해야 수정할 수 있습니다.

리턴 내용

유효한 고유 식별자와 비밀번호를 제공했을 시, 수정된 설문 응답 객체가 리턴됩니다. 실패 시, 에러 상태 코드와 메세지가 리턴됩니다.

리퀘스트 예시

PATCH <https://learn.codeit.kr/api/color-surveys/14>
Content-Type: application/json

{
  "mbti": "ISTJ",
  "colorCode": "#000000",
  "password": "0123"
}

리스폰스 예시

상태 코드: 200

{
  "id": 14,
  "mbti": "ISTJ",
  "colorCode": "#000000",
  "createdAt": 1667969077,
  "updatedAt": 1667973104
}

▶ package.json 파일

{
  "type":"module"
}

▶ 이전 글 살펴보기

(3) Sending a request with JavaScript - GET Request

https://seop-e.tistory.com/220

(3) Sending a request with JavaScript - GET Request

---

fetch 함수는 기본적으로 GET 리퀘스트를 보낸다고 했을 때,

그렇다면 POST나 다른 종류의 리퀘스트는 어떻게 보낼 수 있는지 확인해보자

 

POST Request - method: 'POST'

fetch 함수의 두 번째 아규먼트로 다양한 옵션을 넘겨줄 수 있는데

POST Request를 보내려면 다음과같이  옵션의 method 프로퍼티를 POST로 설정한다.

// main.js

fetch('https://learn.codeit.kr/api/color-surveys',{
  method: 'POST',
});

꼭 POST가 아니여도 PATCH나 DELETE도 똑같이 설정해 줄 수 있다.

 

---

POST 리퀘스트는 보통 body를 같이 전달하는데

주어진 openAPI color-surveys의 경우 

mbti, 좋아하는 색깔의 HEX코드,

설문에 대한 비밀번호(생성자의 수정,삭제용도)를 body로 전달해야한다.

다음과 같이 코드를 작성해본다.

// main.js

const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000',
}

fetch('https://learn.codeit.kr/api/color-surveys',{
  method: 'POST',
});

리퀘스트 body도 옵션으로 설정하기위해

다음과 같이 body라는 프로퍼티로 설정한다.

// main.js

const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000',
}

fetch('https://learn.codeit.kr/api/color-surveys',{
  method: 'POST',
  body: surveyData,
});

---

여기서 두 가지 중요한 것이 있다.

 

1. serveyData는 자바스크립트 객체이므로

외부로 데이터를 주고받을 때는 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.stringify() 메소드를 사용하여 surveyData 객체를 JSON 문자열로 변환
});

이렇게 JSON.stringify라는 메소드를 사용하면

자바스크립트 객체를 JSON 문자열로 변환할 수 있다.

 

2. 마지막으로 데이터를 보낼 때는

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), // JSON.stringify() 메소드를 사용하여 surveyData 객체를 JSON 문자열로 변환
  headers: {
    'Content-Type': 'application/json', // 서버에게 전달하는 데이터가 JSON 형식임을 알려주는 헤더
  }
});

필요하다면 다른 헤더들도 아래에 추가할 수 있다.

 

---

이제 POST 리퀘스트를 보낼 준비는 끝났는데

마지막으로 리스폰스를 처리하는 코드도 작성해준다.

작성 방식은 GET 리퀘스트와 똑같다.

// main.js

const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000',
}

const res = await fetch('https://learn.codeit.kr/api/color-surveys',{ // fetch() 함수를 사용하여 서버에 POST 요청을 보냄
  method: 'POST', // POST 요청을 보내기 위해 method 속성에 'POST'를 지정
  body: JSON.stringify(surveyData), // JSON.stringify() 메소드를 사용하여 surveyData 객체를 JSON 문자열로 변환
  headers: {
    'Content-Type': 'application/json', // 서버에게 전달하는 데이터가 JSON 형식임을 알려주는 헤더
  }
});

const data = await res.json(); // JSON 형식으로 받은 응답을 자바스크립트 객체로 변환
console.log(data); // 서버로부터 받은 응답 출력

 

POST 리퀘스트로 데이터를 생성하면

서버가 생성된 데이터를 리스폰스로 돌려 주는 경우가 많은데,

JSON 메소드로 리스폰스를 파싱해서 출력한다.

 

최종적으로 코드를 실행해보면 생성된 설문 객체가 잘 들어오는 것을 확인할 수 있다.

---

실제 웹 개발을 하는 상황이라고 생각하면

사용자가 폼에 mbti, 좋아하는 생상 정보를 입력하면

그 값으로 surveyData 같은 객체를 만들고

그걸 POST 리퀘스트의 바디에 전달해서 설문 결과를 생성하는 것이다.

그리고 생성된 결과가 리스폰스로 돌아오면 

그 결과가 화면에 보여줄 수 있을 것이다.