자바스크립트는 어떻게 멈추지 않고 일할까? 이벤트 루프와 비동기 프로그래밍의 비밀"

 

1. 서론: 자바스크립트의 역설, "싱글 스레드인데 빠르다?"

자바스크립트는 한 번에 하나의 일만 처리할 수 있는 싱글 스레드(Single Thread) 언어입니다. 하지만 우리가 사용하는 웹사이트는 네트워크 요청을 보내면서도 애니메이션이 돌아가고, 사용자 클릭에 즉각 반응합니다. 어떻게 한 개의 스레드로 이 모든 '동시성'을 구현하는 걸까요? 그 비밀은 자바스크립트 엔진 자체가 아닌, 브라우저가 제공하는 이벤트 루프(Event Loop) 아키텍처에 있습니다.

2. 자바스크립트 런타임의 구조

자바스크립트가 실행되는 환경(브라우저나 Node.js)은 여러 구성 요소가 협력하는 구조입니다.

  • Call Stack: 작성한 코드가 순차적으로 쌓이고 실행되는 곳입니다.

  • Web APIs: 브라우저에서 제공하는 별도의 스레드입니다. setTimeout, fetch, DOM 이벤트 등이 여기서 처리됩니다.

  • Task Queue (Callback Queue): Web API에서 처리가 끝난 콜백 함수들이 대기하는 공간입니다.

  • Event Loop: Call Stack이 비어있는지 끊임없이 감시하며, 비어있을 때 Queue에 대기 중인 함수를 Stack으로 옮겨줍니다.

3. 태스크의 우선순위: 매크로 vs 마이크로

모든 비동기 작업이 똑같은 대기 줄에 서는 것은 아닙니다. 여기서 자바스크립트의 실행 순서가 결정됩니다.

  • Microtask Queue (우선순위 높음): Promise.then, MutationObserver, process.nextTick 등이 들어갑니다.

  • Macrotask Queue (우선순위 낮음): setTimeout, setInterval, setImmediate 등이 들어갑니다.

중요한 점: 이벤트 루프는 매크로 태스크를 하나 처리하기 전에, 반드시 마이크로 태스크 큐에 쌓인 모든 작업을 먼저 비웁니다. 이 순서를 모르면 코드의 실행 결과를 예측할 수 없습니다.

4. 실무 경험 사례: "순서가 뒤바뀐 데이터, 범인은 비동기 우선순위였다"

[나의 개발 경험: Promise와 setTimeout 사이에서 길을 잃다]

예전에 실시간 채팅 기능을 구현할 때의 일입니다. 사용자가 메시지를 보내면 화면에 즉시 추가하고, 아주 짧은 지연(0초) 후 스크롤을 하단으로 내리기 위해 setTimeout(() => scrollToBottom(), 0)을 사용했습니다. 그런데 가끔 메시지가 추가되기 전에 스크롤 로직이 먼저 실행되어 스크롤이 끝까지 내려가지 않는 버그가 발생했습니다.

원인을 분석해 보니, 메시지 데이터를 처리하는 로직은 Promise(마이크로 태스크) 기반이었고, 스크롤 로직은 setTimeout(매크로 태스크) 기반이었습니다. 이론적으로 마이크로 태스크가 먼저 실행되어야 했지만, 제 로직 체인 어딘가에서 순서가 꼬여있었던 것이죠.

결국 저는 모든 로직을 async/await와 Promise 체인으로 통일하여 마이크로 태스크 큐 내에서 순차적으로 실행되도록 강제했고, 버그를 완벽히 해결했습니다. 이 경험을 통해 '0초 뒤 실행'이 결코 '즉시 실행'을 의미하지 않는다는 것을 뼈저리게 배웠습니다.

5. 결론: 효율적인 자바스크립트 작성을 위하여

