💻 fetch

이 글은 fetch에 대해서 다루었습니다.
⚠️ 정리한 내용은 오타나 잘못된 정보가 있을 수 있습니다. 댓글로 알려주시면 감사하겠습니다

📃 오늘 공부한 것

Fetch API

Fetch API를 이용하면 Request나 Response와 같은 HTTP의 파이프라인을 구성하는 요소를 조작하는 것이 가능하다.
비동기 HTTP 요청을 좀 더 쓰기 편하게 해주는 API이며 Promise 기반으로 동작한다.

사용하기

fetch('http://example.com/movies.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });

response.json() 처럼 Response 객체를 얻은 뒤엔 응답을 json으로 바꾸거나 text로 바꾸는 등의 처리를 해주어야 한다.

fetch에서 유념해야할 점

fetch로부터 반환하는 프로미스 객체는 HTTP error 상태를 reject하지 않는다.
- 따라서 response의 status code나 ok를 체크해주는 것이 좋다.

fetch에서의 두 번째 파라미터 적용

const headers = new Headers()

headers.append('x-auth-token', 'TOKEN');

fetch('http://example.com/movies.json',{
  method: 'POST',
  headers,
  body: JSON.stringify(movie)
})

🔥 오늘의 느낀점

fetch api를 이용해서 장바구니를 만들어보았다. 구조를 컴포넌트 단위로 나누고 더미데이터로 기본 데이터를 설정해놓으면서 구성해 나아갔다.👍🏻
이번에도 역시 state, setState, render등의 함수를 기본적으로 사용하였고 계속 꾸준히 눈에 익히고 손으로 작성하다 보니 익숙해진 느낌이다.(과제를 시작하면 다르겠지만..)
DOM을 선택, 탐색, 조작하는 방법도 몰랐기 때문에 하루하루 열심히 살고 있습니다..

딥 다이브 도서 스터디 규칙을 다시 재정립하였고 12장 함수, 13장 스코프, 14장 전역 변수에 대해서 토론, 정리 등을 하였고 확실히 스터디를 하니까 읽었던 개념들이 다시 머리속에서 정리되는 느낌이라 좋았다.🤗
스터디를 한번 했다고 그 개념이 내 것이 된건 아니라고 생각한다. 여러번 다시 반복하면서 체화할 수 있도록 해야겠다.

🗣 오늘의 TMI

과제 언제하죠..?😭

Refer

프로그래머스 데브코스
MDN - Using Fetch

오늘의 내용 정리

데브코스 Day13 fetch