💻 JavaScript 비동기
TIL이기도 하지만 예습도 포함되어 있는 이번 글에는 간단하게
비동기와 관련된 키워드들을 정리하고 복습하는 시간을 가지려 한다.
각 키워드들을 깊게 파고 들어서 완벽한 이해가 필요한 구간인 것 같다.
⏳ JavaScript는 동기식 언어이다.
자바스크립트는 한 번에 하나의 작업을 수행한다.
한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말하며 이러한 동작을 단일 스레드(싱글 스레드), 동기(Synchronous)라고 부른다.
그렇다면 비동기란 무엇일까?
비동기(asynchronous)란?
동기(Synchronous)와는 다르게 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식을 말한다.
동기(Synchronous)는 순차적으로 한 단계씩 끝내는 것.
비동기(asynchronous)는 동시에 효율적으로 일을 수행하는 것.
⏳ Call Back 함수
-
다른 함수에 매개변수로 넘겨준 함수를 말한다.
매개변수로 넘겨받은 함수는 일단 넘겨받고, 때가 되면 나중에 호출(called back) 한다는 것이 콜백 함수의 개념이다. -
코드를 통해 명시적으로 호출하는 함수가 아니라, 개발자는 단지 함수를 등록 하기만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말한다.
Callback을 활용한 비동기적 프로그래밍
Callback 함수를 사용하는 이유
- 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이고
이 콜백 함수 기법은 자바스크립트에서 가장 오래된 비동기적 메커니즘이다.
- 비동기적 테크닉 : 소중한 싱글스레드의 멈춤을 방지. 즉 블록킹을 방지하여 싱글스레드가 논 블록킹으로 동작하게 한다.
⏳ Wep Api
-
API 란 Application Programing Interface, 응용프로그램에서 기능을 제어할 수 있도록 운영체제나 프로그래밍 언어가 제공하는 인터페이스를 말한다.
-
웹에서 여러 유용한 작업을 수행할 수 있도록 제공되는 규격이며, 자바스크립트를 통해 접근할 수 있고 윈도우나 엘리먼트에 대한 작업들도 이에 속한다.
-
브라우저에서 제공되는 API로, 비동기 작업을 담당하고 Web API는 setTimeout의 딜레이(기다리는 시간)을 받고, 시간이 지나면 callback 함수를 task queue에 전달한다.
⏳ Promise
-
자바스크립트 비동기 처리에 사용되는 객체이다.
-
Promise의 3가지 상태(states)
상태란 프로미스의 처리 과정을 의미하며, new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.
- Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
- Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해 준 상태
- Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
⏳ async / await
-
async & await는 promise를 간결/간편하고
동기적으로 실행되는 것처럼 보이게 만들어준다. -
async와 await는 새로운 것이 추가된 것이 아니라
기존에 존재하는 promise 위에 조금 더 간편한 API 제공함
자바스크립트 비동기에 필요한 구성들을 간단하게 정리해보았다.
개발 공부를 하면서 느낀 점은 이해한다는 것이 얼마나 중요한 지 깨달았다.
앞으로도 이해와 반복을 통해서 꾸준히 성장하고 싶다.
