프론트엔드 개발자로서, 자바스크립트 동작 원리를 완벽하게 이해하는 것은 핵심적인 역량 중 하나이다. 이 글에서는 "프론트엔드 면접 필수질문 - 자바스크립트 동작 원리 이해를 위한 용어정리"라는 주제로, 자바스크립트의 핵심 원리와 관련된 중요한 용어들을 정리하는 것이 목적이다. 글 내용에서는 AJAX, V8 엔진, ECMAScript, Web API, Node.js, 콜밡 함수, 싱글 스레드, 블로킹, 그리고 비동기 처리에 대한 핵심 개념과 원리를 다룬다.
AJAX란?
AJAX 는 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 기능이다.
- AJAX가 등장하면서 효율적으로 렌더링이 가능해짐
- 이전에는 서버에서 완전한 html, css를 전송 받아 웹페이지 전체를 렌더하기 때문에, 화면 전환이 발생하면 전체를 처음부터 다시 렌더링 해야했음 → 깜빡임 발생, 웹 앱의 한계
- AJAX로 서버에서 필요한 부분만 데이터를 전송 받아 필요한 부분만 렌더링 가능해짐 → 웹 브라우저에서도 빠른 퍼포먼스와 부드러운 화면전환 가능해짐
V8엔진이란?
- 웹 서버가 수행하던 역할이 브라우저로 이동하는 계기가 됨 → 웹 앱에서 프론트엔드 영역이 주목받게 되는 계기
자바스크립트는 보통 ECMAScript(자바스크립트의 표준 명세) + Web API
👉 자바스크립트 엔진 V8의 구성
자바스크립트 V8 엔진 소스 안에는 하나의 힙과 하나의 콜 스택만 있다.
setTimeout, DOM, AJAX(HTTP 요청)등과 같은 비동기 메소드가 없다.
👉 자바스크립트 런타임 웹 브라우저의 Web APIs
setTimeout, DOM, AJAX(HTTP 요청)가 있다.이벤트 루프와 콜백 큐를 가지고 있다.
Node.js란?
- 자바스크립트 실행 환경임. 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있도록 함.
- 웹 브라우저를 벗어나 서버 사이드 애플리케이션으로도 사용되는 범용 프로그래밍 언어로 자리잡게 됨 (프 + 백)
싱글 스레드란?
싱글 스레드는 동기적으로 일을 처리한다. 웹 브라우저의 WebAPIs는 비동기적으로 일을 처리한다.
콜백함수란?
콜백 함수는 다른 함수에 인수로 전달되어 나중에 실행되는 함수입니다.
- 비동기 프로그래밍이 가능하고 특정 작업이나 작업이 완료되면 함수를 다시 호출할 수 있습니다.
- 콜백 함수는 일반적으로 이벤트 처리, 서버에서 데이터 가져오기와 같은 비동기 작업, 맵, 필터 및 감소와 같은 고차 함수 구현과 같은 시나리오에서 사용됩니다.
- 실행 흐름을 제어하고 사용 가능할 때 작업의 결과 또는 오류를 처리하는 방법을 제공합니다.
👉 싱글 스레드는 블로킹을 만든다.
- 싱글 스레드는 동기적으로 처리되기 때문에 블로킹을 만든다.
- 동기적으로 AJAX 요청을 보내면 브라우저는 모든 응답이 완료될 때까지 멈춰있다. 동기적으로 실행되는 네트워크 요청이 콜 스택을 블로킹하여 브라우저는 다른 일을 할 수가 없다.
- 여기서 주의할 점은 ‘동기적으로 네트워크 요청을 보내면’ 그렇다는 것이지 웹 브라우저가 제공하는 API가 동기적으로 요청을 보낸다는 것이 아니다.
- (V8에는 힙과 스택만 가지고, 웹 브라우저에서 제공하는 API를 이용해서 네트워크 요청을 한다고 했다.
그래서 결론은 웹 브라우저는 비동기적으로 네트워크 요청을 보낸다는 것이다.아래에서 좀 더 자세히 알아보자.)
블로킹이란?
- 웹 브라우저에서 코드가 실행되는데 코드가 종료될 때까지 유저가 클릭을 해도 어떠한 반응을하지 않는 상태가 된다.
- Call Stack(콜 스택)이 멈춘 상태, 이 상태를 블로킹 상태라고 한다.
웹의 비동기 처리 알아보기
동기적 처리의 문제점 때문에 브라우저는 AJAX 요청을 비동기적으로 실행한다.
👉 웹 브라우저의 Web APIs는 비동기로 처리한다.
- 앞에서 웹 브라우저에 Web APIs 에는 setTimeout, DOM, AJAX(HTTP 요청)이 있다고 했다.
- 그리고 이벤트 루프와 콜백 큐를 가지고 있다.
- 자바스크립트 자체는 비동기적으로 요청을 처리할 수 없다. 자바스크립트 런타임 안에 지원하는 API로 비동기로 요청을 처리할 수 있게 하는 것이다.
👉 비동기 콜백으로 싱글 스레드 프로그래밍 언어에서의 블로킹을 해결할 수 있다. → 논 블로킹
- 어떤 코드를 실행하면 결국 콜백을 받고 이걸 나중에 실행한다는 말이다.
- 자세하게 풀어서 아야기하면 함수 호출 시 당장 실행하는 것이 아니라(동기→블로킹) 일단 어느 곳에 쌓아놓고 동시에 요청을 처리하고(비동기→논 블로킹) 요청이 완료된 순서대 로처리(스택 이용) 한다는 말이다.