자바스크립트(JS) 개념과 브라우저 동작 원리

자바스크립트(JS)란 무엇인가?

자바스크립트는 웹 페이지에 인터랙티브한 동적 기능을 더하기 위해 탄생한 언어로 인터프리터 언어, JIT 컴파일러, 싱글 스레드 라는 주요 특징이 있다.

• 인터프리터 : 코드를 한 줄씩 읽어가며 즉시 실행하는 방식으로 초기 컴파일 시간이 없지만 실행 속도가 상대적으로 느릴 수 있다.
• JIT 컴파일러 : 인터프리터의 느린 속도를 보완하기 위한 기술로, 실행 중에 자주 반복되는 코드를 발견하면, 그 부분만 따로 기계어로 빠르게 바꿔서 저장한다.
• 싱글 쓰레드 : 한 번에 하나의 작업만 처리할 수 있는 구조로 동시성 이슈를 피할 수 있지만, 긴 작업이 진행되면 다른 작업을 대기해야하는 한계가 있다.
  (자바스크립트에서 이를 보완하기 위해 이벤트 루프 기반의 비동기 처리 방식을 사용한다.)

자바스크립트의 비동기 처리 방식

• 싱글 쓰레드 동작 : 자바스크립트 엔진은 한 번에 하나의 코드만 순서대로 실행한다.
• 브라우저 지원 : 시간이 오래 걸리는 작업(서버 통신, 타이머, 이벤트 대기)는 자바스크립트가 직접하지 않고, 브라우저(Web API)가 멀티 쓰레드로 동작하여 작업을 대신 처리한다.

브라우저의 전체 구조와 핵심 구성 요소

자바스크립트가 실행되는 브라우저 환경(Run-time)은 화면을 그리는 역할, 코드를 실행하는 역할, 그리고 비동기를 처리하는 주변 요소들로 분업화되어 있다.

JS가 브라우저에서 실행되는 큰 흐름

비동기 코드(setTimeout)가 포함된 동작 과정이다.

1. 코드 실행: 코드가 순서대로 JS 엔진의 **콜 스택(Call Stack)**에 들어가 바로 실행된다.
2. 브라우저(Web API) 위임: setTimeout이나 fetch 같은 비동기 함수를 만나면, JS 엔진은 이를 Web API로 넘겨버리고 즉시 다음 코드를 실행한다.
3. 태스크 큐 대기: Web API에서 타이머가 끝나거나 응답이 오면, 등록된 콜백 함수를 **태스크 큐(Task Queue)**로 이동시킨다.
4. 이벤트 루프의 개입: 콜 스택이 완전히 비어있게 되면, 이벤트 루프가 태스크 큐에 대기 중인 콜백 함수를 콜 스택으로 끌어올려 실행한다.

Strict Mode (엄격 모드)

'use strict'; 구문은 자바스크립트의 문법을 더욱 엄격하게 검사하도록 만드는 기능이다.

• 사용 이유: 자바스크립트의 느슨한 규칙으로 인한 오류를 방지하고, 더 안전하고 최적화된 코드를 작성하기 위해 사용한다.
• 주요 특징:
  • 선언 없는 변수 금지: x = 10; 처럼 var/let/const 없이 변수를 선언하면 에러가 발생한다.
  • this 바인딩 변경: 일반 함수 내부에서의 this가 전역 객체(window) 대신 undefined로 지정된다.
  • 읽기 전용 속성 수정 불가: 수정할 수 없는 객체 속성을 변경하려 하면 에러를 발생시킨다.
• 적용 방법: 파일 최상단 또는 함수 내부 첫 줄에 'use strict';를 작성한다. (ES6 모듈 환경에서는 기본적으로 적용)