(2) Sending a request with JavaScript - fetch

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

Color Survey API 문서

실습용 서버 호스트

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

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"
}

 

import, export 문법과 모듈 최상위 레벨에서 await을 사용할 수 있도록 type을 module로 설정한다.

---

fetch 기본 문법

먼저 fetch로 컬러 설문 목록을 가져오기위해

다음과 같이 fetch 함수 안에 리퀘스트를 보낼 URL을 작성한다.

// main.js

fetch('https://learn.codeit.kr/api/color-surveys');

 

 

fetch는 기본적으로 get 리퀘스트를 보내며 Promise를 리턴한다.

시간이 지나고 리스폰스가 도착하면

Promise는 Fulfilled 상태가 되고 리스폰스를 결과값으로 갖게 된다.

그래서 리스폰스를 가져오려면 await문을 작성해야 한다.

// main.js

const res = await fetch('https://learn.codeit.kr/api/color-surveys');
console.log(res);

리스폰스를 출력하면 다음과 같이 정상적으로 출력된다.

 

리스폰스에는 다양한 정보가 있다.

많이 사용되는 것은 상태 코드, Header, body 내용인데

우선 상태 코드와 헤더 먼저 살펴보자.

---

점표기 방식과 메소드 사용으로 프로퍼티 접근

// main.js

const res = await fetch('https://learn.codeit.kr/api/color-surveys');

console.log('Status Code:');
console.log(res.status);
console.log('Headers:');
console.log(res.headers);

위와 같이 점표기법으로 status와 headers 프로퍼티로 접근하였고

출력 결과를 살펴보면 다음과 같다.

 

그리고 body 내용을 가져오려면 단순히 프로퍼티로 가져올 수 없고 메소드를 사용해야한다.

body 내용이 일반 문자열이라면 텍스트 메소드,

json 문자열이라면 json 메소드를 사용한다.

 

headers에서 content-type을 보면

지금 사용하는 API는 json 문자열을 돌려주는 것을 확인할 수 있기에(application/json)

json 메소드를 사용해야한다.

// main.js

const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();

console.log(data);

json 메소드 역시 Promise를 리턴하는 비동기 함수이기 때문에 앞에 await을 작성했다.

 

json 메소드는 body의 json 문자열을 읽어서 자바스크립트 객체로 변환해준다.

실행해보면 리스폰스의 body 내용이 잘 출력되는 것을 확인할 수 있다.

 

데이터 변수에 할당된 이 결과는 자바스크립트 객체이기 때문에

다음과 같이 Destructuring같은 문법을 사용해서 프로퍼티들을 쉽게 가져올 수 있다.

// main.js

const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();
const { results } = data;

console.log(data);

예를들어 설문 목록에 해당하는 results 프로퍼티를 가져와서

첫 번째 설문 객체의 프로퍼티를 출력해 볼 수 있다.

// main.js

const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();

const { results } = data;
const survey = results[0];
const { id, mbti, colorCode, createdAt, updateAt  } = survey;

console.log(id, mbti, colorCode, createdAt, updateAt);

---

이렇게 fetch 함수의 기본 문법을 살펴봤는데

정리하면 아규먼트로 URL을 전달하고리스폰스의 상태 코드는 status 프로퍼티, 헤더는 headers 프로퍼티를 점 표기법으로 가져오고json 바디 내용은 json 메소드를 사용해서 가져올 수 있다.그리고 fetch와 json 함수 모두 Promise를 리턴하기 때문에 await을 작성하였다.