(3)자바스크립트_리퀘스트_Get 리퀘스트 => fetch() : API 데이터 불러오기 vs POST 리퀘스트 => fetch(url , 추가할 데이터 객체) : API 데이터에 요소 추가 (작성중)

● 이론0_GET 리퀘스트 복습

○ 요약 :

• url 객체 <= 불러올 API의 url
• url 객체.searchParams,append() + offset , limit , 개수
• 또는 특정 데이터 프로퍼티에 대한 값의 데이터만 추출 => url/?특정프로퍼티 = 값
• const res = await fetch(url); , const data = await res.json(); , console.log(data);

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

url.searchParams('offset',10);
url.searchParams('limit',10);

const res = await fetch(url);
const data = await res.json();

console.log(data);

 

● 이론1_Post 리퀘스트 방법 => fetch( url , {객체의 method 속성 <= 'POST'})

○ 순서1 : Post할 데이터의 Body를 객체형태 , 속성 : 속성값을 변수로 초기화

Post할 데이터를 겍채 형태, 속성 : 속성값 으로 초기화
const surveyData = {
	mbti : "ISTJ",
    colorCode : '#ABCDEF',
    password : '0000',
};

○ 순서2 : Post 데이터를 API 추가 => fetch(url , {객체});

• fetch(url , 객체)

- 객체 내 추가해야할 속성들 : method , body , headers

①. method : 리퀴스트 타입 의미 'POST', 'DELETE' 등등

②. body : Post할 데이터의 JSON문자열 형태값

③. headers : API의 Content-Type의 객체

const surveyData = {
	mbti : 'ISTJ',
    colorCode : '#ABCDEF',
    password : '0000',
};

await fetch('https://learn.codeit.kr/api/color-surveys', {
	method : 'POST',
    body : JSON.stringify(surveyData),
    headers : {
    	'Content-Type' : "application/json",
    },
});

○ 순서3_ Post된 데이터 출력해보기 => GET과 비슷하다.

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: 1733452377548,
  updatedAt: 1733452377548,
  colorCode: '#ABCDEF',
  id: 371,
  mbti: 'ISTJ',
  password: '0000'
}

◎ 연습문제 :

실습 설명

이번 실습에서는 POST 리퀘스트를 보내서 새로운 아바타를 생성해 봅시다.

 

const avatarData = {
  hairType: 'short2',
  hairColor: 'brown',
  skin: 'tone200',
  clothes: 'hoodie',
  accessories: 'earbuds',
};

https://learn.codeit.kr/api/avatars에 POST 리퀘스트를 보내고 위 데이터를 리퀘스트 바디에 포함해 주세요. 그리고 리스폰스로 돌아오는 결과를 출력하세요.

실습 결과

{
  createdAt: 1688460577312,
  updatedAt: 1688460577312,
  id: 41,
  hairType: 'short2',
  hairColor: 'brown',
  skin: 'tone200',
  clothes: 'hoodie',
  accessories: 'earbuds'
}

- 답 :

const avatarData = {
  hairType: 'short2',
  hairColor: 'brown',
  skin: 'tone200',
  clothes: 'hoodie',
  accessories: 'earbuds',
};

// 여기에 코드를 작성하세요.

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

console.log(data);