javascript-examples/doc/14_네트워크_통신.md

# 네트워크 통신

* fetch:
    최신 HTTP 요청 처리 방식으로 간단하고 Promise 기반이며, 대부분의 API 호출에 적합.
* XMLHttpRequest:
    오래된 HTTP 요청 방식으로 여전히 지원되지만, 가독성과 유지보수 측면에서 권장되지 않음.
* WebSocket:
    서버와 클라이언트 간 실시간 양방향 통신을 처리하며, 채팅 애플리케이션, 게임, 실시간 알림 등에 적합.

필요에 따라 단방향 API 호출에는 fetch를, 실시간 데이터 통신에는 WebSocket을 사용하는 것이 가장 적합합니다.

## fetch API

fetch는 네트워크 요청을 보내고 응답을 처리하기 위한 최신 JavaScript API입니다.
이전의 XMLHttpRequest보다 간결하고 Promise 기반으로 작성되어 비동기 처리가 더 쉽습니다.

* Promise 기반 : .then()과 async/await를 사용하여 비동기 요청을 처리.
* JSON 및 텍스트 처리 간편 : 응답 데이터를 간편하게 JSON으로 변환 가능.
* 더 직관적이고 간결한 문법 : 코드 가독성이 높음.

```javascript
fetch(url, options)
```
* url: 요청을 보낼 URL을 지정합니다.
* options (선택 사항): 요청에 대한 추가적인 설정을 지정할 수 있는 객체입니다. 예를 들어, method, headers, body 등을 설정할 수 있습니다.

### 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("Fetch error:", error));
```
* then(): Promise 객체가 성공적으로 처리되었을 때 실행될 함수를 지정합니다.
* catch(): Promise가 실패했을 때 실행될 함수를 지정합니다.

### POST 요청
```javascript
fetch("https://api.example.com/data", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({ name: "Alice", age: 25 }),
})
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error("Fetch error:", error));
```

### Response 객체
Fetch API를 통해 네트워크 요청을 보내면, 서버에서 받은 응답은 Response 객체라는 형태로 제공됩니다. Response 객체는 HTTP 요청에 대한 메타데이터(예: 상태 코드, 헤더 등)와 응답 본문을 담고 있습니다.

#### 주요 속성
* ok: Boolean 값으로, 응답이 성공적이면 true, 실패하면 false를 반환합니다. (200-299 상태 코드 범위)
* status: HTTP 상태 코드를 나타냅니다. (예: 200, 404, 500)
* statusText: 상태 코드에 대한 텍스트 설명입니다. (예: "OK", "Not Found")
* headers: 응답 헤더를 나타내는 Headers 객체입니다.
* url: 응답을 받은 URL입니다.
* body: 응답 본문을 나타내는 ReadableStream입니다.

#### 주요 메서드
* json(): 응답 본문을 JSON 객체로 파싱하여 Promise를 반환합니다.
* text(): 응답 본문을 문자열로 변환하여 Promise를 반환합니다.
* blob(): 응답 본문을 Blob 객체로 변환하여 Promise를 반환합니다.
* arrayBuffer(): 응답 본문을 ArrayBuffer 객체로 변환하여 Promise를 반환합니다.
* formData(): 응답 본문을 FormData 객체로 변환하여 Promise를 반환합니다.
* clone(): Response 객체를 복사합니다.

#### Response 객체 활용 시 주의사항
* 응답 상태 확인: ok 속성과 status 속성을 확인하여 응답이 성공적인지 확인해야 합니다.
* 응답 형식 파악: 서버에서 보낸 응답의 Content-Type 헤더를 확인하여 적절한 메서드(json(), text(), blob() 등)를 사용해야 합니다.

```javascript
const form = document.getElementById('myForm');
const fileInput = document.getElementById('fileInput');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const formData = new FormData();
    formData.append('file', fileInput.files[0]);

    fetch('https://your-server-endpoint', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text(); // 서버에서 보낸 응답을 텍스트로 파싱
    })
    .then(data => {
        console.log('Success:', data);
    })
    .catch(error => {
        console.error('Error:', error);
    });
});
```
#### async/await을 이용한 Fetch API 사용
```javascript
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();
```

## XMLHttpRequest
XMLHttpRequest는 자바스크립트의 오래된 네트워크 요청 API입니다.
AJAX 기술의 핵심 요소로, 웹 애플리케이션에서 서버와 비동기적으로 데이터를 교환할 수 있게 해줍니다.

* 오래된 기술
    - 2000년대 초반부터 사용된 API.
    - 아직도 일부 프로젝트에서 사용되지만, 새로운 프로젝트에는 fetch를 권장.
* 비교적 복잡한 문법
    - 이벤트 기반 방식으로 동작하여 코드가 장황해질 수 있음.

### GET 요청
```javascript
const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText)); // JSON 데이터 처리
  } else {
    console.error("Request failed with status:", xhr.status);
  }
};

xhr.onerror = function () {
  console.error("Network error occurred");
};

xhr.send();
```
### POST 요청

```javascript
const xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/data", true);
xhr.setRequestHeader("Content-Type", "application/json");

xhr.onload = function () {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};

xhr.onerror = function () {
  console.error("Network error occurred");
};

xhr.send(JSON.stringify({ name: "Alice", age: 25 }));
```

## WebSocket
WebSocket은 서버와 클라이언트 간의 양방향, 실시간 통신을 위한 프로토콜입니다.
HTTP는 요청-응답 기반으로 작동하지만, WebSocket은 연결이 유지되면서 데이터를 주고받을 수 있습니다.

* 양방향 통신
    - 클라이언트와 서버가 서로 데이터를 실시간으로 주고받을 수 있음.
* 상태 유지(Connection)
    - 연결이 유지되는 동안 빠르고 효율적인 데이터 전송 가능.
* 낮은 대기 시간
    - 실시간 애플리케이션(채팅, 게임 등)에 적합.

```javascript
const socket = new WebSocket("wss://example.com/socket");

// 연결 성공 시 호출
socket.onopen = function () {
  console.log("WebSocket connection established");
  socket.send("Hello, Server!");
};

// 메시지 수신 시 호출
socket.onmessage = function (event) {
  console.log("Message from server:", event.data);
};

// 에러 발생 시 호출
socket.onerror = function (error) {
  console.error("WebSocket error:", error);
};

// 연결 종료 시 호출
socket.onclose = function () {
  console.log("WebSocket connection closed");
};
```