📁동기 프로그래밍
📂동기적 수행
순서대로 한번에 딱 한 가지 일만 수행한다.
작업1이 완전히 끝나고 나서야 작업2가 수행된다.
📂동기 프로그래밍이란
코드를 동기적으로 수행하는 방식을 의미한다.
console.log("작업 1"); // "작업 1"
console.log("작업 2"); // "작업 2"
console.log("작업 3"); // "작업 3"코드가 작성된 순서대로 한 줄씩 실행된다. 코드 한 줄이 수행 완료되어야 다음 줄로 넘어가는 것이 동기 프로그래밍이다. 자바스크립트는 이런 동기 프로그래밍 방식을 사용한다.
console.log("작업 1"); // "작업 1"
print(); // "작업 2"
console.log("작업 3"); // "작업 3"
function print() {
console.log("작업 2");
}코드를 실행하면, 함수 선언은 호이스팅 되어서 단위 스코프 내 최상단에 위치한 것처럼 동작하게 된다.
function print() {
console.log("작업 2");
}
console.log("작업 1"); // "작업 1"
print(); // "작업 2"
console.log("작업 3"); // "작업 3"자바스크립트 코드는 동기적으로 실행된다. 따라서 함수 선언부터 아래로 한 줄씩 실행시킨다.
📂자바스크립트 엔진
"자바스크립트는 싱글쓰레드 언어이다."
자바스크립트가 기본적으로 동기적인 이유는 코드를 실행시켜 주는 자바스크립트 엔진은 한번에 한 가지 작업만 할 수 있기 때문이다.
📂동기 프로그래밍의 문제
시간이 오래 걸리는 작업을 할 때 문제가 생긴다. 작업을 처리하는 시간이 길어지면 그 다음 작업은 오랫동안 대기해야 한다. 이 현상을 Blocking이라고 한다.
작업1은 네트워크 상으로 서버로부터 데이터를 받아오는 일을 한다고 하자. 네트워크 통신은 시간이 걸리는 작업으로 해당 작업이 진행되는 동안 나머지 작업은 Blocking 상태에 있게 된다. 따라서, 작업1이 완전히 완료된 후에 작업2가 수행될 수 있다.
이를 해결하는 것이 바로 비동기 프로그래밍이다.
📁비동기 프로그래밍
📂비동기적 수행
어떤 작업이 끝날 때까지 기다리지 않고 바로 다음 작업을 수행하는 것이다.
📂비동기 프로그래밍이란?
코드를 비동기적으로 수행하는 방식이다.
| 동기 | 비동기 |
|---|---|
| 결과를 기다리는 것 | 결과를 기다리지 않는 것 |
작업1이 시작되면 바로 다음 작업으로 넘어간다. 따라서, 작업1이 처리되는 동안 나머지 작업들도 Blocking 없이 차례대로 처리될 수 있다.
작업1의 비동기 작업이 끝나면 콜백 함수를 호출하는 등의 필요한 처리를 해주면 된다.
📂비동기 프로그래밍 예제1
setTimeout(() => {
console.log('2');
}, 3000);
console.log('1');
// '1' '2'setTimeout()은 브라우저의 Web API에서 제공하는 비동기 함수다. 비동기 함수는 비동기적으로 동작하는 함수를 말한다. 비동기 작업을 수행하는 함수라고도 할 수 있다.
setTimeout() 함수는 다음 작업인 console.log('1');이 실행되는 것을 Blocking 하지 않았다. 따라서, setTimeout() 함수가 호출되자마자 바로 다음 작업이 수행된 것을 알 수 있다. 3초 타이머가 완료되면 setTimeout()의 인자로 넣어줬던 콜백이 호출된다.
📝자바스크립트는 싱글쓰레드인데?
자바스크립트는 싱글쓰레드 언어인데 비동기 프로그래밍이 어떻게 가능할까? 타이머가 돌아가는 동시에 다음 작업을 어떻게 수행하냐 말이다. '한번에 두 가지 일을 하면 싱글쓰레드가 아닌데?' 라고 생각할 수 있다.
이것은 Web APIs 덕분이다. 브라우저 안에는 자바스크립트 엔진 뿐만 아니라, Web APIs도 있다. Web APIs는 자바스크립트 언어 자체와는 별개로 다양한 API를 제공한다. setTimeout, fetch와 같은 비동기 함수를 제공한다. 그리고, HTML 요소를 선택, 수정, 추가, 삭제할 수 있는 DOM API를 제공한다. Web APIs는 자바스크립트 엔진이 아닌 별도의 브라우저 환경에서 실행이 된다. 이 환경은 여러가지 일을 동시에 할 수 있는 멀티쓰레드 환경이다.
📂비동기 프로그래밍 예제2
console.log('시작');
setTimeout(() => {
console.log('2');
}, 3000);
console.log('1');
// 시작 '1' '2'자바스크립트 엔진은 맨 위에서부터 코드를 동기적으로 실행한다. setTimeout()은 Web APIs이기 때문에 브라우저의 Web APIs 환경에서 타이머가 돌아간다. 인자로 전달해준 콜백 함수도 함께 Web APIs 환경으로 전달된다. 자바스크립트 엔진은 다음 작업으로 넘어가서 '1'을 출력한다. Web APIs 환경에서 돌아가던 타이머가 완료되면 자바스크립트 엔진은 Web APIs 환경에 전달했던 콜백함수를 받아서 실행시킨다.
