fetch

fetch : 요청과 응답 등의 요소를 JavaScript에서 접근하고 조작할 수 있는 인터페이스를 제공, 네트워크의 리소스를 쉽게 비동기적으로 가져올 수도 있다.

기본 요청 방식

fetch('http://example.com/movies.json')
  .then((response) => response.json())
  .then((data) => console.log(data));

네트워크에서 JSON 파일을 가져와서 콘솔에 출력,
가장 단순한 형태의 fetch()는 가져오고자 하는 리소스의 경로를 나타내는 하나의 인수만 받는다.
응답은 Response 객체로 표현되며, 직접 JSON 응답 본문을 받을 수는 없다.
JSON 본문 콘텐츠를 추출하기 위해서는 json() 메서드를 호출해야 한다.

JSON 데이터 업로드
fetch()를 사용하면 JSON 인코딩된 데이터를 POST 요청에 포함할 수 있습니다.

const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // 또는 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then((response) => response.json())
.then((data) => {
  console.log('성공:', data);
})
.catch((error) => {
  console.error('실패:', error);
});

파일 업로드
fetch()와 <input type="file"> 입력 칸 요소, FormData()를 사용해서 파일을 업로드할 수 있습니다.

const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');

formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);

fetch('https://example.com/profile/avatar', {
  method: 'PUT',
  body: formData,
})
.then((response) => response.json())
.then((result) => {
  console.log('성공:', result);
})
.catch((error) => {
  console.error('실패:', error);
});

https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch#%EC%9A%94%EC%B2%AD_%EC%98%B5%EC%85%98_%EC%A0%9C%EA%B3%B5

위 사이트를 통해 fetch에 대한 정보에 대해 찾아보았다.
코드에 대한 설명이 이해가 되지 않는 부분들이 많았는데 다른 블로그를 통해 부족한 부분들을 채울 수 있었다.

https://velog.io/@sham/Fetch%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

then, catch 보다 async, await / try, catch를 사용하는 것이 최신 문법이며 프로젝트 간에도 async, await를 주로 사용했다.