Fetch API란 무엇인가요?

Q1: Fetch API란 무엇인가요?
A1: Fetch API는 웹 브라우저에서 네트워크 요청을 쉽게 만들고 처리할 수 있게 해주는 최신 JavaScript 인터페이스입니다. 주로 HTTP 요청을 비동기적으로 보내고, 응답을 받아 처리하는 데 사용됩니다.

Q2: 기존 XMLHttpRequest와 Fetch API의 차이점은 무엇인가요?
A2: Fetch API는 Promise 기반이라 비동기 처리가 훨씬 간결하고 직관적입니다. 반면 XMLHttpRequest는 콜백 방식으로 작성해야 해서 코드가 복잡할 수 있습니다. 또한 Fetch는 더 나은 모듈화와 가독성을 제공합니다.

Q3: Fetch API를 어떻게 사용하나요?
A3: 기본 사용법은 `fetch(url)`로 시작하며, 이 함수는 Promise를 반환합니다. 예를 들어,
```javascript
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
```

Q4: Fetch API가 반환하는 응답 객체(Response)는 무엇인가요?
A4: Response 객체는 서버로부터 받은 응답을 나타내며, 상태 코드(status), 헤더(headers), 응답 본문(body) 등의 정보를 포함합니다. 응답 본문을 읽기 위해 `response.json()`, `response.text()` 같은 메서드를 사용합니다.

Q5: Fetch API로 POST 요청을 보내려면 어떻게 해야 하나요?
A5: `fetch` 함수의 두 번째 인자로 옵션 객체를 전달하여 HTTP 메서드, 헤더, 그리고 바디를 설정할 수 있습니다.
예:
```javascript fetch('https://api.example.com/data', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name: 'John', age: 30})
})
.then(response => response.json())
.then(data => console.log(data));
```

Q6: Fetch API의 장점은 무엇인가요?
A6: 간결한 코드 작성, 비동기 Promise 지원, 스트림과 같은 최신 웹 기술 통합, 다양한 요청과 응답 타입 지원, 그리고 네트워크 요청에 대한 더 나은 제어가 가능하다는 점입니다.

Q7: Fetch API의 단점이나 주의할 점은 뭐가 있나요?
A7: 자동으로 HTTP 에러 상태 코드(예: 404, 500)를 reject하지 않아서, 직접 상태를 확인해야 하며, 일부 구형 브라우저에서는 지원하지 않을 수 있어 폴리필이 필요할 수 있습니다.

Q8: Fetch API는 CORS와 어떤 관련이 있나요?
A8: Fetch API는 CORS(Cross-Origin Resource Sharing)를 준수합니다. 따라서 다른 도메인으로 요청할 때 서버가 적절한 CORS 헤더를 포함해야 요청이 성공적으로 처리됩니다.

Q9: Fetch API에서 타임아웃을 설정할 수 있나요?
A9: Fetch API 자체는 직접 타임아웃 설정 기능이 없으나, `AbortController`를 이용해 요청을 취소하거나, 별도의 타임아웃 로직을 구현할 수 있습니다.

Q10: Fetch API가 지원하는 데이터 타입에는 어떤 것이 있나요?
A10: 텍스트, JSON, Blob(바이너리), FormData, ArrayBuffer 등을 지원하여 다양한 형식의 요청과 응답 데이터를 처리할 수 있습니다.

Fetch API는 웹 브라우저에서 HTTP 요청을 수행하기 위한 현대적인 JavaScript API입니다.

이 API는 XMLHttpRequest 객체의 대안으로, 더 간결하고 직관적인 방법으로 네트워크 요청을 처리할 수 있게 해줍니다.

Fetch API는 Promise 기반으로 설계되어 있어 비동기 작업을 쉽게 관리할 수 있으며, 코드의 가독성을 높이는 데 기여합니다.

1. 기본 개념 Fetch API는 `fetch()`라는 함수를 통해 사용됩니다.

이 함수는 URL을 인자로 받아 HTTP 요청을 보내고, 그 결과를 Promise 형태로 반환합니다.

기본적인 사용법은 다음과 같습니다: ```javascript fetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); // JSON 형태로 변환 }) .then(data => { console.log(data); // 데이터 처리 }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); }); ```

2. 주요 특징 - Promise 기반 : Fetch API는 비동기 작업을 Promise로 처리하므로, `.then()`과 `.catch()` 메서드를 사용하여 결과를 쉽게 다룰 수 있습니다.

- 더 나은 오류 처리 : Fetch API는 HTTP 오류 상태를 자동으로 처리하지 않으며, `response.ok` 속성을 통해 응답 상태를 확인할 수 있습니다.

이는 개발자가 더 세밀한 오류 처리를 할 수 있게 해줍니다.

- CORS 지원 : Fetch API는 Cross-Origin Resource Sharing(CORS)을 지원하여, 다른 출처의 리소스에 대한 요청을 쉽게 처리할 수 있습니다.

- Stream API와의 통합 : Fetch API는 Response 객체에 대한 스트리밍을 지원하여, 대량의 데이터를 효율적으로 처리할 수 있습니다.



3. 다양한 요청 방식 Fetch API는 GET, POST, PUT, DELETE 등 다양한 HTTP 요청 방식을 지원합니다.

요청 방식을 지정하려면 `fetch()` 함수의 두 번째 인자로 옵션 객체를 전달하면 됩니다.

예를 들어, POST 요청은 다음과 같이 작성할 수 있습니다: ```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) // 전송할 데이터 }) .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error('Error:', error); }); ```

4. Fetch API의 한계 Fetch API는 많은 장점을 가지고 있지만, 몇 가지 한계도 존재합니다: - HTTP 오류 처리 : Fetch API는 네트워크 오류에 대해서는 Promise를 reject하지만, HTTP 상태 코드가 4xx나 5xx인 경우에는 Promise를 resolve합니다.

따라서 응답 상태를 직접 확인해야 합니다.

- AbortController : Fetch API는 요청을 취소하는 기능을 제공하지 않으므로, 요청을 중단하고 싶을 경우 `AbortController`를 사용해야 합니다.

- IE 지원 부족 : Fetch API는 Internet Explorer에서 지원되지 않으므로, 구형 브라우저와의 호환성을 고려해야 할 경우 대체 방법을 찾아야 합니다.



5. Fetch API는 현대 웹 개발에서 HTTP 요청을 처리하기 위한 강력하고 유연한 도구입니다.

Promise 기반의 비동기 처리, 다양한 HTTP 메서드 지원, CORS와의 통합 등 여러 가지 장점을 제공하여 개발자들이 보다 효율적으로 작업할 수 있도록 돕습니다.

그러나 HTTP 오류 처리 및 구형 브라우저 지원과 같은 한계도 존재하므로, 이러한 점을 고려하여 적절하게 활용하는 것이 중요합니다.