본문 바로가기
CodeIt_Sprint/자바스크립트_Request보내기

(4)자바스크립트_리퀘스트_API.js 만들기 ≠ API 만들기

by 코잼민 2024. 12. 7.

● 이론0_GET 리퀘스트 복습

○ API 데이터 GET 하여, 출력 해보기

- js 코드 :

const url = new URL('https://learn.codeit.kr/api/color-surveys');

const res = await fetch(url);

const data = await res.json();

console.log(data);

 

- 출력 결과 :

{
  count: 40,
  next: 'https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10',
  previous: null,
  results: [
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#33A560',
      id: 40,
      mbti: 'ESFJ'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#F011E5',
      id: 39,
      mbti: 'ISTP'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#771880',
      id: 38,
      mbti: 'INFJ'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#DB72B0',
      id: 37,
      mbti: 'ENTJ'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#AAF9A3',
      id: 36,
      mbti: 'INFJ'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#457E5A',
      id: 35,
      mbti: 'ESFP'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#C842CA',
      id: 34,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#4A2FE0',
      id: 33,
      mbti: 'ESFJ'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#DC7970',
      id: 32,
      mbti: 'INTP'
    },
    {
      createdAt: 1733540117000,
      updatedAt: 1733540117000,
      colorCode: '#171823',
      id: 31,
      mbti: 'ESTJ'
    }
  ]
}

○ API 데이터 중 원하는 특정 프로퍼티의 값만 추출 //Ex_ id값

- js 코드 :

const id = 20//id 변수수

const url = new URL(`https://learn.codeit.kr/api/color-surveys/${id}`);//id 대입


const res = await fetch(url);

const data = await res.json();

console.log(data);

 

- 출력 결과 :

{
  createdAt: 1733540117000,
  updatedAt: 1733540117000,
  colorCode: '#EFB578',
  id: 20,
  mbti: 'ENFP'
}

○ API 데이터에 객체 데이터 추가하기 => POST 리퀘스트

- js 코드 :

//추가할 data 객체형
const surveyData = {
  mbti :"ISTJ",
  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);

 

- 출력 결과 :

{
  createdAt: 1733544196518,
  updatedAt: 1733544196518,
  colorCode: '#ABCDEF',
  id: 42,
  mbti: 'ISTJ',
  password: '0000'
}

● 이론1_API.js 제작 , export 호출 사용해보기 => [api.js] 생성 후, 사용

○ Argument를 limit, offset을 넣으면, API 데이터 반환하는 메소드 만들기 

- api.js

//api.js
export async function getColorSurvey(params = {}) //디폴트 Parameter : 빈 객체
{
	const url = new URL('https://learn.codeit.kr/api/color-surveys');
    
    //전달받은 Parameter를 url에 전달하기
    //문법이 좀 어려운데?
    Object.keys(params).forEach((key)=>{
    	url.searchParams.append(key,params[key]);
    });
    
    const res = await fetch(url);
    const data = await res.json();
    
    return data;
}

//main.js

import { getColorSurvey } from './api.js';

//getColorSurvey()는 Promise 객체를 반환하므로, await을 해야 한다.
const data = await getColorSurvey({
	offset : 10 , limit : 10 //queryParameter 대입
});

consolel.log(data);

※참고_ Parameter의 offset , limit를 전달하는 부분의 문법 정리

위 코드에서 사용된 문법은 JavaScript의 최신 기능을 활용한 부분입니다. 한 줄씩 나눠서 자세히 설명하겠습니다.

1. Object.keys(params)

  • Object.keys: 주어진 객체의 "키"를 배열로 반환합니다. 
    const params = { offset: 10, limit: 10 };
const keys = Object.keys(params); // ['offset', 'limit']
  • 여기서는 params 객체의 모든 키(속성 이름)를 배열로 반환합니다.

2. .forEach((key) => { ... })

  • forEach: 배열의 각 요소에 대해 주어진 콜백 함수를 실행합니다.
    • Object.keys(params)로 반환된 배열 ['offset', 'limit']의 각 요소에 대해 한 번씩 실행됩니다.
    • 화살표 함수 ((key) => { ... })가 각 키에 대해 실행됩니다.
    ['offset', 'limit'].forEach((key) => {
  // 'key'는 배열의 각 요소 ('offset'과 'limit')가 순차적으로 대입됩니다.
});

3. url.searchParams.append(key, params[key])

  • url.searchParams: URL의 query string을 쉽게 관리할 수 있는 URLSearchParams 객체입니다.
    • append(key, value): 특정 쿼리 파라미터를 추가합니다.
      • key는 파라미터 이름 (예: 'offset').
      • params[key]는 해당 키의 값 (예: 10).
    const key = 'offset';
url.searchParams.append('offset', params['offset']); // offset=10 추가
  • 결과적으로 params 객체의 키-값 쌍이 URL의 쿼리 파라미터로 추가됩니다. 예를 들어:
  • const params = { offset: 10, limit: 10 }; Object.keys(params).forEach((key) => { url.searchParams.append(key, params[key]); }); // url은 ?offset=10&limit=10 쿼리를 갖게 됨

전체 동작을 이해하기

  • params 객체의 각 키-값 쌍을 query string 형태로 URL에 추가하는 역할입니다.
  • 예제: 
    const params = { offset: 10, limit: 10 };
const url = new URL('https://learn.codeit.kr/api/color-surveys');

Object.keys(params).forEach((key) => {
  url.searchParams.append(key, params[key]);
});

console.log(url.toString());
// 출력: "https://learn.codeit.kr/api/color-surveys?offset=10&limit=10"

