자바스크립트의 기본 동작 원리 이해의 필요성
자바스크립트는 문법을 배우는 것보다 코드의 동작 원리와 큰 흐름을 이해하는 것이 중요합니다.
그 중에서도 해석 순서와 처리 방식이 일반 프로그래밍 언어와 다르기 때문에 이를 이해하는 것이 중요합니다.
기본 동작을 이해하면 프로미스(Promise) 같은 비동기 처리 방식의 코드도 더 깔끔하게 짤 수 있고, 예상치 못한 오류를 줄일 수 있습니다.
자바스크립트의 실행 환경
웹 브라우저와 Node.js 환경에서 실행됩니다.
- 웹 브라우저 : 웹 페이지를 렌더링, 사용자 인터페이스를 제공
- Node.js : 브라우저 외부에서 자바스크립트 코드를 실행할 수 있게
자바스크립트는 싱글 스레드 언어이다.
자바스크립트는 기본적으로 싱글 스레드 언어입니다.
싱글 스레드란, 말 그대로 "한 번에 한 작업(한 줄의 코드)만 처리할 수 있다"는 뜻입니다.
자바스크립트는 콜 스택(Stack) 이라는 공간에서 코드를 한 줄씩 읽고 실행합니다.
하지만 setTimeout, 네트워크 요청, 파일 읽기 등 오래 걸리는 작업은 직접 실행하지 않고 이벤트 큐(Queue) 로 넘겨 놓습니다.
이런 작업들은 자바스크립트 엔진이 할 수 없기 때문에, 브라우저나 Node.js의 백그라운드 환경에서 처리됩니다.
이후 콜 스택이 모두 비면, 이벤트 큐에 있던 작업이 다시 스택으로 올라와 실행됩니다. 이걸 이벤트 루프(Event Loop) 가 담당합니다.
💻코드 예시
console.log(1+1)
setTimeOut(() => {console.log("실행!!")}, 1000) // 1초 뒤 실행
console.log(4)
결과 => 2, 4, 실행!!코드가 실행되는 처리 과정 요약
- 브라우저는 자바스크립트 엔진을 통해 코드를 해석하고 실행
- 실행 과정을 크게 스택(Stack)과 이벤트 큐(대기실)로 나눔
- 스택은 현재 실행 중인 코드(한 줄씩 처리)이고, 이벤트 큐는 오래 걸리는 작업(타임아웃, 이벤트 리스너 등)이 대기
- 자바스크립트는 싱글 스레드로 작동하며, 한 번에 하나의 작업만 수행 가능
- 오래 걸리는 작업은 대기실에 넣어두고, 완료되면 이벤트 큐에 들어가서 차례대로 실행
- 스택이 비었을 때만 이벤트 큐의 작업이 스택으로 이동하여 실행
자바스크립트 스택 과부화로 인한 브라우저 프리징 (브라우저 멈춤 현상)
1. 무거운 연산 실행
반복문을 매우 많이 돌리거나 반복문 내에서 어려운 작업을 시키면 처리 시간이 오래 걸릴 수 있습니다.
2. 스택 과부화
A. 스택에서 10초동안 동작하는 코드 실행 => 스택이 바빠짐
B. 이때 버튼 클릭, Ajax 요청, 타이머 생성 등 다른 이벤트가 발생해도 작동하지 않습니다.
2-1. 버튼 클릭 (이벤트 리스너) 미동작 이유
이벤트 리스너는 큐(대기실)을 거쳐 스택으로 올라옵니다. 하지만 큐에서 올려지는 조건은 스택이 비었을 때이므로 동작하지 않습니다.
📙 참고 사이트
'javascript' 카테고리의 다른 글
| Bootstrap4 tooltip 배경색 커스텀하기 (0) | 2025.04.16 |
|---|