자바스크립트란 무엇인가

프론트엔드 개발자를 위한 자바스크립트 프로그래밍 정리

자바스크립트는 1995년에 처음 등장한 언어로 서버언어에서 담당했던 단순한 유효성검사를 대신하기 위해 등장했습니다.

간추린 역사

자바스크립트는 당시 넷스케이프에서 일하던 ‘브랜든 아이흐’가 처음엔 Mocha, 나중엔 LiveScript라고 불린 스크립트 언어를 개발했고,
이 언어는 자바의 인기에 편승하기 위해 자바스크립트로 이름이 변경되어 넷스케이프 네비게이터2에 포함되어 출시되었습니다.

이 즈음에 마이크로소프트는 인터넷 익스플로러 3에 JScript라는 이름으로 자바스크립트를 선보이는데 이 이름은 저작권 문제를 피하기 위함이었습니다.
이렇게 서로 다른 버전의 자바스크립트가 존재하자 혼란이 가중되었고 이를 표준화하기로 결정합니다. 그래서 ECMA는 TC39를 발족하여 “문법과 의미를 표준화하여 일반적인 목적에 쓸 수 있고 플랫폼을 가리지 않으며 제조사에 중립인 스크립트 언어”를 만들기로 했고,
여러 회사들이 프로그래머를 투입해 ECMA-262를 만들었고 이 표준은 ECMAScript라는 이름의 스크립트 언어가 되었습니다.
그리고 ISO에서는 ECMA-262를 표준으로 받아들여졌지만 이 당시에는 브라우저마다 구현 완성도에서 차이를 보였습니다.

자바스크립트 구현

자바스크립트는 ECMA-262에 정의된 것보다 훨씬 많은 내용을 담고 있습니다.

먼저 자바스크립트의 구현은 3가지로 나누어집니다.

  • 코어(ECMA Script)
  • 문서 객체 모델(DOM)
  • 브라우저 객체 모델(BOM)

ECMA Script

ECMA-262에서 정의한 언어는 더 견고한 스크립트 언어를 만들기 위한 기반 언어입니다.
브라우저는 단순히 ECMA Script의 호스트환경일 뿐입니다. 브라우저는 ECMAScript를 기본으로 하고 인터페이스 구실을 하도록 DOM같은 확장을 제공합니다.
ECMAScript는 단순히 명세를 구현한 언어를 부르는 말입니다. 자바스크립트나 어도비 액션스크립트가 대표적인 ECMAScript를 구현한 언어입니다.

####ECMA Script가 정의하는 것들 - 문법
- 타입
- 선언문
- 키워드(실제로 사용되는 단어 ex. if, for)
- 예약어(실제로 사용되지 않지만 확장을 위해 예약해놓은 단어 ex. private)
- 연산자
- 객체

####ECMA Script의 ‘판’
ECMA Script는 버전을 ‘판’으로 구별합니다.
현재 ECMA-262 최신판은 2009년에 만들어진 5판입니다.
보통 표준에 대한 첫번째 업데이트로 3판을 봅니다. 왜냐하면 문자열, 에러정의, 숫자 출력 등을 업데이트하는 등 표준을 더 잘 준비했기 때문입니다.
ECMA Script 4판은 언어를 완전히 새롭게 변경했습니다. 여기서 변수타입의 고정, 새로운 선언문, 데이터구조, 진정한 클래스와 클래스에 기반한 상속, 데이터 조작방법들이 도입되었습니다.
하지만 너무 급진적인 변화라 폐기되었습니다.
4판에서 폐기된 내용은 5판에 도입이 되었고 JSON객체, 상속과 고급 프로퍼티 정의에 쓰이는 메소드, ECMAScript엔진이 코드를 해석하고 실행하는 방법을 일부 확장한 스트릭트 모드를 도입하였습니다.

####ECMA Script 표준준수
- 모든 타입과 값, 객체, 프로퍼티, 함수, 프로그램 문법과 시맨틱을 ECMA-262에 설명한 그대로 구현해야합니다.
- 유니코드 문자 표준을 지원해야 합니다.

위에 내용은 필수조건입니다. 그리고 아래내용은 선택사항입니다.

  • ECMA-262에 정의하지않은 값, 객체, 프로퍼티, 함수를 추가할 수 있습니다.
  • ECMA-262에 정의되지 않은 프로그램이나 정규 표현식 문법을 지원할 수 있습니다.

문서객체 모델

DOM은 XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스 입니다.
DOM은 전체 페이지를 노드의 계층 구조로 변환하고 다양한 타입의 노트로 표현됩니다.
DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 수정할 수 있습니다.

####DOM이 필요한 이유
인터넷 익스플로러와 넷스케이프 네비게이터는 각기 다른 DHTML을 제공했습니다. 이를 통해 개발자들은 새로고침하지 않고도 콘텐츠를 변경할 수 있게 되었습니다.
하지만 두 프로그램의 DHTML은 완전히 달라서 표준이 필요하게 되었고 W3C에서 DOM관련 작업을 하게 되었습니다.

####DOM 레벨
DOM레벨1은 두가지 모듈로 구성됩니다. 하나는 DOM 코어인데 이 모듈은 XML 기반문서를 노드 트리로 변환해 문서의 어느 부분이든 쉽게 접근하고 조작할 수 있게 합니다.
다른 하나는 DOM HTML인데 HTML에 밀접한 객체와 메서드를 DOM 코어에 추가해 확장한 것입니다.

DOM레벨2에서는 마우스 및 사용자 인터페이스 이벤트를 지원하기 시작했고, 범위와 이동을 추가했으며 CSS를 지원합니다.
DOM레벨2에 도입한 모듈

  • DOM Views - 문서의 다양한 뷰 한 예로 CSS적용 전후 추척하는 인터페이스
  • DOM 이벤트
  • DOM 스타일 - CSS통해 요소의 스타일 변경
  • DOM 이동과 범위 - 문서트리의 이동과 조작

DOM레벨3은 문서를 저장하고 불러오는 방법, 문서유효성검사를 제공합니다. 또한 XML 1.0전체를 지원합니다.

브라우저 객체 모델

브라우저 창에 접근하고 조작할 수 있는 인터페이스로 BOM을 사용하면 표시된 페이지와는 별개의 컨텍스트에서 브라우저와 상호작용을 할 수 있습니다.
BOM은 최근 HTML5에 의해서 어느정도 표준화 시키고 있습니다.
BOM은 1차적으로 브라우저 창과 프레임을 다루는 인터페이스긴 하지만 일반적으로 브라우저에 고유한 자바스크립트 확장도 BOM으로 간주합니다. 다음이 그 예입니다.

  • 브라우저 창을 새로 띄움
  • 브라우저 창을 움직이거나 크기를 조절하고 닫음
  • 브라우저의 상세정보를 반환하는 navigator 객체
  • 불러온 페이지의 상세정보를 반환하는 location 객체
  • 사용자의 화변해상도에 대해 상세정보를 반환하는 screen 객체
  • XMLHttpRequest와 익스플로러의 ActiveXObject같은 커스텀 객체

window나 navigator는 사실상 표준이지만 브라우저마다 구현이 다름

##참고자료
Nicholas C. Zakas. (2013). 프론트엔드 개발자를 위한 자바스크립트 프로그래밍, (한선용 옮김). 인사이트

Comments