[TIL] API

oaksusu·2024년 3월 13일
0

TIL

목록 보기
10/36
post-thumbnail

0. 주제 선정하게 된 배경 :

API는 지금까지 정리해온 TIL 주제 중 fetch, redux toolkit, useQuery 에서 몇번이나 나온 개념이지만
아직도 머리에 담기지 않고 헷갈리는 부분이 많다.
(아무래도 앞으로 몇번더 주제로 나올것 같다.. 말로 술술 설명할 정도로 이해할때까지 계속 정리할 예정..!!)

1. 제대로 알고 넘어가기 :

1-1. API (Application Programming Interface)란?

소프트웨어 애플리케이션 간의 상호작용*이 가능하게 하는 인터페이스**
두 애플리케이션이 데이터를 주고 받을때 사용하는 규칙

*상호작용 : 데이터 주고 받기, 명령을 전달, 작업을 수행하도록 요청 등

예를 들어,

1) 데이터 요청 및 응답 : 클라이언트가 서버에 데이터를 요청, 서버는 해당 요청에 대한 응답을 보냄

2)  작업 수행 요청 : 클라이언트가 서버에 _특정 작업_*을 수행하도록 요청하고, 서버는 해당 작업을 수행한 후 결과를 클라이언트에게 보냄
(특정작업: 보통 서버 측에서 정의된 함수 또는 프로세스로,
예를 들면: 클라이언트가 파일을 서버에 업로드하려고 할때, 서버는 파일 업로드를 처리하는 함수를 호출해서 파일을 저장함)

3) 이벤트 푸시 : 서버가 클라이언트에게 이벤트 발생을 알리는 방식
(예를 들면 : 채팅 어플에서 새로운 메세지가 도착하면 서버에서 수신자의 클라이언트(=응용프로그램)한테 이벤트 푸시를 해서 수신자가 메세지를 실시간으로 확인할 수 있음 )

4) 상태 변경

**인터페이스(= 접점)

: 두 개 이상의 시스템, 장치 또는 컴포넌트 간에 상호작용할 수 있도록 허용하거나 제공하는 경계나 접점을 의미함

인터페이스 유형

1) 사용자 인터페이스 (UI)
: 사용자와 컴퓨터 또는 기가 간의 상호작용을 가능하게 하는 모든 요소
- GUI, TUI 등

2) 소프트웨어 인터페이스
: 소프트웨어 컴포넌트나 시스템간의 상호작용을 위한 접점
서로 다른 소프트웨어 시스템이나 모듈이 통신하고 상호작용할 수 있도록
- API, 플러그인 인터페이스, 라이브러리 인터페이스 등 

3) 하드웨어 인터페이스
: 하드웨어 장치가 다른 하드웨어나 소프트웨어와 상호작용할 수 있도록 하는 방법
- 포트, 케이블 박스, 버스, USB

1-2. API를 언제 쓰는걸까?

: 상호작용에서 설명한것과 같이
데이터를 요청하고,
작업을 수행하고,
서비스를 호출할때 씀

1) (클라이언트-외부서비스)다른 서비스의 데이터나 기능을 사용해야할 때 :
[예시] Google Maps API를 사용하여 지도를 표시하거나, Twitter API를 사용해서 트윗을 게시하고 검색할때

2) (클라이언트-서버)동일한 시스템 내의 서비스나 데이터 소스간 데이터 요청과 처리 :
[예시] 클라이언트가 서버에 데이터 요청, 서버는 요청에 대한 응답을 제공

3) 서비스 간의 통신할때 : 
[예시] 주문관리 서비스가 사용자 관리 서비스에 요청을 보내서 정보를 얻기 위해서

4) 라이브러리 및 프레임워크 사용할때 : 
[예시1] jQeury를 사용할때 jQeury의 API를 호출해서 웹 페이지의 동작(버튼 클릭 등)을 제어
[예시2] redux 라이브러리에 있는 함수나 메서드를 사용하고 싶을때 redux의 API를 호출하ㅁ

1-3. API를 어떻게 호출하면 될까?

1) XHR :

XMLHttpRequest 객체로, "브라우저"에서 서버와 데이터를 교환하기 위한 자바스크립트 API임.
오래된 방법이지만 아직 사용되고 있는 중.
XHR로 비동기적인 HTTP 요청을 보낼수도 있고, 요청이나 응답을 처리할 수도 있음

2) fetch (TIL-fetch)

3) Axios :

"브라우저""Node.js"환경에서 사용할 수 있는 Promise 기반의 HTTP 클라이언트 라이브러리.
XHR과 fetch 보다 사용하기 쉽고 유연하고 다양한 기능을 제공
특히! 요청과 응답을 보다 쉽게 처리할 수 있다고 함

4) jQuery AJAX :

$.ajax()함수를 사용해서 간단하게 HTTP 요청을 보낼 수 있음.
(jQuery는 무겁고 오래된 방법이라 비추..)

5) Superagent :

"브라우저""Node.js"환경에서 사용할 수 있는 HTTP 요청 라이브러리

2. 챗지피티를 활용하여 대화식으로 학습한 내용 :

https://chat.openai.com/share/84225fb9-e5a9-47b9-aabc-77d765a50506

profile
삐약

0개의 댓글