본문 바로가기
내가 공부하려고 올리는/web

Web - 동기 vs 비동기 프로그래밍(자바스크립트)

by 결딴력 2021. 11. 22.
반응형

보통 할 일이 많을 때

아침이나 전날 저녁에 To Do List를 만들어 계획을 세우고

하루를 시작할 때가 많습니다.

 

간단한 To Do List를 만들어 보겠습니다.

  1. 운동하기
  2. 프로그래밍 공부하기
  3. 블로그 관리하기
  4. 단백질 챙겨 먹기

 

이와 비슷한 또 다른 To Do List를 만들어 보겠습니다.

  • 08:00 : 운동가기
  • 10:00 : 단백질 챙겨 먹기
  • 12:00 : 프로그래밍 공부하기
  • 14:00 : 단백질 챙겨 먹기
  • 15:00 : 프로그래밍 공부하기
  • 18:00 : 단백질 챙겨 먹기
  • 20:00 : 블로그 관리하기

 

두 번째는 첫 번째 To Do List와 유사하지만

할 일을 시간에 맞게 정리한 버전입니다.

 

이러한 To Do List를 통해 비동기식/동기식을 이해할 수 있습니다.

쉽게 예를 들자면, 첫 번째가 비동기식 두 번째가 동기식 To Do List입니다.

시간에 맞춰 순서대로 계획을 실행해야 하는 방식을 동기식이라고 부릅니다.

 

따라서 동기식 프로그래밍이라는 것은

코드를 순서대로 실행해야 하는 프로그래밍 방식을 이야기합니다.

 

첫 번째 To Do List는 시간과 관련 없이 계획을 실행할 수 있습니다.

운동을 하면서 단백질을 챙겨 먹을 수도 있고,

프로그래밍 공부를 하다가 글로 남기고 싶은 부분을 블로그에 작성할 수도 있습니다.

 

이러한 방식을 비동기식이라고 볼 수 있습니다.

따라서 비동기식 프로그래밍은 꼭 순서대로 코드가 실행되는 것이 아닌

프로그래밍 방식을 의미합니다.

 

그럼 이제 본격적으로 비동기/동기식 프로그래밍을 알아보겠습니다.

 

윈도우 환경에서 파일의 확장자가 '. exe'인 실행 파일을 '프로그램'이라 합니다.

프로그램이 실행되서 돌아가는 상태는 '프로세스'라고 부릅니다.

프로그램을 실행시키는 하드웨어를 바로 '프로세서'라고 합니다.

 

요즘 컴퓨터는 여러 개의 프로세스를 함께 돌립니다.

프로그램을 여러 개 돌리는 방식에는 다음과 같은 두 가지 방식이 존재합니다.

 

동시성 방식

  • 프로세서 하나가 여러 개의 프로세스를 조금씩 나눠서 처리하는 방식
  • 하나의 프로세서를 조금 처리하고 다른 프로세스를 처리하는 것을 문맥 교환(Context Swithcing)이라 함
  • 문맥 교환이 너무 빠르게 일어나서 사용자들은 프로그램이 동시에 돌아가고 있다고 느낌

병렬성 방식

  • 프로세서 하나에 코어 여러 개가 달려, 각각 동시에 작업을 수행하는 방식
  • 멀티 코어 프로세서가 달린 컴퓨터에서 가능한 방식

 

이렇게 여러 개의 프로세스를 동시에 실행시키기만 하면 프로그램은 문제없이 돌아갈까요?

답은 NO입니다.

 

한 프로세스 내에서도 여러 작업을 동시에 실행시킬 필요가 있습니다.

예를 들어 웹 브라우저 내에서 노래 스트리밍 사이트에서 노래를 틀어 놓고 인터넷 쇼핑을 하는 것처럼

한 프로세스 내에서도 여러 개의 작업이 동시에 실행될 수 있어야 합니다.

 

이렇듯 한 프로세스 내에서 동시에 실행되는 작업들을 '스레드'라 합니다.

 

따라서 프로그램이 비동기로 실행된다는 것

스레드나 프로세스가 여러 개가 작동되고 있는 '멀티 태스킹'을 의미합니다.

 

 

이러한 멀티 태스킹이 자바 스크립트에서는 가능합니다.

자바 스크립트는 싱글 스레드이지만 비동기 작업이 가능합니다.

 

자바스크립트는 웹 브라우저나 Node.js의 자바 스크립트 엔진에서 실행됩니다.

이 엔진에는 자바 스크립트를 돌리는 하나의 스레드가 존재하는데,

이 스레드는 스택 형태로 나중에 들어간 정보가 먼저 처리되는 형식으로 콜 스택(Call Stack) 이라 합니다.

 

하지만 이러한 스택 형식의 스레드는 비동기 작업을 처리할 수 없습니다.

이러한 비동기 작업을 처리하기 위해 WEB API가 동작합니다.

 

AJAX로 HTTP 요청을 보내거나 파일에서 데이터를 읽어오는 등

시간을 소요하는 작업을 수행할 때는 브라우저나 Node.js에서 운영하는

WEB API를 이용해 비동기 처리를 진행합니다.

 

이러한 시간이 소요되는 task들은 보통 콜백 함수를 포함하는데,

콜백 함수는 간단하게, 다른 함수에 매개변수로 넘겨주는 함수를 의미합니다.

처리된 콜백 함수는 '테스크 큐'로 다시 이동합니다.

 

테스크 큐로 들어온 처리된 이벤트들은

'이벤트 루프'를 통해 다시 자바 스크립트의 전용 스레드로 보내집니다.

 

이러한 방식으로 인해

자바 스크립트는 하나의 스레드만 가진 싱글 스레드 환경에서도

비동기 방식으로 작동할 수 있는 것입니다.

 

 

오늘은 프로그램, 프로세서, 프로세스 그리고 스레드에 대한 간략한 이해와

이를 통해 자바스크립트가 어떻게 비동기식으로 작동하는지 알아봤습니다.

 

내용에 대한 오류 발견 시 댓글이나 메일 부탁드립니다!!

 

 

 

 

반응형

댓글