자바스크립트에서 fetch() 메서드의 사용법은 무엇인가요?

Q1: fetch() 메서드란 무엇인가요?
A1: fetch()는 JavaScript에서 네트워크 리소스(예: API)로부터 비동기적으로 데이터를 요청할 때 사용하는 함수입니다. Promise를 반환하여 비동기 처리에 적합합니다.

---

Q2: fetch()를 기본적으로 어떻게 사용하나요?
A2: 가장 간단한 형태는 URL만 전달하는 방법입니다.
```javascript
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('에러 발생:', error));
```
이 코드는 해당 URL에서 데이터를 받아 JSON 형태로 변환한 후 출력합니다.

---

Q3: fetch()의 주요 인자는 무엇인가요?
A3: fetch(url, options) 형태로 사용하며,
- `url`: 요청을 보낼 주소 (필수)
- `options` (선택): HTTP 메서드, 헤더, 바디, 모드, 캐시 정책 등 요청 설정을 담은 객체입니다.

---

Q4: HTTP 메서드를 지정하려면 어떻게 하나요?
A4: options 객체 내에 `method`를 명시합니다. 예: POST 요청
```javascript
fetch('https://api.example.com/data', {
method: 'POST',
body: JSON.stringify({key: 'value'}),
headers: {
'Content-Type': 'application/json'
}
});
```

---

Q5: fetch()에서 응답을 처리하는 방법은?
A5: fetch()가 반환하는 Promise는 HTTP 응답을 나타내는 `Response` 객체를 줍니다.
이 객체에서 `.json()`, `.text()`, `.blob()` 등 메서드로 데이터를 파싱할 수 있습니다.
```javascript
fetch(url)
.then(response => {
if (!response.ok) throw new Error('네트워크 응답 실패');
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error(error));
```

---

Q6: fetch()에서 에러 처리는 어떻게 하나요?
A6: 네트워크 실패 등의 경우 fetch Promise가 reject됩니다.
또한 HTTP 상태 코드가 200번대가 아닌 경우는 reject되지 않으므로 직접 체크해야 합니다.
```javascript
fetch(url)
.then(response => {
if (!response.ok) throw new Error('HTTP 에러: ' + response.status);
return response.json();
})
.catch(error => console.error('Fetch 실패:', error)); ```

---

Q7: POST 요청 시 데이터를 보내는 법은?
A7: `method: 'POST'`, `body`에 문자열화한 데이터를 넣고, 적절한 Content-Type 헤더를 지정합니다.
```javascript
fetch(url, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({name: 'John', age: 30})
});
```

---

Q8: fetch() 요청에 헤더를 추가하려면?
A8: options의 `headers` 필드에 객체 형태로 헤더를 설정합니다.
예:
```javascript
fetch(url, {
headers: {
'Authorization': 'Bearer token값',
'Accept': 'application/json'
}
});
```

---

Q9: fetch()에서 CORS 문제를 해결하려면?
A9: fetch 요청 시 mode 옵션을 조정할 수 있습니다. `mode: 'cors' | 'no-cors' | 'same-origin'` 중 선택하며, 서버가 CORS를 지원해야 합니다. 예:
```javascript
fetch(url, {mode: 'cors'});
```

---

Q10: fetch()에서 타임아웃 처리는 어떻게 하나요?
A10: fetch에 타임아웃 옵션은 없지만, `AbortController`를 사용해 타임아웃을 구현할 수 있습니다.
```javascript
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000);

fetch(url, {signal: controller.signal})
.then(response => response.json())
.catch(error => {
if (error.name === 'AbortError') console.log('요청 타임아웃');
else console.error(error);
})
.finally(() => clearTimeout(timeoutId));
```

---

요약:
- `fetch(url[, options])`로 호출하며 Promise 반환
- 응답의 `ok` 및 상태 코드를 체크하고 `.json()`, `.text()` 등을 통해 데이터 파싱
- HTTP 메서드, 헤더, 바디 지정 가능
- 에러 및 네트워크 실패 처리 필수
- `AbortController`로 요청 중단 가능

이렇게 fetch() 메서드를 사용하면 간단하고 유연하게 HTTP 요청을 처리할 수 있습니다.

