자바스크립트 - 리퀘스트 보내기 (fetch, GET / POST)

//package.json

{
    "type": "module"
}

json파일이 필요하다 - 왜지?

-> Node.js 환경에서 ES모듈을 사용하기 위해서. 여기서는 await 사용하기 위해서~

 

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

console.log(res);
console.log(res.status);
console.log(res.headers);

상태코드 satus, 헤더 header 프로퍼티 확인하기 

 

바디의 내용 body : fetch 를 사용해서 확인한다 → GET 리퀘스트를 보낸다 

// 쿼리 스트링, 쿼리 파라미터 : offset, limit

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

console.log(data);

offset: 몇개를 건너뛸건지

limit: 몇개를 보여줄건지

---

쿼리 스트링 = 쿼리 파라미터

 URL의 뒤에 입력 데이터를 함께 제공하는 가장 단순한 데이터 전달 방법

주로 GET방식으로 데이터를 요청할 때 쓰이는 방법.

 

 :URL 뒤에 물음표(?)와 함께 붙는 키-값(Key-Value) 쌍

 여러 개의 쿼리 파라미터를 전달하려면 파라미터 사이에 앰퍼샌드(&)를 추가해서 하나의 문자열(string)로 전달

→ 웹 서버의 요청에 대한 추가 정보를 제공하고, 전달된 데이터로 서버가 추가 액션을 취할 수도 있음

API 요청, 검색, 트래킹 용도로 사용

// 쿼리 스트링, 쿼리 파라미터 : mbti

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

console.log(data);

mbti로 필터링 하기

// Destructing 사용하기 

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


const { results } = data;

const survey = results[0];
const { id, mbti, colorCode, createdAd, updatedAt} = survey;
console.log(id, mbti, colorCode, createdAd, updatedAt); //92 ISFP #C191FF undefined 1721971425000

 

//url 객체 사용하기 
const url = new URL('https://learn.codeit.kr/api/color-surveys')
url.searchParams.append('offset', 10);
url.searchParams.append('limit', 10);

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

쿼리스트링 대신 url 객체 사용하기

// id = 5 인 객체만 받아오기

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

/**출력값 
  {
  createdAt: 1721607864000,
  updatedAt: 1721607864000,
  colorCode: '#36C667',
  id: 5,
  mbti: 'INFP'
}
**/

---

fetch의  메소드 프로퍼티를 POST로 설정 : 두번째 아규먼트

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); // 새로 생성한 설문 객체가 리턴됨

// survey 는 자바스크립트 객체이고, 외부로 데이터를 주고받을때는 json 문자열을 사용한다

-> 변환이 필요 : JSON.stringify() 메소드 사용

// 데이터를 보낼떄는 headers  프로퍼티로 어떤 형식의 데이터를 보내는지 알려줘야한다. 

->  Content-Type : 

 

실제 웹서비스에서는 사용자가 폼에 입력한 값으로 surveyData  같은 객체를 만들어서 

POST 리퀘스트의 body에 전달해서 설문 결과를 전달->  response로 돌아오면 화면에 보여줄 수 있겠다~

---

method 프로퍼티 값의 종류 : HTTP 프로토콜의 메서드 

GET이 기본값

 

'POST'

 

• 목적: 서버에 데이터를 제출하여 새로운 리소스를 생성하거나 기존 리소스를 업데이트합니다.
• 용도: 주로 새로운 리소스를 생성할 때 사용됩니다. 예를 들어, 사용자 등록 폼을 제출하거나 새로운 블로그 게시물을 생성할 때 사용합니다.
• 특징:
  • 요청 본문(body)에 데이터를 포함하여 서버에 전송합니다.

 

'PATCH'

 

• 목적: 리소스의 부분적인 업데이트를 수행합니다.
• 용도: 리소스의 일부 필드나 속성만을 수정할 때 사용됩니다. 예를 들어, 사용자의 이메일 주소만 변경하거나 블로그 게시물의 제목만 수정할 때 사용합니다.
• 특징:
  • 요청 본문에 업데이트할 필드와 값을 포함하여 서버에 전송합니다.
  • 서버는 요청 본문에 있는 부분만 수정하고, 나머지 부분은 그대로 유지합니다.

 

'DELETE'

 

