(3) Sending a request with JavaScript - [fetch] GET Request

▶ 다음과 같은 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"
}

 

▶ 이전 글 살펴보기

(2) Sending a request with JavaScript - fetch

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

(2) Sending a request with JavaScript - fetch

---

// main.js

// 쿼리 파라미터: mbti, limit, offset
const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();

console.log(data);

color-surveys에 리퀘스트를 보낼 때 뒤에 쿼리 스트링(Query string)을 추가 할 수도 있으며

mbti, limit, offset 이라는 쿼리 파라미터들을 사용할 수 있다.

 

mbti로 특정 mbti에 해당하는 설문만 필터 할 수 있고

limit과 offset은 페이지네이션(Pagination)에 사용된다.

※ Pagenation - 모든 데이터를 한꺼번에 보여 주지 않고 페이지처럼 나눠서 보여주는 것을 의미한다.

 

---

리퀘스트를 보내면 다음과 같은 결과가 출력되는데

count는 모든 데이터 개수

next는 다음 데이터를 받아오는 URL

previous는 이전 데이터를 받아오는 URL

results는 현재 페이지에 해당하는 데이터 배열이다.

 

여기서 잠시 next의 URL 값을 분석해보면

  next: 'https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10',

next에서 offset은 데이터를 몇 개를 건너뛰고 요청할 것인지,

그리고 limit은 데이터 몇 개를 요청할 것인지를 뜻한다.

즉 모든 데이터 개수는 578개이고

리퀘스트 결과를 스크롤 해보면

결과 데이터는 10개 밖에 없는걸로 확인할 수 있는데

limit=10 -> 즉 데이터를 10개 요청하였으므로

다음에는 처음에서부터 10개를 건너뛰고 10개를 받아야 할 것이다.

그래서 next 값이 이런 URL을 가지고있는 것이다.

 

실제로 저 주소로 리퀘스트를 보내보면 다음과 같은 결과를 얻을 수 있다.

// main.js

// 쿼리 파라미터: mbti, limit, offset
const res = await fetch('https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10');
const data = await res.json();

console.log(data);

처음 결과와 비교해보면 next와 null값이였던 previous 값이 바뀌었고

10개의 데이터가 잘 도착한 것을 확인 할 수 있다.

---

URL을 수정하여 mbti 파라미터도 사용해보자면

// main.js

// 쿼리 파라미터: mbti, limit, offset
const res = await fetch('https://learn.codeit.kr/api/color-surveys/?mbti=ISTJ');
const data = await res.json();

console.log(data);

이렇게 mbti가 ISTJ인 설문 결과만 돌아온다.

---

쿼리 스트링을 직접 작성하지 않고 URL이라는 객체를 사용할 수도있다.

다음과 같이 URL 객체를 만들고

객체의 searchParams라는 프로퍼티에 쿼리 파라미터를 추가해준다.

fetch 주소를 방금 생성한 'url'로 바꾸고 실행하면 다음과 같은 결과를 얻는다.

// main.js

// 쿼리 파라미터: mbti, limit, offset
const url = new URL('https://learn.codeit.kr/api/color-surveys');
url.searchParams.append('offset', '10');
url.searchParams.append('limit', '10');

const res = await fetch(url);
const data = await res.json();

console.log(data);

이와 같이 offset= 10, limit=10 결과가 잘 들어온 것을 확인할 수 있다.

---

id로 단 하나의 설문 객체를 가져올 수 있는 방법이 있다.

 

// main.js

// 쿼리 파라미터: mbti, limit, offset
const res = await fetch('https://learn.codeit.kr/api/color-surveys);
const data = await res.json();

console.log(data);

URL 먼저 확인해보면

GET/ api/color-surveys는 여러 설문 객체를 가져오는데 쓰이고

GET/ api/color-surveys/id는 설문 객체 하나를 가져오는 데 쓰인다.

 

예를들어 id 5에 해당하는 설문 객체만 가져오고 싶다면

다음과 같이 리퀘스트를 보낸다.

// main.js

// 쿼리 파라미터: mbti, limit, offset
const res = await fetch('https://learn.codeit.kr/api/color-surveys/5'); // id:5
const data = await res.json();

console.log(data);

결과를보면 id 5에 해당하는 설문 객체 하나만 돌아오는 것을 확인할 수 있다.

 

이렇게 다양한 GET 리퀘스트를 보내봤다.