[LG CNS AM Inspire Camp] 2. JavaScript와 Browser의 동작원리

0. 들어가며

자바스크립트(JavaScript)는 웹 개발에서 빼놓을 수 없는 필수 기술이다. HTML과 CSS와 함께 웹 페이지를 구성하며, 동적인 사용자 경험을 만들어낸다. 특히 Node.js의 등장으로 웹 브라우저를 넘어 서버 개발까지 확장되며 더욱 강력한 언어로 자리 잡았다. 하지만, 자바스크립트의 진정한 힘을 이해하려면 브라우저 환경에서 어떻게 동작하는지 그 원리를 아는 것이 중요하다.

이 글에서는 자바스크립트와 브라우저의 동작 원리를 살펴본다.

 

1. 자바스크립트의 동작 원리와 브라우저 환경

 자바스크립트는 처음에는 웹 브라우저에서 동작하는 스크립트 언어로 시작했다. 하지만 구글의 Chrome V8 자바스크립트 엔진을 기반으로 한 런타임 환경인 Node.js가 등장하면서, 자바스크립트는 이제 브라우저를 넘어 서버 사이드 애플리케이션 개발에서도 활발히 사용되는 범용 프로그래밍 언어가 되었다.

 그럼에도 자바스크립트가 가장 많이 사용되는 분야는 여전히 웹 브라우저 환경이다. HTML, CSS와 함께 웹 페이지와 애플리케이션의 핵심 기술로 자리 잡으며, 사용자 경험을 풍부하게 만드는 데 필수적이다.

 대부분의 프로그래밍 언어는 운영체제(Operating System, OS) 위에서 실행된다. 반면, 자바스크립트는 브라우저 내부에서 HTML, CSS와 함께 동작한다. 이러한 특징은 자바스크립트를 브라우저 환경에 특화된 언어로 발전시켰으며, 효율적이고 유연한 프로그래밍이 가능하도록 만들었다.

 

자바스크립트는 브라우저에서 실행될 때, 브라우저 엔진 내부의 자바스크립트 엔진에 의해 처리된다. 이 과정은 크게 다음과 같은 단계를 따른다:

1. 코드 로드 및 파싱
   브라우저가 자바스크립트 파일 또는 <script> 태그 내부의 코드를 로드한 뒤, 이를 파싱(Parsing) 한다. 이 과정에서 문법적 오류를 검증하고, 고수준 언어인 자바스크립트를 저수준 바이트코드로 변환할 준비를 한다.
2. 바이트코드 생성 및 실행
   자바스크립트 엔진은 코드를 인터프리터(Interpreter) 와 JIT 컴파일러(Just-In-Time Compiler) 를 통해 바이트코드로 변환하고, 이를 실행한다.
   • 인터프리터: 자바스크립트를 한 줄씩 즉시 실행한다. 빠르게 실행되지만 효율성은 떨어질 수 있다.
   • JIT 컴파일러: 반복 실행되는 코드를 분석하고, 성능을 높이기 위해 최적화된 기계어 코드로 변환한다.
3. 실행 컨텍스트 생성
   자바스크립트는 실행 컨텍스트(Execution Context)를 기반으로 동작한다. 이는 현재 실행 중인 코드에 대한 환경 정보를 저장하는 구조로, 글로벌 컨텍스트, 함수 컨텍스트 등이 포함된다.
4. 콜 스택 관리
   자바스크립트는 단일 스레드로 동작하며, 콜 스택(Call Stack) 을 이용해 함수 호출과 실행을 관리한다. 함수가 호출되면 스택에 쌓이고, 실행이 끝나면 스택에서 제거된다.
5. 비동기 작업 처리
   자바스크립트는 비동기 작업을 처리하기 위해 이벤트 루프(Event Loop) 와 콜백 큐(Callback Queue) 를 활용한다. 브라우저의 비동기 API(예: 타이머, 이벤트 리스너)는 콜백 큐에 작업을 저장하고, 콜 스택이 비어 있을 때 이벤트 루프를 통해 실행된다.

 

