FE가 되고싶니? 나도✨

fetch 함수는 기본적으로 GET 리퀘스트를 보냈는데 POST나 다른 종류의 리퀘스트는 어떻게 보낼 수 있을까?

fetch 함수의 두번째 아규먼트로 다양한 옵션을 넘겨줄 수 있다. POST 리퀘스트를 보내려면 옵션의 method 프로퍼티를 POST로 설정하면 된다.

//main.js
fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST' //POST가 아니라도 PATCH나 DELETE로 설정도 가능하다.
});

POST 리퀘스트는 보통 바디를 같이 전달하는데, color-survey API의 경우 MBTI, 좋아하는 색깔의 헥스코드, 그리고 설문에 대한 비밀번호를 바디로 전달해야한다.

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000' //여기서 비밀번호는 설문객체를 생성한 사람만이 나중에 수정/삭제를 할 수 있게 하는 용도
};

fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: surveyData //리퀘스트 바디도 옵션으로 설정 가능, body라는 프로퍼티로 설정
});

중요한 점! surveyData는 자바스크립트 객체이고, 외부로 데이터를 주고 받을 때는 JSON 문자열을 사용한다. 그래서 surveyData를 JSON 문자열로 변환해주어야 한다. 

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000'
};

fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: JSON.stringify(surveyData) //JSON 문자열로 변환
});

JSON.stringify 메소드를 사용하면 자바스크립트 객체를 JSON 문자열로 변환 할 수 있다. 

마지막으로 데이터를 보낼 때는 Content-Type 헤더로 어떤 형식의 데이터를 보내는지 알려주는 것이 좋은데 headers 프로퍼티로 헤더까지 설정해주자.

//main.js
const surveyData = {
  mbti: 'ENFP',
  colorCode: '#ABCDEF',
  password: '0000'
};

fetch('https://learn.codeit.kr/api/color-surveys', {
  method: 'POST',
  body: JSON.stringify(surveyData),
  headers: {
    'Content-Type': 'application/json', //필요하다면 다른 헤더들도 아래 추가할 수 있다.
  },
});

이제 POST 리퀘스트를 보낼 준비는 끝났다. 리스폰스를 처리하는 코드만 작성해주면 되는데 GET 리퀘스트와 완전 동일하다.

//main.js
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);

POST 리퀘스트로 데이터를 생성하면 서버가 생성된 데이터를 리스폰스로 돌려주는 경우가 많은데 const data = await res.json(); 의 json 메소드로 리스폰스를 파싱해서 출력한다. 

코드를 실행해 보면 새로 생성된 설문 객체가 잘 돌아온다. 

실제 웹 개발을 하는 상황이라고 생각해 보면 사용자가 폼에 mbti, 좋아하는 색상 정보를 입력하면 그 값으로 surveyData 같은 객체를 만들고 그걸 POST 리퀘스트의 바디에 전달해서 설문 결과를 생성하는 것이다. 그리고 생성된 결과가 리스폰스로 돌아오면 그걸 화면에 보여주거나 할 수 있다.

쿼리 스트링

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

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