이벤트 루프를 이해하는 것은 단순히 기술 면접을 대비하는 것이 아닙니다. 브라우저의 메인 스레드를 방해하지 않고(Non-blocking), 사용자에게 부드러운 경험을 제공하는 코드를 짜기 위한 필수 지식입니다. 무거운 연산은 어떻게 분산할지, 비동기 처리는 어떤 순서로 일어날지 고민하는 습관이 여러분을 실력 있는 개발자로 만들어줄 것입니다.

댓글

댓글 쓰기

이 블로그의 인기 게시물

빵집 줄서기와 시간 복잡도의 관계

  빵집 줄서기와 시간 복잡도의 관계 알고리즘을 공부하다 보면 반드시 등장하는 개념이 있습니다. 바로 시간 복잡도(Time Complexity)입니다. 많은 초보자들이 이 용어를 듣고 어려워하지만, 사실 시간 복잡도는 우리 일상 속에서도 자연스럽게 경험할 수 있는 개념입니다. 가장 쉬운 예시가 바로 빵집 줄서기입니다. 빵집 앞에 사람들이 길게 줄을 서 있을 때, 빵을 사는 데 걸리는 시간을 계산하는 원리를 이해하면 시간 복잡도가 왜 중요한지 바로 감이 잡힙니다. 1. 시간 복잡도란 무엇인가 시간 복잡도는 간단히 말해 프로그램이 데이터를 처리하는 데 걸리는 시간의 변화량을 나타내는 개념입니다. 즉, 데이터가 많아질수록 프로그램이 얼마나 느려지는지를 예측하는 기준이라고 볼 수 있습니다. 예를 들어 10개의 데이터를 처리하는 프로그램이 있다면, 그걸 100개, 1000개로 늘렸을 때 실행 시간이 얼마나 늘어나는지를 계산하는 것이 시간 복잡도의 핵심입니다. 시간 복잡도는 보통 O(빅오) 표기법으로 표현합니다. 예를 들어 O(1), O(n), O(n²), O(log n) 같은 형태가 대표적입니다. 이 표기는 “데이터 개수 n이 커질수록 실행 시간이 어떤 비율로 증가하는가”를 수학적으로 나타낸 것입니다. 2. 빵집 줄서기와 시간 복잡도의 공통점 빵집에 손님이 한 명만 있을 때는 금방 계산이 끝납니다. 하지만 줄이 길어질수록 기다리는 시간은 점점 늘어나죠. 이 현상이 바로 시간 복잡도와 같습니다. 예를 들어 빵을 고르고 계산하는 데 각각 1분이 걸린다고 해봅시다. 손님이 한 명이면 2분이면 끝나지만, 손님이 10명이면 20분, 100명이면 200분이 걸립니다. 이런 관계는 O(n) 형태의 시간 복잡도라고 할 수 있습니다. 즉, 손님의 수가 n배로 늘어나면, 걸리는 시간도 n배로 증가합니다. 3. 효율이 떨어지는 줄서기 – O(n²) 구조 만약 빵집 직원이 손님을 효율적으로 처리...
자세한 내용 보기