코드 문법의 구성 요약

  1. Object.keys(params): 객체의 키를 배열로 반환.
  2. forEach: 각 키에 대해 반복 실행.
  3. url.searchParams.append: 키-값 쌍을 URL에 추가.

이를 통해 URL 쿼리 파라미터를 동적으로 생성할 수 있습니다.

○ Argument를 id을 넣으면, 특정 id의 API 데이터 반환하는 메소드 구현

//api.js
export async function getColorSurveyId(id)
{
	const url = new URL(`https://learn.codeit.kr/api/color-surveys/${id}`);
    
    const res = await fetch(url);
    const data = await res.json();
    
    return data;
}

//main.js
import { getColorSurveyId } from './api.js';

const data = await getColorSurveyId(19);

console.log(data);

- 출력 결과 :

{
  createdAt: 1733540117000,
  updatedAt: 1733540117000,
  colorCode: '#10E479',
  id: 10,
  mbti: 'ESTJ'
}

○ Argument를 추가할 데이터로 설정하고, API에 데이터 추가해보기

//api.js
export async function createColorSurvey(surveyData)
{
	const res = await fetch('https://learn.codeit.kr/api/color-surveys',{
    	method : "POST",
        body : "application/json",
        headers : {
        	"Content-tyoe" : "application/json",
        },
    });
    
    return await res.json();
}


//main.js
import { createColorSurvey } from './api.js';

//추가할 설문 데이터
const surveyData = {
	colorCode : "#ABCDEF",
	mbti : "ISTJ",
	password : "0000",
};

const data = await createColorSurvey(surveyData);

console.log(data);

- 출력결과 :

{
  createdAt: 1733546203228,
  updatedAt: 1733546203228,
  colorCode: '#ABCDEF',
  id: 43,
  mbti: 'ISTJ',
  password: '0000'
}

◎ 연습문제 :

실습 설명

API를 호출하는 함수들을 api.js 파일에 모아 놨습니다.

아바타를 수정하는 patchAvatar() 함수와 아바타를 삭제하는 deleteAvatar() 함수를 완성해 주세요.

patchAvatar() 함수는 https://learn.codeit.kr/api/avatars/:id에 PATCH 리퀘스트를 보내고 수정할 데이터를 리퀘스트 바디로 전달합니다.

이때 :id 부분에는 id 값이 들어갑니다. 리퀘스트가 성공하면 수정된 아바타 객체를 돌려줍니다.

deleteAvatar() 함수는 https://learn.codeit.kr/api/avatars/:id에 DELETE 리퀘스트를 보내고 바디로는 아무 내용도 전달하지 않습니다.

리퀘스트가 성공하면 삭제된 아바타 객체를 돌려줍니다.

실습 결과

{
  createdAt: 1688090371000,
  updatedAt: 1688461728468,
  id: 3,
  hairType: 'short3',
  hairColor: 'blonde',
  skin: 'tone300',
  clothes: 'collarBasic',
  accessories: 'headset'
}

 

● 해결 전략 :

API 리퀘스트에서 POST를, 수정은 "PATCH" , 삭제는 "DELETE"로 하면 된다.

=> DELETE 는 res 객체에 method만 적용하면 된다.

- 답 : 

export async function getAvatars(params = {}) {
  const url = new URL('https://learn.codeit.kr/api/avatars');
  Object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
  );
  const res = await fetch(url);
  const data = await res.json();
  return data;
}

export async function getAvatar(id) {
  const res = await fetch(`https://learn.codeit.kr/api/avatars/${id}`);
  const data = await res.json();
  return data;
}

export async function createAvatar(avatarData) {
  const res = await fetch('https://learn.codeit.kr/api/avatars', {
    method: 'POST',
    body: JSON.stringify(avatarData),
    headers: {
      'Content-Type': 'application/json',
    },
  });
  const data = await res.json();
  return data;
}

export async function patchAvatar(id, avatarData) {
  const res = await fetch(`https://learn.codeit.kr/api/avatars/${id}`, {
      method : "PATCH",
      body : JSON.stringify(avatarData),
      headers : {
        "Content-Type" : "application/json",
      },
  });
  const data = await res.json();
  return data;
}

export async function deleteAvatar(id) {
  const res = await fetch(`https://learn.codeit.kr/api/avatars/${id}`, {
      method : "DELETE",
  });
  const data = await res.json();
  return data;
}

 

저작자표시

'CodeIt_Sprint > 자바스크립트_Request보내기' 카테고리의 다른 글

(6)자바스크립트_리퀘스트_웹브라우저에서 리퀘스트 기록 확인 => F12 + Network 탭의 기능  (0) 2024.12.08
(5)자바스크립트_리퀘스트_API에서 리퀘스트 오류 종류와 그의 처리방법 => try,catch,finally문 || throw 오류처리(작성중..)  (0) 2024.12.07
(3)자바스크립트_리퀘스트_Get 리퀘스트 => fetch() : API 데이터 불러오기 vs POST 리퀘스트 => fetch(url , 추가할 데이터 객체) : API 데이터에 요소 추가 (작성중)  (1) 2024.12.06
(2)자바스크립트_리퀘스트_ Get 리퀘스트 방법=>await + fetch() // 나중에 요약 정리 작성해보자  (0) 2024.12.06
(1)자바스크립트_리퀘스트_fetch()메소드 복습, API의 구성 => status, headers,body, body의 내용 Destructure문법으로 부분추출  (0) 2024.12.06

관련글

티스토리툴바