정답은 간단했다. 브라우저는 자바스크립트 엔진이 존재하기 때문에!
그래서, 자바스크립트 언어의 본질을 살펴보기로 했다.
javascript란?
웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
(원래 이름은 LiveScript였다고 한다👀)
- 자바스크립트 엔진이 있는 모든 디바이스에서 동작 가능하다.
- 싱글 쓰레드 기반 언어이다.
(호출 스택은 하나 > 비동기 콜백 함수 지원)
싱글스레드 언어
자바스크립트의 메인 스레드는 이벤트 루프이고, 이벤트 루프가 싱글 스레드이다.
Q. 그럼 어떻게 한번에 여러개의 요청을 처리할까?
비동기 호출로 해결이 가능하다!
비동기 런타임 과정
Call Stack: 자바스크립트에서 수행해야 할 함수들을 순차적으로 스택에 담아 처리
Web API: 웹 브라우저에서 제공하는 API로 Ajax, Timeout등의 비동기 작업 수행
Task Queue(Callback Queue): Web API에서 넘겨받은 Callback 함수들을 저장
Event Loop: Call Stack이 비어있을 시 Task Queue의 작업을 Call Stack으로 옮김
Q. 왜 싱글스레드를 사용할까?
이유는 간단하다. 다루기 쉽기 때문이다. 만약, 멀티 스레드를 사용했다면 웹페이지에서 발생하는 동시성 문제를 해결해야 하고 엄청난 작업이 소요된다고 한다.
단일 스레드를 사용하면서 복잡한 시나리오를 신경쓰지 않고 비동기 처리를 통해 쉽게 여러 요청을 처리할 수 있기 때문이다!
script란?
javascript로 작성한 프로그램
웹페이지를 불러올 때 스크립트는 자동으로 실행된다.
특별한 준비나 컴파일 없이 보통의 문자 형태로 작성 및 실행이 가능하다.
자바스크립트 엔진이란?
자바스크립트 코드를 실행하는 프로그램 또는 인터프리터
대체적으로 웹 브라우저에서 사용된다.
V8(Chrome, Opera), SpiderMonky(firefox) 등이 있다.
자바스크립트 엔진
Memory Heap: 메모리 할당이 일어나는 곳
Call Stack: 코드 실행에 따라 호출 스택이 쌓이는 곳
자바스크립트 엔진 동작 과정
- 엔진이 스크립트를 읽는다.(파싱)
- 읽어 들인 스크립트를 기계어로 전환한다.(컴파일)
- 기계어로 전환된 코드가 실행된다.
자바스크립트 강점
- HTML/CSS의 완전한 통합
- 간단한 일은 간단하게 처리 가능
- 모든 주요 브라우저에서 지원
즉, JS는 본래 브라우저에서 쓸 목적으로 고안된 언어이지만 지금은 다양한 환경에서 쓰이고 있다. 간단한 지식이지만, 브라우저와 JS간의 관계, 자바스크립트 엔진의 원리 를 이해할 수 있었다!
공부하면서 개발자의 편리를 생각해준 고마운 언어라고 느껴졌다, 👍🏼
참고문서
https://ko.javascript.info/
https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8_%EC%97%94%EC%A7%84
