리퀘스트: GET 리퀘스트 보내는 방법

color-surveys에 리퀘스트를 보낼 때 뒤에 쿼리 스트링(Query string)을 추가할 수도 있는데 mbti, limit, offset이라는 쿼리 파라미터들을 사용할 수 있다.

해당 포스팅 필수 참고!

mbti로 특정 mbti에 해당하는 설문만 필터(filter)할 수 있고, limit과 offset은 페이지네이션(pagination 데이터 목록을 여러 페이지로 나누어 요청)에 사용된다.

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

console.log(data);

결과, next 의 마지막 부분을 잘 살펴보자

리퀘스트를 보내면 이런 결과가 돌아왔다.

• count : 모든 데이터 개수
• next : 다음 데이터를 받아오는 URL
• previous : 이전 데이터를 받아오는 URL
• results : 현재 페이지에 해당하는 데이터 배열

위 결과를 보면 전체 데이터는 54개가 있지만 결과는 10개밖에 없다. 

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

이 부분에서 offset=10&limit=10 이 부분 때문이다. offset은 데이터 몇개를 건너뛰고 요청할 것(offset=10은 11번째 항목부터 시작하여 데이터를 가져오겠다는 뜻)인지, limit은 데이터 몇개를 요청할 것인지를 뜻한다. 

지금 결과에서 10개를 받았으니 다음에는 처음에서부터 10개를 건너뛰고 10개를 받아올 것이다. 그래서 next 값이 이런 URL인 것이다. 이 URL로 리퀘스트를 보내보면

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

console.log(data);

next와 previous 값이 바뀌었고 다음 10개의 데이터가 잘 출력되는것을 확인 할 수 있다.

이렇게 작성하면 mbti가 ISTJ인 설문 결과만 돌아오게 할 수도 있다.

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

console.log(data);

---

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

const url = new URL('https://learn.codeit.kr/api/color-surveys'); //먼저 이렇게 URL 객체를 만들고
//객체의 searchParams라는 프로퍼티에 쿼리 파라미터를 추가하면 된다.
url.searchParams.append('offset', 10);
url.searchParams.append('limit', 10);

const res = await fetch(url); //이 부분은 url로 입력해주고 코드를 실행해보면
const data = await res.json();

console.log(data);

 

이전처럼 offset=10, limit=10 결과가 잘 돌아온다. 

---

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

console.log(data);

GET api/color-surveys는 여러 설문 객체를 가져오는데 쓰이고, GET api/color-surveys/id는 설문 객체 하나를 가져오는데 쓰인다. 만약 id 5에 해당하는 객체 하나만 가져오고 싶다면 'https://learn.codeit.kr/api/color-surveys/5' 로 작성해주면 id : 5에 해당하는 설문 객체 하나만 돌아온다.