오늘날의 웹 페이지의 구성에는 크게 3가지로 나뉘게 됩니다.
Web Page = HTML + CSS + Javascript웹 페이지의 문서 구조를 표현하는 HTML, 문서의 디자인 부분을 담당하는 CSS, 유저 인터렉션을 담당하는 Javascript가 바로 그것인데요, 이번에는 Javascript의 내용을 다뤄보고자 합니다.
JS의 문법에 대해 다루지는 않습니다.
Javascript 란?
웹 페이지에서 주로 화면 변경을 위해 사용되며, 기존의 정적 페이지 패러다임에서 직접적인 이벤트를 통해 사용자가 화면을 조작하게끔 느끼게 해 주는 다채로움을 첨가한 동적 페이지 패러다임으로의 변환을 주도하는 데 큰 역할을 했습니다.
HTML을 변경하거나, HTML의 이벤트를 인지할 수 있어 웹 개발에 필수적으로 쓰이는 언어입니다. 지금은 jQuery나 React 등 다양한 Frontend 라이브러리를 통해 확장 사용되고 있으며, 비단 웹 페이지 조작 언어 뿐만이 아니라 Node.js를 통한 백앤드 분야에도 활용되는 등 다양한 분야에서 사용되고 있습니다.
Javascript Runtime
이러한 Javascript는 다른 프로그래밍 언어들처럼 실행되는 환경이 존재합니다. 이를 JS Runtime 이라고 하며, JS Runtime은 JS Engine + API 및 기타 라이브러리/바이너리 파일들로 존재합니다.
아까 웹 페이지에서 동작한다고 했는데, 이는 클라이언트의 웹 브라우저에 Javascript Runtime환경이 설치 되어 있기 때문입니다. 이렇듯 Runtime 환경만 설치되면 동작하기 때문에, 웹 서버에서도 Runtime 환경 설치 후 사용이 가능합니다. (Node.js)
Javascript Engine 구성
JS Runtime에는 JS Engine 과 API로 구성이 되어 있다고 했는데, 그 중 하나인 JS Engine에 대해 살펴 보겠습니다. 먼저, 브라우저 별로 사용하는 엔진이 다릅니다.
브라우저 별 엔진 종류
- Firefox : 스파이더 몽키(Spider Monkey)
- Edge : Chakra
- Safari, React Native App : Javascript Core
- Chrome : v8
JS Engine의 구성은 다음과 같습니다.
- (call) Stack 영역
- 함수 실행 순서대로 적재 및 수행을 진행합니다.
- Heap 영역
- 선언 및 할당된 변수 및 함수를 저장합니다.
- 직접적인 메모리를 할당하는 구역 입니다.
📑 출처 및 참조
[ASAC] 강의 자료
https://velog.io/@kirin/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%97%94%EC%A7%84JavaScript-engine
