JavaScript에서 'fetch API'는 어떻게 사용하나요?

JavaScript에서 fetch API는 어떻게 사용하나요?

Q1: fetch API란 무엇인가요?
A1: fetch API는 JavaScript에서 네트워크 요청을 보내고 응답을 처리하기 위한 최신 비동기 인터페이스입니다. XMLHttpRequest보다 간결하고 Promise 기반으로 작동하여 비동기 처리를 쉽게 합니다.

Q2: fetch API를 기본적으로 어떻게 사용하나요?
A2: 가장 기본적인 사용법은 다음과 같습니다:
```javascript
fetch('https://api.example.com/data')
.then(response => response.json()) // 응답을 JSON으로 파싱
.then(data => console.log(data)) // 파싱된 데이터 사용
.catch(error => console.error('에러 발생:', error));
```
이 코드는 지정된 URL에 GET 요청을 보내고 응답을 JSON으로 변환하여 출력합니다.

Q3: fetch API로 POST 요청을 보내려면 어떻게 하나요?
A3: POST 요청을 보낼 때는 `fetch` 함수의 두 번째 인자로 옵션 객체를 전달합니다:
```javascript
fetch('https://api.example.com/data', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: '홍길동', age: 30 })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('에러 발생:', error));
```
`method`는 HTTP 메서드, `headers`는 요청 헤더, `body`는 서버로 보낼 데이터입니다.

Q4: fetch API에서 응답 상태 코드는 어떻게 확인하나요?
A4: `fetch`의 응답 객체에는 `status` 속성이 있습니다. 다음과 같이 상태를 검사할 수 있습니다:
```javascript
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) { // status가 200~299 범위인지 확인
throw new Error('네트워크 응답이 정상적이지 않음: ' + response.status);
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('에러 발생:', error)); ```

Q5: fetch로 이미지나 텍스트 등 다른 형식의 응답을 받으려면 어떻게 해야 하나요?
A5: 응답 객체에는 JSON 외에도 다양한 읽기 메서드가 있습니다.
- 텍스트: `response.text()`
- Blob (이미지, 파일): `response.blob()`
- ArrayBuffer (바이너리 데이터): `response.arrayBuffer()`
예:
```javascript
fetch('https://example.com/image.png')
.then(response => response.blob())
.then(imageBlob => {
const imgURL = URL.createObjectURL(imageBlob);
document.querySelector('img').src = imgURL;
});
```

Q6: fetch API는 비동기 함수(async/await)와 함께 사용할 수 있나요?
A6: 네, 가능합니다. 예시:
```javascript
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) throw new Error('네트워크 응답 비정상');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('에러 발생:', error);
}
}
getData();
```

Q7: fetch API의 제한 사항은 무엇인가요?
A7:
- CORS 정책에 의해 동일 출처 정책이 적용됩니다.
- HTTP 오류(예: 404, 500)도 Promise가 reject되지 않고 정상적으로 resolve됩니다. 따라서 상태 코드를 직접 수동 검사해야 합니다.
- Internet Explorer에서는 지원하지 않습니다.

---

fetch API는 가독성이 좋고 사용하기 편리한 최신 네트워크 요청 API로, Promise나 async/await와 함께 사용하면 강력한 비동기 처리가 가능합니다.

`fetch API`는 JavaScript에서 HTTP 요청을 보내고 응답을 받을 수 있는 현대적인 방법입니다. 이 API는 <a href='https://sangseek.com/sangseeks/Promise 기반/ko'>Promise 기반</a>으로 설계되어 있어 비동기 작업을 쉽게 처리할 수 있습니다. `fetch`는 주로 RESTful API와 상호작용할 때 사용되며, JSON 데이터를 주고받는 데 매우 유용합니다. 기본 사용법 `fetch` 함수는 URL을 인자로 받아 HTTP 요청을 보냅니다. 기본적으로 GET 요청을 수행하며, 추가적인 옵션을 통해 POST, PUT, DELETE 등의 요청도 할 수 있습니다. ```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); }); ``` POST 요청 보내기 POST 요청을 보내려면 `fetch`의 두 번째 인자로 옵션 객체를 전달해야 합니다. 이 객체에는 HTTP 메서드, 헤더, 바디 등의 정보를 포함할 수 있습니다. ```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) // JSON 문자열로 변환 }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); }); ``` PUT 및 DELETE 요청 PUT 및 DELETE 요청도 POST 요청과 유사하게 처리할 수 있습니다. 메서드만 변경하면 됩니다. ```javascript // PUT 요청 예시 fetch('https://api.example.com/data/1', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'new value' }) }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); // DELETE 요청 예시 fetch('https://api.example.com/data/1', { method: 'DELETE' }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` 요청 취소하기 `fetch` API는 기본적으로 요청을 취소하는 기능을 제공하지 않지만, `<a href='https://sangseek.com/sangseeks/AbortController/ko'>AbortController</a>`를 사용하여 요청을 취소할 수 있습니다. ```javascript const controller = new AbortController(); const signal = controller.signal; fetch('https://api.example.com/data', { signal }) .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => { if (error.name === 'AbortError') { console.log('Fetch aborted'); } else { console.error('Fetch error:', error); } }); // 요청 취소 controller.abort(); ``` 오류 처리 `fetch`는 네트워크 오류가 발생했을 때만 reject됩니다. HTTP 오류 상태(예: 404, 500 등)는 reject되지 않으므로, 응답 객체의 `ok` 속성을 확인하여 오류를 처리해야 합니다. CORS (Cross-Origin Resource Sharing) `fetch` API를 사용할 때 <a href='https://sangseek.com/sangseeks/CORS 정책/ko'>CORS 정책</a>에 주의해야 합니다. 다른 출처의 리소스에 접근하려면 서버에서 CORS 헤더를 설정해야 합니다. 클라이언트 측에서는 특별한 설정 없이도 `fetch`를 사용할 수 있지만, 서버 측에서 적절한 CORS 정책을 설정해야 합니다. 결론 `fetch API`는 JavaScript에서 HTTP 요청을 처리하는 강력하고 유연한 도구입니다. Promise 기반으로 비동기 처리를 쉽게 할 수 있으며, 다양한 HTTP 메서드를 지원합니다. 또한, `AbortController`를 사용하여 요청을 취소할 수 있는 기능도 제공하여 더욱 유용하게 사용할 수 있습니다. 이러한 특징 덕분에 `fetch API`는 현대 웹 개발에서 널리 사용되고 있습니다.