변수와 상수의 차이, 그리고 실무에서의 활용 방법

  프로그래밍을 배우다 보면 가장 먼저 접하게 되는 개념이 ‘변수’와 ‘상수’다. 처음에는 두 단어가 비슷해 보여서 구분이 어려울 수 있다. 하지만 프로그램의 안정성과 효율성을 좌우하는 중요한 기초 개념이 바로 이 두 가지다. 변수와 상수를 정확히 이해하고 사용하는 습관은 초보 개발자와 숙련된 개발자를 가르는 분기점이 된다. 변수란 무엇인가 변수는 이름 그대로 ‘변할 수 있는 수’를 의미한다. 프로그램이 실행되는 동안 데이터가 계속 바뀔 수 있을 때 사용하는 저장공간이다. 예를 들어 로그인한 사용자의 이름, 장바구니의 총액, 게임 속 점수처럼 상황에 따라 계속 변하는 값들은 변수로 저장된다. 변수는 프로그램의 흐름을 따라 변화하며, 사용자 입력이나 계산 결과를 임시로 담는 역할을 한다. 파이썬을 예로 들어보면 다음과 같다. name = "민수" score = 90 이 코드는 name과 score라는 이름의 변수에 각각 문자열과 숫자 데이터를 담는 예다. 이후 score = score + 10 이라는 연산을 하면, score의 값이 100으로 바뀌게 된다. 바로 이런 변화 가능성이 변수의 핵심이다. 변수를 활용하면 프로그램이 상황에 맞게 유연하게 작동할 수 있다. 데이터를 즉시 수정하거나 새로운 값을 반영할 수 있기 때문이다. 하지만 이러한 유연성이 때로는 문제를 일으키기도 한다. 변수 값이 의도치 않게 바뀌면 전체 프로그램의 동작이 흔들릴 수 있기 때문이다. 그래서 언제 변수를 사용하고 언제 상수를 사용해야 하는지 판단하는 것이 중요하다. 상수란 무엇인가 상수는 ‘항상 같은 수’라는 뜻이다. 프로그램이 실행되는 동안 절대 변하지 않는 값을 저장한다. 예를 들어 원주율, 부가가치세율, 기본 할인율 등은 코드 전반에서 반복적으로 사용되지만, 절대로 바뀌지 않아야 한다. 이런 값은 상수로 선언하는 것이 안전하다. 파이썬에서는 상수를 명시적으로 지원하지 않지만, 관례적으로 대문자로 선언해 개발자가 변경하지 말아야 함을 표현한다...
자세한 내용 보기

파이썬 객체지향 프로그래밍(OOP) 완전정복 | 클래스, 상속, 캡슐화까지 한 번에 이해하기

  파이썬을 처음 배울 때는 변수와 함수만으로 프로그램을 구성하지만, 실무나 프로젝트 규모가 커질수록 코드 관리가 점점 어려워진다. 이때 필요한 개념이 바로 객체지향 프로그래밍이다. 객체지향 프로그래밍(OOP, Object Oriented Programming)은 프로그램을 단순한 명령어의 나열이 아닌 ‘객체’ 중심으로 바라보는 사고방식이다. 객체란 데이터와 기능을 하나로 묶은 단위이며, 현실 세계의 사물이나 개념을 코드로 표현한 것이다. 객체지향의 핵심은 크게 세 가지로 정리된다. 첫째, 캡슐화. 관련된 데이터와 기능을 하나의 객체로 묶어 외부 접근을 제한하는 개념이다. 둘째, 상속. 기존 코드를 재사용하면서 새로운 기능을 확장할 수 있도록 하는 기능이다. 셋째, 다형성. 같은 이름의 메서드가 객체에 따라 다른 동작을 하는 성질을 말한다. 이 세 가지 개념을 이해하면 코드를 효율적이고 유지보수하기 쉬운 구조로 만들 수 있다. 클래스와 객체의 기본 개념 클래스(Class)는 설계도이고, 객체(Object)는 그 설계도로부터 만들어진 실제 제품이라고 할 수 있다. 예를 들어 자동차 설계도가 클래스라면, 실제 우리가 타는 자동차는 객체다. 아래는 간단한 예시이다. Car라는 클래스를 만들고, 브랜드와 색상을 초기화한다. 그런 다음 drive 메서드를 통해 자동차가 출발하는 동작을 표현한다. 예시 코드 설명 class Car: 클래스를 선언한다. def init(self, brand, color): 생성자 함수로 브랜드와 색상을 초기화한다. def drive(self): 자동차가 출발했다는 문장을 출력한다. my_car = Car(“Hyundai”, “black”) 으로 객체를 생성한다. my_car.drive() 를 호출하면 “black색 Hyundai 자동차가 출발합니다!” 라는 문장이 출력된다. 이처럼 클래스는 관련된 데이터와 행동을 하나로 묶어 표현한다. 캡슐화(Encapsulation) ...
자세한 내용 보기