본문 바로가기

JavaScript/Behind the Scenes

-JavaScript-

자바스크립트는

1. High-level 

2. Garbage-collected

3. Interprted or just-in-time compiled

4. Multi-paradigm

5. Object-orient (prototype-based)

6. First-class fuctions

7. Dynamic

8. Single-threaded

9. Non-blocking IO by Event loop 

language 이다.

 

*Compilation vs Interpretation

 

 

 

* 짧게 보는 자바스크립트의 역사

-자바스크립트는 웹 페이지와 상호작용하도록 디자인된 스크립트 언어이다.

 

처음 자바스크립트 언어를 설계할 당시에는 비동기 작업을 비롯한 프로그래밍 언어와 관련한 많은 내용은 당연히 포함되지 않았다. 초창기 웹 브라우저는 Form을 작성하여 제출하면 서버에서 웹 페이지를 반환하였다. 자바스크립트의 본래 목표는 웹에서 더 빠른 사용자 피드백을 제공하고 인터넷 트래픽을 줄이는 용도였다. 이를 위해 서버가 수행하던 데이터 유효성 검사를 클라이언트에서 자바스크립트를 통해 처리하였. 이후 점점 기능이 확대되어 브라우저의 윈도우와 컨텐츠의 거의 모든 부분과 상호작용을 하기에 이르렀다. 자바스크립트가 이렇게 강력한 프로그래밍 언어로 성장하리라고는 아무도 예상하지 못했다. 자바스크립트는 단순하면서도 복잡한 언어이다. 자바스크립트의 잠재력을 완전히 이끌어내려면 그의 성격과 역사 그리고 한계에 대해 이해하는 것이 중요하다.

 

 당시 기술 혁신의 첨단을 걷고 있던 넷스케이프의 브랜드 아이흐는 처음엔 mocha, 나중에 livescript라고 불린 스크립트 언어를 개발했다. 이 언어는 1995년 당시 브라우저와 서버 모두에서 사용하려는 의도 속에서 개발되었다. 넷스케이프는 출시 직전 라이브스크립트라는 이름을 당시  큰 인기를 얻고 있던 자바를 따라 javascript라는 이름으로 바꾸었다. 자바스크립트 1.0은 대성공이었고 넷스케이프는 웹을 선도하는 기업으로 자리매김할 수 있었다. 그 즈음 마이크로소프트 또한 인터넷 익스플로러의 본격적인 투자에 나서기 시작했다. 이로써 넷스케이프 내비게이터의 자바스크립트와 마이크로소프트 인터넷 익스플로러의 jscript, 이 두 가지 자바스크립트 버전이 존재하게 되었다. 문법이나 기능을 제어할 표준 없이 각자 다른 언어를 구현하는 것은 업계에 큰 혼란을 초래할 것이라는 불안감을 불러왔다. 1997년 자바스크립트 1.1이 유럽 제작자 협회(ECMA)에 제안되었고, "문법과 의미를 표준화하여 일반적인 목적에 쓸 수 있고 플랫폼을 가리지 않으며 제조사에 중립인 스크립트 언어"가 만들어지게 되었다. 여러 기업의 프로그래머들이 모여 몇 달에 걸쳐 자바스크립트 1.1을 손질해 ECMA-262를 만들었고, 이 표준은 ECMAscript라는 이름으로 정의된다. 이듬해 국제 표준화 기구와 국제 전기 표준 회의에서도 ECMAscript를 표준으로 받아들여졌다. 브라우저 제작자들은 ECMAscript를 이용하여 자사의 자바스크립트 구현 기반으로 삼았다. (모질라는 넷스케이프를 계승한 브라우저이다.)