2. 브라우저 동작 원리와 자바스크립트의 역할

 브라우저의 핵심 기능은 간단하다. 사용자가 입력한 URL에 해당하는 웹 페이지를 요청(Request) 하고, 서버로부터 응답(Response) 을 받아 사용자 화면에 표시하는 것이다. 이 과정에서 브라우저는 서버로부터 다양한 파일(HTML, CSS, 자바스크립트, 이미지 등)을 다운로드하고 처리한다.

HTML과 CSS의 처리 과정

1. HTML 파싱: 브라우저의 렌더링 엔진이 HTML 파일을 파싱하여 DOM(Document Object Model) 트리를 생성한다. DOM은 HTML 문서 구조를 계층적으로 표현한 객체 모델이다.
2. CSS 파싱: CSS 파일도 CSS 파서에 의해 파싱되어 CSSOM(CSS Object Model) 트리가 생성된다. CSSOM은 스타일 정보를 계층적으로 표현한 객체 모델이다.
3. 렌더 트리 생성: DOM과 CSSOM 트리가 결합되어 렌더 트리(Render Tree) 가 만들어진다. 이 렌더 트리를 기반으로 브라우저는 화면에 페이지를 그린다.

자바스크립트는 브라우저에서 동적인 동작과 사용자 상호작용을 구현하는 데 핵심적인 역할을 한다. HTML과 CSS가 구조와 스타일을 정의한다면, 자바스크립트는 그 위에서 생동감을 더하는 기능을 담당한다.

주요 역할

1. DOM 조작
   자바스크립트를 통해 DOM을 동적으로 수정할 수 있다. 예를 들어, 버튼을 클릭했을 때 특정 텍스트를 변경하거나, 새로운 HTML 요소를 추가하는 작업이 가능하다.
2. 이벤트 처리
   클릭, 스크롤, 키보드 입력 등 다양한 사용자 동작을 감지하고 이에 따른 동작을 정의할 수 있다.
3. 비동기 데이터 통신 (AJAX, Fetch API)
   자바스크립트를 사용하면 웹 페이지를 새로고침하지 않고도 서버와 데이터를 주고받을 수 있다. 이를 통해 더욱 빠르고 부드러운 사용자 경험을 제공할 수 있다.
4. 애니메이션과 상호작용
   CSS와 함께 자바스크립트는 애니메이션을 구현하고, 사용자가 보는 화면과 상호작용하는 요소를 동적으로 업데이트한다.

 

3. 자바스크립트의 처리 과정

자바스크립트는 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진에 의해 처리된다. 대표적으로 크롬의 V8 엔진, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore 등이 있다.

자바스크립트 처리의 주요 단계

1. Script 태그 발견: HTML 파서가 HTML 문서를 파싱하다가 <script> 태그를 만나면 DOM 생성 프로세스를 중단한다.
2. 제어권 전달: 자바스크립트 엔진이 DOM 생성을 중지한 상태에서 script 태그 내의 코드나 외부 파일(예: src 어트리뷰트로 지정된 파일)을 로드한다.
3. 코드 실행: 자바스크립트 엔진이 코드를 파싱하고 실행한다.
4. DOM 생성 재개: 자바스크립트 실행이 완료되면 제어권은 다시 HTML 파서로 돌아가 중단되었던 DOM 생성을 재개한다.

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

자바스크립트 실행 과정은 동기적(Synchronous) 으로 이루어진다. 이는 script 태그가 DOM 생성을 일시적으로 멈추게 하며, 코드 실행이 완료될 때까지 다른 작업이 대기 상태에 놓이는 것을 의미한다. 이로 인해 script 태그의 위치는 웹 페이지의 성능과 사용자 경험에 큰 영향을 미칠 수 있다.

 

4. 마치며

JavaScript에 대해 정리하다보니 몇가지 궁금한 것들이 이어 생각난다. DOM이란 무엇이고, 자바스크립트의 실행 과정이 동기적으로 이루어진다는 말은 무슨 의미일까? 다음 글들에 이어서 정리해보겠다.