`fetch()` 메서드는 JavaScript에서 HTTP 요청을 보내고 응답을 받을 수 있는 기능을 제공하는 API입니다.

이 메서드는 Promise 기반으로 작동하여 비동기적으로 데이터를 가져오거나 보낼 수 있습니다.

`fetch()`는 주로 RESTful API와 상호작용할 때 사용되며, 다양한 옵션을 통해 요청의 세부 사항을 조정할 수 있습니다.

기본 사용법 `fetch()` 메서드는 URL을 인자로 받아 HTTP GET 요청을 보냅니다.

기본적인 사용법은 다음과 같습니다: ```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); }); ``` 위의 코드에서 `fetch()`는 지정된 URL에 GET 요청을 보냅니다.

응답이 오면, `response.ok` 속성을 사용하여 요청이 성공했는지 확인하고, 성공적이라면 `response.json()` 메서드를 호출하여 JSON 형식으로 변환합니다.

이후 변환된 데이터를 사용할 수 있습니다.

HTTP 메서드 지정 `fetch()` 메서드는 기본적으로 GET 요청을 수행하지만, 다른 HTTP 메서드(POST, PUT, DELETE 등)를 사용하려면 두 번째 인자로 옵션 객체를 전달해야 합니다.

예를 들어, POST 요청을 보내는 방법은 다음과 같습니다: ```javascript fetch('https://api.example.com/data', { method: 'POST', // HTTP 메서드 headers: { 'Content-Type': 'application/json' // 요청의 콘텐츠 타입 }, body: JSON.stringify({ key: 'value' }) // 전송할 데이터 }) .then(response => response.json()) .then(data => { console.log('Success:', data); }) .catch(error => { console.error('Error:', error); }); ``` 이 예제에서는 `method` 속성을 사용하여 POST 요청을 지정하고, `headers` 속성을 통해 요청의 콘텐츠 타입을 JSON으로 설정합니다.

`body` 속성에는 전송할 데이터를 JSON 문자열로 변환하여 포함합니다.

요청 및 응답 처리 `fetch()` 메서드는 다양한 응답 형식을 처리할 수 있습니다.

JSON 외에도 텍스트, Blob, FormData 등 다양한 형식으로 응답을 받을 수 있습니다.

예를 들어, 텍스트 응답을 처리하는 방법은 다음과 같습니다: ```javascript fetch('https://api.example.com/text') .then(response => response.text()) // 텍스트 형식으로 변환 .then(text => { console.log(text); }) .catch(error => { console.error('Error:', error); }); ``` 에러 처리 `fetch()` 메서드는 네트워크 오류가 발생할 경우에만 Promise를 reject합니다.

HTTP 오류(예: 404, 500 등)는 성공적인 응답으로 간주되므로, 이를 처리하기 위해서는 `response.ok`를 확인해야 합니다.

위의 예제에서처럼 이를 통해 에러를 처리할 수 있습니다.

CORS(Cross-Origin Resource Sharing) `fetch()` 메서드를 사용할 때 CORS 정책에 주의해야 합니다.

다른 도메인에서 요청을 보낼 경우, 서버가 CORS 헤더를 설정해야 합니다.

그렇지 않으면 브라우저에서 요청이 차단됩니다.

CORS 관련 오류는 개발자 도구의 콘솔에서 확인할 수 있습니다.

AbortController를 사용한 요청 취소 `fetch()` 요청은 `AbortController`를 사용하여 취소할 수 있습니다.

이는 특히 긴 요청이나 사용자가 페이지를 떠날 때 요청을 중단하고자 할 때 유용합니다.

다음은 `AbortController`를 사용하는 예제입니다: ```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('Error:', error); } }); // 요청을 취소하고 싶을 때 controller.abort(); ``` 결론 `fetch()` 메서드는 JavaScript에서 HTTP 요청을 간편하게 처리할 수 있는 강력한 도구입니다.

Promise 기반으로 비동기 처리를 지원하며, 다양한 HTTP 메서드와 응답 형식을 처리할 수 있습니다.

CORS와 같은 보안 정책에 주의하면서, 필요에 따라 요청을 취소하는 기능도 활용할 수 있습니다.

이러한 기능들을 잘 활용하면, 웹 애플리케이션에서 API와의 상호작용을 효율적으로 관리할 수 있습니다.