Thread

Thread란 ?

프로세스 보다도 작은 최소 작업 실행 단위이다. 실생활에서의 예를 들면, 하나의 은행이 있다. 그리고 그 은행은 고객들을 응대하기 위해 지점을 각각 세운다. 그럼 그 지점은 프로세스이다. 그리고 그 지점안에 창구가 있다. 창구의 갯수는 각 지점마다 당연히 다르다. 이 때 이 창구 1개를 스레드라고 한다. 보통 은행은 지점에서 2개 이상의 창구를 사용하므로 멀티 스레드, 다중 스레드라고 프로그래밍 관점에서 볼 수 있다.

JS와 Thread

일단, 자바스크립트는 싱글 스레드이다. 즉 지점에 창구가 하나 밖에 없다. 그럼 지점에 창구가 하나 밖에 없다는 뜻은 기껏 지점을 하나 세웠는데 창구가 하나 밖에 없어서 고객 1명밖에 응대를 못한다. 기업의 입장에서는 얼마나 쓸데 없으며, 고객들의 입장에서는 얼마나 속이 터지는 것일까, 마찬가지로 프로그래밍의 관점에서 보면 한 번에 하나의 작업밖에 수행을 못하는데 그럼 안 좋은 언어인가? 라는 생각도 들 수 있다.

비동기 작업

싱글 스레드로 한 번에 여러 요청을 처리 할 수 있을까? 라는 의문이 든다. 그래서 비동기 방식으로 처리 한다. 기존의 동기 작업은 코드를 위에서 부터 하나하나씩 실행한다. 그렇게 되면 하나의 작업이 끝나야 다음 코드를 실행한다. 이렇게 앞의 작업이시간이 길수록 시간 및 자원 낭비가 심해진다. 그러나 비동기방식은 하나의 요청이 완료될 때 까지 기다리지 않고 동시에 다른 작업을 실행하는 비동기 호출로 싱글 스레드의 단점을 극복할 수 있다.

자바스크립트 비동기 런타임 과정

일단 자바스크립트가 비동기 방식을 적용할 때의 런타임 환경을 알아봐야 한다. 비동기를 동작하는데 필요한 요소들만 알아보자

• Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
• Web API: 웹 브라우저에 제공하는 API로 요청이나 Timeout 등의 비동기 작업을 실행
• Task Queue: Web API에서 넘겨받은 Callback함수를 저장
• Event Loop: Call Stack이 비어있다면 Task Queue의 작업을 Call Stack으로 옮김

이제 비동기 실행을 알아보자

setTimeout(() => console.log(`비동기 실행 함수`))
console.log(`일반 실행`)

result
// 비동기 실행 함수
// 일반 실행

보면 분명히 '비동기 실행 함수'가 먼저 나와야 하는데 2번째로 나온 것을 볼 수 있다. 이게 바로 비동기이다.

자바스크립트가 실행이 되면 2 가지의 함수가 Call Stack에 쌓여야 한다. 그러나 비동기 함수는 Web API가 처리하므로 가져간다. 그럼 WebAPI는 Timeout이라는 함수의 콜백함수를 요청한 시간이 지나면 Task Queue로 보내준다.

이 때, 위에서 말했듯 비동기는 요청이 끝날 때 까지 기다리는 것이 아닌 요청을 보내고 다음을 진행한다. 그러므로 2 번째 함수가 Web API에서 처리하는 함수가 아니므로 Task Queue로 가게 된다. 그럼 Task Queue는 큐 자료구조이므로 먼저 들어온 것을 처리한다. 그래서 2 번째 비동기함수가 아닌 일반함수를 처리하고 Timeout의 요청시간이 지나게 되면 Web API가 받은 비동기 함수에 담겨있는 콜백함수를 Task Queue로 보낸다. 그럼 마지막으로 2번째 함수의 콜백함수가 실행된다.

그럼 우리가 보기에는 2번째 함수, 1번째 콜백함수가 정상적으로 실행되는 것을 볼 수 있다.

여기서 의문, 자바스크립트는 왜 싱글 스레드일까?

이유를 알고가자, 위에서 내가 설명한 것은 자바스크립트가 싱글 스레드여서 어떻게 동작하는지 였지만, 왜 싱글 스레드인지는 이유가 없다.

일단 멀티 스레드의 단점을 알아보자. 멀티 스레드의 최대 단점은 바로 동시성 문제이다. 바로 데드락(Deadlock)과 기아(Starvation)상태이다. 이외에도 씽크로나이제이션(동기화)문제 등 많은데 이 문제가 웹 페이지에서 일어나게 되면 엄청나게 많은 사람들이 사용하는 이 인터넷에서 상당히 골치아픈 문제가 많이 일어날 것이라고 생각이든다. 그러나 단일 스레드를 사용하면 이 문제가 해결이 된다. 왜냐하면 단순하고 쉽기 때문이다. 멀티 스레드 동시성 문제는 일어나지 않으며 다양하고 많은 작업은 비동기로 처리가 가능하므로 싱글 스레드를 취급한다.

회고

일단 역시 아무생각 없이 자바스크립트가 비동기 방식을 적용하는데에 있어 그러려니 하고 썼다. 왜 비동기 함수, 콜백함수, async, await가 왜 쓰이는지도 모르고 그냥 '아 자바스크립트는 비동기를 쓰네, 자바랑 다르네' 라고 생각하고 쓰고 있다. 정확하게 자바스크립트가 어디에 쓰이는지도 모르고 그냥 쓰는 것이었다. 좀 제발 알고 써야 겠다는 생각이 계속 든다.