FE가 되고싶니? 나도✨

쿼리 스트링

패스 파라미터와 쿼리 파라미터

• 쿼리 스트링: URL의 끝부분에 위치하며, 여러 개의 쿼리 파라미터를 포함할 수 있는 문자열.
• 쿼리 파라미터: 쿼리 스트링의 구성 요소로, 특정한 키와 값을 쌍으로 전달한다.

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);

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

• 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에 해당하는 설문 객체 하나만 돌아온다.

사용 할 API : Color Survey API MBTI 컬러 설문

//package.json
{
  type:"module"
}

import, export 문법과 모듈 최상위 레벨에서 await을 사용할 수 있도록 type을 module로 설정해 준다.

우선 fetch로 컬러 설문 목록을 가져와 보자.

fetch('https://learn.codeit.kr/api/color-surveys');

fetch 함수 안에 리퀘스트(웹 브라우저가 서버에 요청)를 보낼 URL을 쓰면 된다. fetch는 기본적으로 get 리퀘스트를 보내고 promise를 리턴한다. 시간이 지나고 리스폰스(서버가 보내주는 응답)가 도착하면 promise는 fulfilled 상태가 되고, 리스폰스를 결과값으로 갖게된다. 그래서 리스폰스를 가져오려면 await문을 써줘야 하는것이다.

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

console.log(res); //리스폰스 출력

조금 복잡한 결과가 출력됐는데, 리스폰스에는 다양한 정보가 있다. 이중에서 가장 많이 사용하는 것은 상태코드, 헤더와 바디 내용이다.

const res = await fetch('https://learn.codeit.kr/api/color-surveys');
console.log('Status Code:');
console.log(res.status); //상태코드
console.log('Headers:');
console.log(res.headers); //헤더

이렇게 status와 headers로 프로퍼티로 접근할 수 있다. 반면 body는 내용이 일반 문자열이라면 텍스트 메소드, json 문자열이라면 json 메소드를 써야한다. 위의 헤더 내용 중 content-type value: application/json을 확인 할 수 있는데 사용할 API가 json 문자열을 돌려준다는 의미이기 때문에 json 메소드를 사용하면 된다.

//바디 내용은 단순히 프로퍼티로 가져올 수 없고 메소드를 사용해야 한다.
const res = await fetch('https://learn.codeit.kr/api/color-surveys');
const data = await res.json();
console.log(data);

json 메소드 역시 promise를 리턴하는 비동기 함수이기 때문에 앞에 await을 넣어줘야한다. json 메소드는 바디의 json 문자열을 읽어서 자바스크립트 객체로 변환해 준다.

실제 설문 데이터 외에도 count나 next, previous 같은 필드들이 있는데, count는 모든 데이터 갯수, next는 다음 데이터를 받아오는 URL, previous는 이전 데이터를 받아오는 URL, 그리고 results는 현재 페이지에 해당하는 데이터 배열이다. (자세한건 다음 포스팅 참조)

데이터 변수에 할당된 이 결과는 자바스크립트 객체이기 때문에 디스트럭처링(Destructuring) 같은 문법을 사용해서 프로퍼티들을 쉽게 가져올 수 있다.

예를 들어 설문 목록에 해당하는 results 프로퍼티를 가져와서 첫번째 설문 객체의 프로퍼티들을 출력해본다면,

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

const { results } = data;
const survey = results[0];
const{ id, mbti, colorCode, createAt, updateAt } = survey;
console.log(id, mbti, colorCode, createAt, updateAt);

이렇게 프로퍼티들이 잘 출력된다. 

총 정리

const res = await fetch('URL');
//fetch: 아규먼트로 URL을 전달

// 리스폰스 상태 코드
res.status;

// 리스폰스 헤더
res.headers;

// 리스폰스 바디
await res.json(); // JSON 문자열을 파싱해서 자바스크립트 객체로 변환
await res.text(); // 문자열을 그대로 가져온다.

fetch와 json 함수 모두 promise를 리턴하기 때문에 앞에 await을 써줘야 한다.