2024-10-23

fetch란?

HTML에서 `fetch`는 JavaScript를 사용하여 서버와 비동기적으로 데이터를 주고받는 기능을 의미합니다. `fetch` API는 HTTP 요청을 보내고, 서버에서 응답을 받기 위한 최신 방법으로, 주로 AJAX 방식과 비슷한 역할을 하지만 더 단순하고 직관적인 문법을 제공합니다.

`fetch`의 주요 특징은 다음과 같습니다:

1. 비동기 처리:fetch는 비동기적으로 동작하므로, 페이지를 다시 로드하지 않고도 서버에서 데이터를 가져올 수 있습니다.
2. Promise 기반:fetch는 Promise 객체를 반환하기 때문에, 요청이 완료되면 `.then()`이나 `.catch()`로 처리할 수 있습니다.
3. 직관적인 문법: 기존의 XMLHttpRequest에 비해 문법이 간결하고 이해하기 쉽습니다.

간단한 `fetch` 예시:

fetch('https://api.example.com/data') // 서버로 GET 요청을 보냄
  .then(response => response.json())   // 응답을 JSON 형식으로 변환
  .then(data => console.log(data))     // 데이터 출력
  .catch(error => console.error('Error:', error));  // 오류 처리

이 코드에서는 `fetch`가 서버에 요청을 보내고, 응답을 받아서 JSON 형식으로 변환한 후 데이터를 출력합니다. `catch`는 요청 중에 발생한 오류를 처리합니다.

이 API는 다양한 HTTP 메서드(`GET`, `POST`, `PUT`, `DELETE` 등)를 사용할 수 있어, 데이터를 가져오거나 서버에 데이터를 전송할 때 모두 유용합니다.

 

간단히 말하면, 'fetch'는 인터넷을 통해 데이터를 요청하고 받아오는 과정을 의미합니다.

 

JSON이란?

JSON(JavaScript Object Notation)은 데이터를 저장하고 교환하기 위한 가벼운 데이터 형식입니다. 주로 서버와 클라이언트 간에 데이터를 주고받을 때 사용됩니다. JSON은 사람이 읽기 쉬운 텍스트 형식으로, JavaScript 객체 표기법을 기반으로 만들어졌지만, 대부분의 프로그래밍 언어에서 쉽게 파싱하고 생성할 수 있습니다.

JSON의 기본 구조

JSON은 두 가지 주요 데이터 구조로 구성됩니다:

1. 객체(Object): 키-값 쌍으로 이루어진 데이터 구조.
2. 배열(Array): 값들의 목록.

JSON 예시

{
  "name": "John",
  "age": 30,
  "isStudent": false,
  "courses": ["Math", "Science", "History"],
  "address": {
    "city": "New York",
    "zipCode": "10001"
  }
}

• 객체: { "key": "value" } 형태로 데이터를 저장합니다.
• 배열: [ ]로 여러 값을 나열합니다.
• 값의 종류: 문자열, 숫자, 불리언, 배열, 객체 등이 가능합니다.

JSON의 특징

• 텍스트 기반: 사람도 읽을 수 있는 형식이며, 가볍고 직관적입니다.
• 언어 독립적: JSON은 특정 프로그래밍 언어에 종속되지 않으며, 거의 모든 언어에서 쉽게 사용 가능합니다.
• API 데이터 포맷: 웹 애플리케이션에서 서버와 클라이언트 간 데이터를 주고받을 때 주로 사용됩니다.

JSON은 XML보다 단순하고 가볍기 때문에 현대 웹 개발에서 데이터를 주고받는 표준 형식으로 많이 사용됩니다.

 

API에 대해

API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것 / 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재합니다.

 

GET → 통상적으로! 데이터 조회(Read)를 요청할 때

예) 영화 목록 조회

 

*POST → 통상적으로! 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때

예) 회원 가입, 회원 탈퇴, 비밀번호 수정

API의 정의

API(Application Programming Interface)는 소프트웨어 애플리케이션 간의 상호작용을 가능하게 하는 인터페이스입니다. API는 한 프로그램이 다른 프로그램의 기능을 사용할 수 있도록 규칙과 프로토콜을 정의한 것입니다.

API의 주요 역할

1. 데이터 교환: 두 시스템이 데이터를 주고받을 수 있게 도와줍니다. 예를 들어, 웹사이트가 외부 서비스(API)에서 데이터를 가져와 사용자에게 보여줄 수 있습니다.
2. 기능 사용: 특정 기능이나 서비스를 외부 애플리케이션에서 사용할 수 있도록 허용합니다. 예를 들어, 결제 시스템(API)를 이용해 쇼핑몰에서 결제를 처리할 수 있습니다.

API의 종류

• 웹 API: 서버와 클라이언트 간의 데이터 통신을 가능하게 하며, 주로 HTTP(S)를 통해 데이터를 주고받습니다. REST API, SOAP API 등이 있습니다.
• 라이브러리 API: 프로그램이 특정 라이브러리의 기능을 호출할 수 있도록 제공됩니다.
• 운영 체제 API: 운영 체제에서 제공하는 기능(파일 시스템, 네트워크 등)을 프로그램에서 사용할 수 있습니다.