자바스크립트 구현에는 크게 세 가지로 나뉜다.

  1. 자바스크립트 코어(ECMAscript)

  2. 문서 객체 모델(DOM)

  3. 브라우저 객체 모델(BOM)

 

 ECMAscript는 더 견고한 스크립트 언어를 만들기 위한 기반 언어이다. ECMAscript에서는 타입, 연산자, 키워드, 선언문, 예약어, 객체 등 언어의 문법적인 영역, '저수준' 단계를 정의한다. 웹 브라우저는 ECMAscript를 구현하는 호스트 환경(런타임)일 뿐이다. 호스트 환경은 ECMAscript를 기본적으로 구현하고 이 환경 자체의 인터페이스 구실을 하도록 확장된 디자인을 제공한다. 여기서 확장된 디자인이란 돔 같은 기능(API)을 말한다. 브라우저 외에 다른 호스트 환경에는 서버 사이드 자바스크립트 플랫폼인 Node.js, 어도비 플래시 등이 있다. 

 

 DOM은 웹 페이지의 컨텐츠를 조작하는 메소드와 인터페이스를 제공한다. 동적으로 HTML을 지원하게 되면서 개발자들은 처음으로 웹 페이지를 새로고침하지 않고도 컨텐츠의 모양을 바꿀 수 있게 되었다. 이는 웹 기술에서 혁명이라 할 큰 발전이었다. 

DOM 레벨 1의 목표는 문서 구조를 표현하는 것이다.

DOM 레벨 2의 목표는 다음과 같은 방대한 기능을 지원한다.

  -DOM Views: 문서의 다양한 뷰 (CSS 스타일 적용 전후를 추적에 관한 인터페이스 등)

  -DOM 스타일: CSS를 통해 요소의 스타일을 바꾸는 방법

  -DOM 이벤트: 이벤트와 이벤트 처리에 관한 방법

  -DOM 이동과 범위: 문서 트리를 이동하고 조작하는 방법

DOM 레벨 3에서는 다음과 같은 기능을 지원한다.

  -DOM 로드 및 저장: 문서를 저장하고 불러오는 통일된 방법

  -DOM 유효성 검사: 문서가 유효한 지 검사하는 방법

  -XML 1.0 전체 지원

 

 BOM은 브라우저 창에 접근하고 조작할 수 있게 하는, 브라우저와 상호작용하는 인터페이스이다. BOM을 이용하면 웹 페이지와는 별개의 컨텍스트에서 브라우저와 상호작용 할 수 있다. BOM의 핵심에는 브라우저의 인스턴스인 window 객체가 있다. window 객체는 웹 페이지에서 정의한 모든 객체, 변수, 함수 등의 global 객체 구실을 한다. BOM은 일차적으로 브라우저 윈도우와 프레임을 다루는 API이긴 하지만 일반적으로 다음과 같은 브라우저의 고유한 자바스크립트 확장 또한 BOM의 일부로 간주한다.

  -브라우저 창을 새로 띄움

  -브라우저 창을 움직이거나 크기를 조절하거나 닫음

  -브라우저의 상세 정보를 반환하는 navigator 객체 지원

  -불러온 페이지의 상세 정보를 반환하는 location 객체 지원

  -사용자의 화면 해상도에 대해 상세 정보를 반환하는 screen 객체 지원

  -XMLHttpRequest 및 쿠키 지원

 

 문서 객체 모델(DOM API)의 등장으로 기존의 웹 페이지 파일 전체를 주고 받는 방식에서 페이지의 일부 변경된 데이터만을 전달하는 것이 가능해졌다. 그리고 훗날 AJAX의 핵심 기술인 XHR(XMLHttpRequest)의 등장으로 기존의 페이지 로드 모델에서 벗어나 백그라운드에서 브라우저는 서버와 통신할 수 있게 되었다. DOM과 AJAX는 웹의 발전 그리고 자바스크립트의 부흥에 매우 큰 영향을 미쳤다.

 점차 브라우저와 서버의 통신 방식은 비동기 통신에 극도로 의존되어 갔다. 자바스크립트는 본래 사용자 이벤트에 응답하는 짧고 간단한 프로그램을 실행하기 위해 만들어졌기 때문에 이벤트 루프 모델을 이용하여 비동기 작업을 구현한다.

 

 

 

 

'JavaScript > Behind the Scenes' 카테고리의 다른 글

HTML에 자바스크립트 파일 로드하기  (0) 2022.09.09
Hoisting  (0) 2022.07.30
Event Loop  (0) 2022.07.28
Execution Context & Scoping  (0) 2022.07.11