[카카오테크 부트캠프] Fetch API 기본 개념

Fetch API의 역사와 등장 배경

• Fetch API는 XMLHttpRequest 의 복잡성을 해결하기 위해 등장한 최신 웹 API로, 더 단순하고 유연한 방식으로 HTTP 요청을 처리할 수 있게 합니다.
• AJAX 요청의 간편화를 위해 설계되었으며, Promise 기반으로 비동기 처리를 더욱 쉽게 합니다.

기본 사용법 및 문법

fetch("https://api.example.com/data")
    .then((response) => response.json())
    .then((data) => console.log("Result:", data))
    .catch((error) => console.error("Error:", error));
// fetch 함수는 URL을 인수로 받아 HTTP 요청을 생성하고, Promise를 반환한다.

HTTP란?

• HTTP는 웹 브라우저와 서버 간에 데이터를 주고받기 위한 프로토콜로, 클라이언트-서버 모델에서 가장 일반적으로 사용되는 프로토콜입니다.

HTTP의 주요 특징

1. 상태 없음 (Stateless):

• HTTP는 상태를 저장하지 않는 프로토콜로, 각 요청은 서버에 독립적으로 처리됩니다. 이는 서버가 클라이언트의 이전 상태를 기억하지 않고, 각 요청을 독립적으로 처리한다는 것을 의미합니다.

2. 상태 코드 (Status Code):

• HTTP 응답에서는 상태 코드를 사용하여 요청의 성공 여부를 나타냅니다.
  • 2xx: 성공을 나타내는 코드 (예: 200 OK)
  • 3xx: 리다이렉션을 나타내는 코드 (예: 301 Moved Permanently)
  • 4xx: 클라이언트 오류를 나타내는 코드 (예: 404 Not Found)
  • 5xx: 서버 오류를 나타내는 코드 (예: 500 Internal Server Error)

3. 헤더 (Headers):

• HTTP 요청과 응답은 헤더를 사용하여 추가적인 정보를 전송할 수 있습니다.
• 예를 들어, Content-Type , Authorization , Accept 등의 헤더는 데이터의 타입, 인증 정보, 클라이언트가 받아들일 수 있는 데이터 타입 등을 지정하는 데 사용됩니다.

4. 본문 (Body):

• 몇 가지 HTTP 메소드는 요청 본문에 데이터를 담아 서버로 전송할 수 있습니다. 주로 POST, PUT 메소드에서 사용되며, 데이터는 일반적으로 JSON 형식으로 전송됩니다.

XMLHttpRequest란?

• XMLHttpRequest(XHR) 는 웹 애플리케이션에서 서버와 비동기 통신을 위해 사용되는 자바스크립트 API입니다. 초기에는 Ajax 기술의 핵심 요소로 개발되었습니다.

XMLHttpRequest의 복잡성

• 상태 관리: XHR 객체의 응답에 대한 처리는 별도의 이벤트 핸들러를 통해 관리해야 합니다.
• 비동기 처리: 이벤트 핸들러에 콜백 함수를 사용하여 비동기적으로 요청을 처리하게 되며, 이에 따라서 콜백 지옥 문제가 발생할 수 있습니다.
• 요청 설정: HTTP 요청의 세부 설정(메소드, 헤더 등)이 더 복잡하게 다루어져야 합니다.
• 비직관적인 요청 설정: 요청 설정이 비직관적인 문제가 발생할 수 있습니다.

Ajax란?

• Ajax는 비동기적 웹 애플리케이션 개발을 위한 기법으로, XMLHttpRequest 혹은 Fetch API를 사용하여 클라이언트와 서버간의 데이터를 동적으로 교환하는 기술입니다.

Ajax의 특징

• 비동기 통신: 페이지 새로고침 없이 데이터를 받아오거나 전송할 수 있으며, 이를 통해 페이지 새로고침 없이 페이지의 일부분을 변경할 수 있습니다.
• JSON, XML 데이터 처리: 주로 JSON 혹은 XML 형식의 데이터를 주고받는 데 사용됩니다.

Content-Type 종류

• Content-Type은 HTTP 헤더의 일종으로, 요청이나 응답 메시지의 본문의 미디어 타입을 지정합니다. 이를 통해 클라이언트와 서버는 주고받는 데이터의 형식을 명확히 알 수 있습니다.
• application/json: JSON 형식의 데이터를 전송할 때 사용됩니다. 대부분의 API에서는 JSON을 주고받는 데 많이 사용됩니다.
• text/plain: 일반 텍스트 데이터를 전송할 때 사용됩니다. 특별한 형식이나 구조 없이 단순한 텍스트를 전송할 때 사용됩니다.
• multipart/form-data: 파일 업로드와 같이 여러 종류의 데이터를 한번에 전송할 때 사용됩니다. 주로 HTML 폼에서 파일 업로드를 할 때나, API에서 파일을 업로드할 때 많이 사용됩니다.
• application/x-www-form-urlencoded: HTML 폼 데이터를 인코딩하여 전송할 때 사용됩니다. key=value 쌍으로 데이터를 전송할 때 사용됩니다.

multipart/form-data와 application/x-www-form-urlencoded의 차이점

application/x-www-form-urlencoded

• 이 방식은 폼 데이터를 인코딩하여 URL 쿼리 문자열 형태로 서버로 전송합니다.
• 각각의 필드와 값은 key=value 형식으로 인코딩되며, 각 쌍은 & 기호로 구분됩니다.
• 주로 작은 데이터나 텍스트 데이터를 전송할 때 사용됩니다.
• 파일 업로드를 지원하지 않고, 오직 텍스트 데이터만을 전송할 수 있습니다.

multipart/form-data

• 이 방식은 여러 종류의 데이터와 파일을 동시에 서버로 전송할 수 있습니다.
• 각 필드가 별도의 파트로 구분되어 전송됩니다.
• 파일 업로드에 적합하며, 대용량 데이터나 다양한 유형의 데이터를 전송할 때 사용됩니다.

Fetch API의 주요 메소드

HTTP 메소드의 개념

HTTP(HyperText Transfer Protocol) 메소드는 클라이언트가 서버에게 요청을 보낼 때 어떤 동작을 원하는지를 지정하는 방식입니다.

• GET: 서버로부터 데이터를 요청합니다. 데이터를 조회할 때 사용됩니다.
• POST: 서버에 새로운 데이터를 추가합니다. 데이터를 생성할 때 사용됩니다.
• PUT: 서버의 데이터를 업데이트합니다. 리소스를 대체할 때 사용됩니다.
• DELETE: 서버의 데이터를 삭제합니다.
• PATCH: 리소스의 일부를 수정합니다. PUT과 달리 일부 필드만 업데이트할 때 사용됩니다.
• OPTIONS: 서버가 지원하는 HTTP 메소드를 확인합니다.
• HEAD: GET 요청과 유사하지만, 응답 본문(body)을 반환하지 않고
  헤더만 반환합니다.