[DAY-13] VanillaJS를 통한 JS 기본 역량 강화(5)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
1. 강사님이 키우시는 고양이 소리가 너무 귀여웠다.
2. fetch는 확실히 가독성이 좋다. (XMLHTTPRequest에 비해서는)
3. 독립적인 컴포넌트 작성에 점점 익숙해져 간다.
4. 오타로 인한 버그 때문에 1시간을 넘게 날렸다.

안녕하세요.. 이디어츠입니다.. 😂

[1] fetch api

fetch api는 비동기 http 요청을 좀 더 쓰기 편하게 해주는 API입니다.

XMLHTTPRequest를 대체할 수 있으며 Promise 기반으로 동작합니다.

fetch("http request를 날릴 브라우저 주소")
  .then((res) => {
    return res.json(); // response는 json이나 text로 바꿔 사용해야 합니다.
  })
  .then((data) => {
    console.log(data); // 그제서야 todos 제대로 조회 가능
  });

😮 확실히 XMLHTTPRequest보다는 API가 간단해 보입니다!

[1-1] fetch API 특징

[1] fetch의 기본 응답 결과는 Response 객체입니다.

fetch api의 응답 데이터의 형식을 바꾸는 메소드에는 json(), text(), blob() 등이 있습니다.

• json()

응답 데이터를 json 형식으로 변환

• text()

응답 데이터를 단순 text로 변환

• blob()

응답 데이터를 이미지 형식으로 변환

type이 이미지임을 알 수 있습니다.

[2] HTTP error가 발생하더라도 reject되지 않습니다.

실제로 네트워크 에러나 요청이 완료되지 못한 경우에만 reject됩니다.

따라서 서버 요청 중 에러가 생겼을 경우에도 then으로 떨어지므로, response의 ststus code나 ok를 체크해주는 것이 좋습니다.

// ...
if (res.ok) {
  return res.text();
}
throw new Error(`Status ${res.status} : 요청 처리 실패!`);
// ...

res.ok는 status가 200-299 사이인 경우에만 true입니다.
따라서 300-399 (리다이렉션 : 요청을 완료하기 위해 다른 페이지로 보내야 할때) 는 true가 아닙니다.

[3] 옵션을 줄 수 있습니다.

fetch("url", {
  method: "POST",
  headers,
  body: JSON.stringify(product),
});

이런 식으로 url 다음 인자로 옵션을 줄 수 있습니다.

[1-2] 실습

오타(selectedOptions vs selectedOption 또는 ID vs Id 또는 option vs optiom 등등)와

수많은 버그의 난관을 헤쳐나가 만든 쇼핑몰..

제가 이디어츠인가봅니다.

오탈자 하나에 1시간 날려먹어서 눈물이 좔좔 나네요.

실습을 진행하다가 이 짤이 생각나서.. 조용히 가지고 와본…

---

출처

프로그래머스