[JavaScript] API, 동기 vs 비동기, 프론트엔드&백엔드
프론트엔드 날개달기 : Vuejs, React 배우기 전에 꼭 알아야하는 지식
섹션 1
- API란 무엇인가 ?
- 동기와 비동기란 ?
- JS에서의 비동기 처리법
API란 무엇인가 ?
인터페이스 : 서로 다른 두 개 이상의 것이 소통하기 위한 접점
ex )
UI (User Interface) : 사용자가 소통하기 위한 접접
사람과 컴퓨터 사이의 인터페이스 : 모니터 (읽기), 키보드(쓰기)
API (Application Programming Interface)
응용 프로그램에서 소통하기 위한 접점 (* 운영프로그램 == 애플리케이션)
+) 애플리케이션에서 데이터를 읽거나 쓰기 위해 사용하는 인터페이스
동기와 비동기란 ?
동기 (Synchronous) : 앞선 요청의 응답을 받은 이후, 이어지는 작업을 처리한다
비동기 (Asynchronous) : 앞선 요청의 응답 여부와 관계 없이 다음 작업을 처리한다
| 동기 | 업무가 단순하나 자원을 비효율적으로 사용 |
| 비동기 | 자원을 효율적으로 사용하나 업무가 복잡해질 수 있음 |
앞선 요청의 응답을 결과로 하여 다음 작업을 실행해야하는 경우, 결과값을 받지 않은 채 실행될 시 문제가 발생하기에 동기적 처리가 필요하고, 파일, 데이터베이스 처리와 같이 오래 걸리는 작업 동기식으로 처리 할 경우 전체적인 작업 흐름에 장애가 생기므로 비동기 처리가 필요하다. 이와 같이 동기적 처리와 비동기적 처리를 상황에 맞추어 적절히 사용해야한다.
JS에서의 비동기 처리법
javascript는 싱글 스레드 기반 언어로, 하나의 작업씩 순차적으로 처리한다. JS의 인터프리터는 브라우저의 내부에 탑재되어 있으나, 브라우저는 JS 엔진만으로 작동하지는 않는다. 동기적 처리의 성질을 가진 JS에서 비동기 처리를 하기 위해, Web API를 사용한다.
콜백함수
ex) setTimeout
html에서 javascript를 로드할 때
defer, async