• 목적: 서버에서 특정 리소스를 삭제합니다.
• 용도: 리소스를 삭제할 때 사용됩니다. 예를 들어, 특정 사용자를 삭제하거나 블로그 게시물을 제거할 때 사용합니다.
• 특징:
  • 요청 URL에 삭제할 리소스의 식별자를 포함하여 서버에 전송합니다.
  • 서버는 지정된 리소스를 삭제하고, 일반적으로 성공 여부를 응답으로 반환합니다.

---

오류 처리하기 

 

api.js 에서 함수 내에 try 문으로 감싸줘도 되고

또는 호출할때 try 문으로 감싸줘도 된다.

//오류처리없이 함수를 실행할때
const data = await getColorSurveys();
console.log(data); // 여기서는 fetch failed로 에러 뜸

fetch가 리턴하는 promise가 rejected 상태가 된다

//main.js 에서 오류처리

try{
    const data = await getColorSurveys();
    console.log(data);
} catch(e){
    console.log('오류가 발생했습니다:');
    console.log(e.massage); // 강의에서는 fetch failed 라고 뜨는데 난 undefined라고 뜨네;
}

 

어이없네 ㅠ  오타 제발~!  

message / massage

---

오류 발생시키기

 

fetch 오류 2가지 경우

 

1)url 주소가 잘못됐을때, 유효하지 않은 헤더이름이나 헤더값이 들어갔을때 : 리퀘스트 자체가 실패

fetch가 리턴하는 promise는 rejected 상태가 된다

 

2) 리퀘스트는 성공적인데 상태 코드가 실패인 경우

400이나 500같은 erro response를 받아오면 fetch의 promise는 fullfulled 가 됨 = request 는 성공

 

-> response 상태 코드가 성공이 아니면 오류를 발생시켜야 한다

 

res.ok 는 리스폰스의 상태코드가 2로 시작하면 true / 그렇지 않으면 false를 리턴한다

//api.js
export async function getColorSurveys(params = {}){
    const url = new URL(`https://learn.codeit.kr/api/color-surveys`);
    Object.keys(params).forEach((key) =>
    url.searchParams.append(key, params[key])
    );

    const res = await fetch(url);

    if (!res.ok) {
        throw new Error ('데이터를 불러오는데 실패했습니다.');
    }

//main.js
// 쿼리 파라미터로 잘못된 mbti 값을 보내보면 if 문에 의해 문구가 출력된다
try{ 
    const data = await getColorSurveys({ mbti: 'EEEE'});
    console.log(data);
} catch(e){
    console.log('오류가 발생했습니다:');
    console.log(e.message); 
}

 

 

오류 메시지를 바디에 전달하기

async function createAvatar(avatarData) {
  const res = await fetch('https://learn.codeit.kr/api/avatars', {
    method: 'POST',
    body: JSON.stringify(avatarData),
    headers: {
      'Content-Type': 'application/json',
    },
  });

  if (!res.ok) {
    const message = await res.text();// 여기에 코드를 작성하세요.
    throw new Error(message);
  }

  const data = await res.json();
  return data;
}

res.ok가 false인 경우, 즉 HTTP 응답 상태 코드가 2xx 범위가 아닌 경우(보통 4xx 또는 5xx 범위의 상태 코드일 경우), res.text()를 호출하여 응답 본문을 텍스트로 읽어온다.

이 본문은 서버가 오류를 설명하기 위해 보내는 메시지일 가능성이 높다. (지피티 피셜)

 

 

오류 메시지는 JSON이 아닌 일반 문자열이므로 res.json()대신 res.text()를 사용 

결과를 Promise에 담아 준다.

 

res.text() 메소드는 바디의 내용을 문자열로 그대로 가져옵니다. 따라서 바디의 내용이 JSON 형식이 아닌데 res.json() 메소드를 사용하면 파싱 오류가 납니다.

 

...어우 왜이렇게 이해가 안되는지 한참 걸렸다

---

Node.js 환경과 웹브라우저에서 개발할때의 차이점

 

웹브라우저에서는 개발자도구로 네트워크 액티비티를 확인할 수 있다. 

네트워크 리퀘스트를 보낼때 생각지 못한 버그가 발생했을 때 개발자 도구가 유용하다

 

Network 탭 보기

 

https://developer.chrome.com/docs/devtools/network/reference?hl=ko

네트워크 기능 참조  |  Chrome DevTools  |  Chrome for Developers