(2)자바스크립트_리퀘스트_ Get 리퀘스트 방법=>await + fetch() // 나중에 요약 정리 작성해보자

● 이론1_API 데이터의 Body의 출력 구성

○ count , next, previous ,result

{
  count: 357,
  next: 'https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10',
  previous: null,
  results: [
    {
      createdAt: 1733330621000,
      updatedAt: 1733330621000,
      colorCode: '#ABCD00',
      id: 369,
      mbti: 'INFP'
    },
    ....
    
    {
      createdAt: 1732967649000,
      updatedAt: 1732967709000,
      colorCode: '#00FFA6',
      id: 360,
      mbti: 'INTJ'
    }
  ]
}

count : 모든 데이터 (인덱스) 의 개수
next : 다음 데이터를 받아오는 URL
previous : 이전 데이터를 받아오는 URL
results : 현재 데이터에 해당하는 데이터 배열

● 이론2_next 값 : "https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10"

○ 이론1의 count : 357개인데, 출력된 results 배열의 원소 개수 : 10개 => url의 offset , limit 때문이다.

offset : 데이터 몇개를 건너뛰고, 요청할 것인지의 값
limit : 데이터 몇개를 요청할 것인지의 값

○ 그러면, next에 기입된 url로 fetch해서, 데이터를 출력해보자

- 코드 :

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

console.log(await res.json())

- 출력 결과 : //이론1의 출력결과랑 previous, next url값도 변했고, 데이터 구성도 바뀐것을 알 수 있다.

{
  count: 357,
  next: 'https://learn.codeit.kr/api/color-surveys/?offset=20&limit=10',
  previous: 'https://learn.codeit.kr/api/color-surveys/?offset=0&limit=10',
  results: [
    {
      createdAt: 1732956025000,
      updatedAt: 1732956025000,
      colorCode: '#BBDF10',
      id: 359,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1732956006000,
      updatedAt: 1732956006000,
      colorCode: '#5A8B4E',
      id: 358,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1732955992000,
      updatedAt: 1732955992000,
      colorCode: '#58A76F',
      id: 357,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1732807047000,
      updatedAt: 1732807209000,
      colorCode: '#413121',
      id: 356,
      mbti: 'ISTP'
    },
    {
      createdAt: 1732796913000,
      updatedAt: 1732796913000,
      colorCode: '#274B02',
      id: 355,
      mbti: 'ISFP'
    },
    {
      createdAt: 1732796902000,
      updatedAt: 1732796902000,
      colorCode: '#786553',
      id: 354,
      mbti: 'INFP'
    },
    {
      createdAt: 1732796887000,
      updatedAt: 1732796887000,
      colorCode: '#274B02',
      id: 353,
      mbti: 'ISFP'
    },
    {
      createdAt: 1732787439000,
      updatedAt: 1732787439000,
      colorCode: '#203E8E',
      id: 352,
      mbti: 'ISTJ'
    },
    {
      createdAt: 1732780969000,
      updatedAt: 1732780969000,
      colorCode: '#8AF542',
      id: 351,
      mbti: 'ISTP'
    },
    {
      createdAt: 1732778278000,
      updatedAt: 1732778278000,
      colorCode: '#274B02',
      id: 350,
      mbti: 'ENTJ'
    }
  ]
}

● 이론3 : fetch의 url을 통해, 부분 데이터만 추출하도록 해보기

=> mbti가 ESTJ인 데이터만 출력해보기

=> fetch('https://learn.codeit.kr/api/color-surveys/?mbti=ESTJ');

- 출력 결과 :

{
  count: 20,
  next: 'https://learn.codeit.kr/api/color-surveys/?mbti=ESTJ&offset=10&limit=10',
  previous: null,
  results: [
    {
      createdAt: 1733042859000,
      updatedAt: 1733042859000,
      colorCode: '#F4D38D',
      id: 362,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1733042812000,
      updatedAt: 1733042812000,
      colorCode: '#000000',
      id: 361,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732777875000,
      updatedAt: 1732777875000,
      colorCode: '#FFD1FF',
      id: 324,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732777816000,
      updatedAt: 1732777816000,
      colorCode: '#A2DEA5',
      id: 318,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732777752000,
      updatedAt: 1732777752000,
      colorCode: '#CA6952',
      id: 314,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732777248000,
      updatedAt: 1732777248000,
      colorCode: '#4082AF',
      id: 308,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732523326000,
      updatedAt: 1732523326000,
      colorCode: '#000000',
      id: 296,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732520643000,
      updatedAt: 1732520643000,
      colorCode: '#E1E1E1',
      id: 295,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732520368000,
      updatedAt: 1732520368000,
      colorCode: '#000000',
      id: 294,
      mbti: 'ESTJ'
    },
    {
      createdAt: 1732519778000,
      updatedAt: 1732519778000,
      colorCode: '#000000',
      id: 293,
      mbti: 'ESTJ'
    }
  ]
}

