(5) Sending a request with JavaScript - API 함수 만들기

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

▶ 이전 글 살펴보기

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

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

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

---

다음과 같이 지금까지 보낸 리퀘스트들이 있다.

// main

// GET /api/color-surveys
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 = awiat res.json();
console.log(data);

// ----------------------------------------------------------------------
// GET /api/color-surveys:id
const res = awiat fetch('https://learn.codeit.kr/api/color-surveys/5');
const data = await res.json();
console.log(data);

// ----------------------------------------------------------------------
// POST /api/color-surveys
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);

보통 웹 개발을 할 때는 API를 호출하는 함수들을 따로 모아 두고

필요할 때 임포트해서 사용하는데

한번 코드를 관리해보자.

---

▶ api.js 파일 생성

GET/api/color-surveys를 하는 함수를 생성해보자면,

우선 main파일의 GET/api/color-surveys 부분을 복사해서 넣어준다.

// api.js

// GET /api/color-surveys를 하는 함수 생성
export function getColorSurveys(){
  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);
}

그런다음 함수안에서 await을 사용하니까 async 키워드를 사용하고

데이터를 리턴해준다.

// api.js

// GET /api/color-surveys를 하는 함수 생성

// 함수 안의 await을 사용하므로 async 키워드를 추가하여 비동기 함수로 만들어준다.
export async function getColorSurveys(){
  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();

  return data; // data를 반환
}

코드를 보면 쿼리 파라미터가 10으로 고정되어 있는데

이 부분을 지우고,

쿼리 파라미터를 함수 파라미터로 대신 받게 해주고

다음과 같이 쿼리 파라미터를 추가해준다.

// api.js

// GET /api/color-surveys를 하는 함수 생성

export async function getColorSurveys(params ={}){
  const url = new URL('https://learn.codeit.kr/api/color-surveys');
  Object.keys(params).forEach((key) => 
    url.searchParams.append(key, params[key])
    ); // forEach로 params의 key를 하나씩 가져와서 url.searchParams.append로 url에 추가

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

  return data; 
}

params 객체의 프로퍼티를 돌면서 url.searchParams에 추가해 주는 것이다.

 

이해를 돕기 위해 예를 들어 params에 이런 객체가 전달된다면 

params = { offset:5, limit:10 };

 

url.searchParams에 offset은 5, limit은 10이 추가되는 것이다.

---

이제 main 파일로 다시 돌아가서 이 함수를 임포트해서 사용해보자.

// main

// GET /api/color-surveys
import { getColorSurveys } from './api.js';
const data = await getColorSurveys();  // getColorSurveys 함수를 호출하여 data에 저장, 
console.log(data);			// await을 사용하므로 async 함수 안에서 사용

 

실행해 보면 다음과 같이 리스폰스가 잘 출력되는 것을 확인할 수 있다.

---

이제 쿼리 파라미터도 사용해보자.

offset과 limit에 따라 next와 previous 값이 돌아오고

값을 다음과 같이 작성해보면

// main

// GET /api/color-surveys
import { getColorSurveys } from './api.js';
const data = await getColorSurveys({offset:20, limit:20});  // offset과 limit을 인자로 넣어준고 호출
console.log(data);

결과도 총 20개가 돌아오는 것을 확인할 수 있다.

 

나머지 함수도 바꿔보자

 

---

main 파일의 GET /api/color-surveys:id 부분을 잘라서

getColorSurvey라는 함수 안에 붙여넣어준다.

// api.js

// GET /api/color-surveys:id

export async function getColorSurvey(){
  const res = await fetch('https://learn.codeit.kr/api/color-surveys/5');
  const data = await res.json();
  console.log(data);
}

그리고 id를 파라미터로 받아서

백틱을 사용하여 id를 URL로 전달하고 데이터를 리턴해준다.

// api.js

// GET /api/color-surveys:id

export async function getColorSurvey(id){ // getColorSurvey 함수 생성하고 id를 파라미터로 받음
  const res = await fetch(`https://learn.codeit.kr/api/color-surveys/${id}`); 
  // 백틱을 사용하여 id를 URL에 추가
  const data = await res.json();
  return data;
}

 

main 파일로 돌아가 getColorSurvey 함수를 임포트 해준다.

// main

// GET /api/color-surveys
import { getColorSurveys , getColorSurvey } from './api.js';
const data = await getColorSurvey(10); // getColorSurvey 함수를 호출하고 id를 인자로 넣어줌  
console.log(data);

getColorSurvey에 id: 10을 전달하여

실행해보면 다음과 같이 id가 10인 결과가 출력되는 것을 확인할 수 있다.

---

똑같이 POST 리퀘스트도 잘라내서

createColorSurvey 함수를 만들어 안에 붙여 넣어준다.

// api.js

// POST /api/color-surveys

export async function createColorSurvey(){
  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); 
}

createColorSurvey의 파라미터는 surveyData로 받고

마찬가지로 데이터를 리턴해준다.

// api.js

// POST /api/color-surveys

export async function createColorSurvey(surveyData){ // createColorSurvey 함수 생성하고 surveyData를 파라미터로 받음
  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(); 
  return data;
}

 

 

다시 main 파일로 돌아가 createColorSurvey 함수를 임포트 해준다.

// main

import { getColorSurveys , getColorSurvey, createColorSurvey } from './api.js';

const surveyData = {
  mbti: 'ENFJ',
  colorCode: '#ABCD00',
  password: '0000',
}


const data = await createColorSurvey(surveyData); 
console.log(data);

다음과 같이 설문 객체가 잘 생성된 것을 확인할 수 있다.