[Js] 비동기 처리 [1] 비동기 처리를 알아보자!(setTimeout)

말로만 듣던 그 비동기 처리, 제가 한 번 해보겠읍니다.

할수있다!

 

비동기 처리에 대해 알아보려고 하니, 먼저 비동기 프로그래밍에 대한 결과가 많이 나오던데요.

튀어나오는 순서대로 하나씩 다 ! 살펴봅시다 !! 튀어나와요 개념의 숲!

 

비동기 프로그래밍

작업이 완료될 때까지 기다리지 않고 잠재적으로 오래 실행되는 작업을 시작해서, 해당 작업이 실행되는 동안에도 다른 이벤트에 응답할 수 있게 하는 기술입니다.

작업이 완료되면 프로그램이 결과를 제공합니다.

브라우저가 제공하는 기능 중에서 시간이 오래 걸릴 가능성이 있는 fetch를 이용한 HTTP 요청 만들기 등에 사용하면 좋다고 합니다.

출처 : https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Introducing

 

특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행해버리는 게 비동기 프로그래밍의 핵심이라고 할 수 있습니다.

 

이미지 출처 : https://kkhcode.tistory.com/6

이미지로 설명하자면 이런 방식의 프로그래밍 입니다!

 

 

비동기 처리?

그렇다면 비동기 처리란 무슨 말일까요? 비동기 처리, 비동기 처리, 이렇게 말하는 걸 많이 보고 들어서, 비동기 처리라는게 비동기 프로그래밍을 동기로 바꿔주는건가? 라고 생각했었는데 공부하다보니 js가 움직이는걸 java 처럼 순차적으로 딱딱 맞춰주는 것과는 조금 다르다는 걸 알게됐습니다.

뭐가 다르냐고 물어본다면... 음... 오...아예... 바로 마마무 되어버리기... 아직까지 뭐가 다른지 콕 꼬집어서 설명할 수 없습니다... 아마 작업에 우선순위를 정해주는 게 비동기 처리라고 생각합니다.

그러니까! 비동기를 잘! 사용하는 방법이 비동기 처리인거죠. 그것이, 비동기 처리니까.(끄덕)

 

비동기 처리는 현재 실행중인 코드가 완료되지 않았더라도 다음 코드를 실행할 수 있어서 동시에 여러 작업을 빠르게 수행할 수 있다는 장점이 있어서 사용합니다. 하지만 비동기로 된 코드가 아주 많다면, 어떤 코드가 언제 실행될 지 예측하기가 어렵습니다. 그래서 많은 비동기 코드들이 적재적소에 실행될 수 있도록 우선순위를 부여해주는 게 비동기 처리...라고 아직까진 생각합니다... 공부를 더 하면 바뀔지도?

 

[3]까지 공부하고 왔지만, 비동기 처리 = 동기처럼 만들어주기! 라고 일반화하기는 어려운 것 같아요. 어쨌건간에 비동기 처리의 장점을 취하면서도, 그 코드의 순서를 잘 파악할 수 있도록 하는 게 비동기 처리가 맞는 것 같습니다.

 

자바스크립트와 비동기처리

자바스크립트는 브라우저에서, API를 사용해서 비동기 프로그래밍을 합니다. 그런데, 자바스크립트는 싱글 스레드 방식으로 동작하기 때문에 한 번에 하나의 코드만 실행할 수 있습니다. 그렇다면... 어떻게 동작하길래 싱글 스레드로 비동기 처리를 할 수 있는 걸까요? 바로 이벤트 루프 덕분입니다. 이 이벤트 루프는 브라우저에 내장되어 있는 기능입니다.

 

또 자바스크립트에는 비동기 내장함수가 있습니다. 비동기 내장함수인 setTimeout으로 이벤트 루프가 어떻게 움직이는지 봅시다.

 

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

출처 : https://velog.io/@kim_unknown_/JavaScript-Asynchronous

위 이미지의를 글로 설명하면

 

1. bar가 호출되면 setTimeout이 콜 스택으로 들어갑니다. setTimeout은 비동기 함수니까, web API로 이동합니다. setTimer의 타이머가 실행됩니다. 

2. 타이머가 돌아가는 동안 foo가 콜 스택으로 온 후 바로 콘솔창에 First가 출력됩니다.

3. 엇 아직 bar의 카운터인 5초가 다 안됐네요. baz가 호출됩니다. baz도 바로 콘솔창에 Third로 출력됩니다.

4. 타이머가 다 끝나서 큐 영역으로 넘어가있던 bar는 콜 스택이 다 비워졌기 때문에 드디어 콜 스택으로 갑니다.

5. 콘솔창에 마지막으로 Second가 출력됩니다.

 

비동기 함수는 web API로 옮겨갑니다. 이벤트루프는 setTimeout이 모두 실행된 함수를 큐로  옮겨줍니다. 그 후 콜 스택이 비었을때, FIFO 방식으로 큐에서 콜 스택으로 옮겨줍니다.

 

이렇게 콜 스택, 큐 스택, 그리고 웹 API를 왔다갔다하며 싱글 스레드에서도 이벤트루프로 비동기 처리가 가능합니다. bar가 실행되고 있지만, foo와 baz가 콘솔창에 출력된 것 처럼요.

 

다음번엔 setTimeout 을 이용한 callback 비동기 처리를 알아봅시다.

 

2023.04.05 - [백엔드/javaScript] - [Js] 비동기 처리 [2] callback과 promise를 알아보자!

[Js] 비동기 처리 [2] callback과 promise를 알아보자!

2023.04.06 - [백엔드/javaScript] - [Js] 비동기 처리 [3] async/await를 알아보자!

[Js] 비동기 처리 [3] async/await를 알아보자!