● 이론4 : url객체와 searchParameter을 이용하여, offset, limit 설정 후, 출력하기

- 이전 코드 :

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

console.log(await res.json())

- url 객체 , searchParams프로퍼티 + append()로 offset , limit 추가

//url객체로 API 링크 저장
const url = new URL('https://learn.codeit.kr/api/color-surveys');

//searchParams 프로퍼티 + append()메소드로 offset , limit 추가
url.searchParams.append('offset',10);
url.searchParams.append('limit',10);

//API fetch() , json데이터로 변환
const res = await fetch(url);
const data = await res.json();

console.log(data);

- 출력결과 :

{
  count: 357,
  next: 'https://learn.codeit.kr/api/color-surveys/?offset=20&limit=10',
  previous: 'https://learn.codeit.kr/api/color-surveys/?offset=0&limit=10',
  results: [
    {
      createdAt: 1732956025000,
      updatedAt: 1732956025000,
      colorCode: '#BBDF10',
      id: 359,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1732956006000,
      updatedAt: 1732956006000,
      colorCode: '#5A8B4E',
      id: 358,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1732955992000,
      updatedAt: 1732955992000,
      colorCode: '#58A76F',
      id: 357,
      mbti: 'ENFJ'
    },
    {
      createdAt: 1732807047000,
      updatedAt: 1732807209000,
      colorCode: '#413121',
      id: 356,
      mbti: 'ISTP'
    },
    {
      createdAt: 1732796913000,
      updatedAt: 1732796913000,
      colorCode: '#274B02',
      id: 355,
      mbti: 'ISFP'
    },
    {
      createdAt: 1732796902000,
      updatedAt: 1732796902000,
      colorCode: '#786553',
      id: 354,
      mbti: 'INFP'
    },
    {
      createdAt: 1732796887000,
      updatedAt: 1732796887000,
      colorCode: '#274B02',
      id: 353,
      mbti: 'ISFP'
    },
    {
      createdAt: 1732787439000,
      updatedAt: 1732787439000,
      colorCode: '#203E8E',
      id: 352,
      mbti: 'ISTJ'
    },
    {
      createdAt: 1732780969000,
      updatedAt: 1732780969000,
      colorCode: '#8AF542',
      id: 351,
      mbti: 'ISTP'
    },
    {
      createdAt: 1732778278000,
      updatedAt: 1732778278000,
      colorCode: '#274B02',
      id: 350,
      mbti: 'ENTJ'
    }
  ]
}

● 이론5_ 전체 중 특정 id의 데이터만 추출하기 => url/{특정id값}

//url객체로 API 링크 저장
const url = new URL('https://learn.codeit.kr/api/color-surveys/5');


//API fetch() , json데이터로 변환
const res = await fetch(url);
const data = await res.json();

console.log(data);

- 출력 결과 :

{
  createdAt: 1730193182000,
  updatedAt: 1730193182000,
  colorCode: '#36C667',
  id: 5,//id 5인 값만 추출됨
  mbti: 'INFP'
}

저작자표시

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

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

코잼민의 코딩이야기

(2)자바스크립트_리퀘스트_ Get 리퀘스트 방법=>await + fetch() // 나중에 요약 정리 작성해보자

● 이론1_API 데이터의 Body의 출력 구성

● 이론2_next 값 : "https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10"

● 이론3 : fetch의 url을 통해, 부분 데이터만 추출하도록 해보기

● 이론4 : url객체와 searchParameter을 이용하여, offset, limit 설정 후, 출력하기

● 이론5_ 전체 중 특정 id의 데이터만 추출하기 => url/{특정id값}

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

티스토리툴바

(2)자바스크립트_리퀘스트_ Get 리퀘스트 방법=>await + fetch() // 나중에 요약 정리 작성해보자

● 이론1_API 데이터의 Body의 출력 구성

● 이론2_next 값 : "https://learn.codeit.kr/api/color-surveys/?offset=10&limit=10"

● 이론3 : fetch의 url을 통해, 부분 데이터만 추출하도록 해보기

● 이론4 : url객체와 searchParameter을 이용하여, offset, limit 설정 후, 출력하기

● 이론5_ 전체 중 특정 id의 데이터만 추출하기 => url/{특정id값}

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

관련글

티스토리툴바