API가 무엇일까?

React

lemonarr🍋 2023. 10. 24. 17:49

React를 공부하면서 Web API를 접하게 되었는데...대체 API가 뭐지?

API에 대해 간단히 정리해 보려합니다.

API는 Application Programming interface 의 약자입니다.

단어를 하나씩 뜯어봅시다.

Application은 그 어플을 말하는 것이 아닌 컴퓨터 처리에 대상이 되는 것들을 총칭하여 말한는 것입니다.

우리가 하는 PC게임, 평소에 하는 프로그래밍도 Application이라 불릴 수 있습니다.

interface는 어떠한 리소스를 토대로 결과물을 만들거나 도출할 때 쉽게 하기 위해 도움을 주는 존재를 말합니다.

--> 즉, 컴퓨터 처리에 있어서 프로그래밍을 쉽게 하게 해주는 인터페이스 (도움을 주는 존재) 라고 할 수 있습니다.

응용 프로그램에서 사용할 수 있도록 , 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만드는 인터페이스를 뜻합니다.

주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등 자신이 원하는 기능을 제어할 수 있도록 하는 인터페이스를 제곻합니다.

따라서 원하는 기능을 제어하는 API를 직접 만들 수도 있습니다.

웹 서버 또는 웹 브라우저를 위한 애플리케이션 프로그래밍 인터페이스 입니다.

웹사이트의 움직임은 javascript 자체 엔진 만으로 만든 것이 아니다.

(우리가 자주 쓰고 보는 console.log() 역시 Web API이다.)

Web API는 js 자체 엔진이 아닌 Web api에서 제공하는 메소드 입니다.

HTTP 서비스이고 다양한 클라이언트에서 접근이 가능하도록 설계되어 있습니다.

- 브라우저에서 로드 된 문서를 조작하는 데 도움을 줍니다. (HTML을 생성, 삭제, CSS로 HTMl의 스타일을 적용하는 등)

- 웹 페이지의 일부를 업데이트 해 주는데 도움을 줍니다. (XMLHttpRequest)

- 그래픽 요소들을 웹 페이지에 그리는 데 도움을 줍니다, (canvas)

- 오디오와 비디오 작업을 웹 페이지에서 가능하도록 도와줍니다.

- 클라이언트 측 저장소를 사용할 수 있게 도와줍니다. (local storage, session storage)

웹에서 사용하는 API들은 다양한 방식으로 동작하지만 '공통적인 부분이 존재'합니다.

웹에서 사용하는 API들은 하나 이상의 자바스크립트 객체를 이용해서 동작하도록 합니다.

웹페이지에서 오디오를 동작시키는 예시를 들어보자면,

AudioContext 객체를 사요해 오디오를 조작하는데 사용하는 여러 메서드와 속성을 사용하고,

MediaElementAudioSourceNode객체를 사용해 AudioContext 안에서 사용하는 사운드 요소인 Audio 태그를 구현합니다.

그리고 AudioDestinationNode 객체를 사용해 실제로 소리를 출력해주는 컴퓨터 장치와 연결시켜 줍니다.

웹 API의 어떤 것을 사용하든 진입점을 확인해야 합니다.

웹 페이지에서 오디오를 동작시키기 위해서는 AudoiContext 객체부터 접근해야 합니다.

웹 페이지에서 돔 요소를 변경하고 싶다면 document 객체부터 접근해야 합니다.

XMLHttpRequest 객체와 같이 HTTP 요청을 서버로 보내서 새로운 리소스를 제공하는 것들은 onload, open, send와 같은 많은 이벤트를 가지고 있습니다.

웹 API 기능들은 자바스크립트 및 다른 웹 기술과 동일한 보완 정책을 가져가지만 경우에 따라선 민감한 데이터를 보내야 할 수도 있기 때문에 몇몇의 Web API들은 HTTPS 에서만 동작합니다.

- 웹 API란 개발자가 브라우저 상에 쉽게 개발할 수 있도록 도와주는 객체 모음들이다.

- 웹 API를 이용하여 돔 요소를 조작학나 일부 영역을 업데이트 시키거나 비디오나 오디오나

그래픽 요소를 사용할 수 있다.

- 웹 API는 객체 기반으로 동작하고 엔트리 포인트가 존재한다.