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으로 변환 가능.
• 더 직관적이고 간결한 문법 : 코드 가독성이 높음.

fetch(url, options)

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

GET 요청

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 요청

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() 등)를 사용해야 합니다.

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 사용

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 요청

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 요청

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)
  • 연결이 유지되는 동안 빠르고 효율적인 데이터 전송 가능.
• 낮은 대기 시간
  • 실시간 애플리케이션(채팅, 게임 등)에 적합.

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");
};