JavaScript 역사

현업에서 프론트개발자로 일하면서 면접관으로 몇번 들어가봤는데 기초적인 질문중에 자바스크립트의 등장 이유에대해서 정확하게 알고있거나 대답하는 사람들이 별로 없었다. 프론트를 주력으로 한다면 자바스크립트가 필수로 리액트나 뷰 같은 프레임워크나 타입스크립트 같은 슈퍼셋언어를 사용한다 하더라도 그 근본은 자바스크립트에서 시작한다. 본인이 주력으로하는 언어에 대해서 사용법은 당연히 알아야할뿐더러 왜 등장했고 어떻게 발전해왔는지에 대해서는 기본적인 내용이라도 숙지하고 면접에 임해야 하지 않을까 싶다. 물론 나 포함해서

✅ 자바스크립트 의 사용

일단 보편적으로 알려져있는 자바스크립트의 사용법에 대해서 말하자면 html 이 웹상에 문서화를 시켜 텍스트나 이미지를 그려내고 css 가 이 문서를 가공하여 보기좋게 예쁘게 만드는 역할을 한다. 그리고 자바스크립트는 이 단순하고 정적인 웹 페이지를 동적으로 보이도록 만들어주는 역할을하고 그것이 자바스크립트의 가장 기본적으로 맡은 역할이라고 볼 수 있겠다.

⏳ 자바스크립트의 역사

좀더 깊이 들어가서 자바스크립트의 역사에대해서 보자면 초기 목적은 사실 서버언어에서 담당하던 입력 유효성 검사를 위해서 등장했다. 자바스크립트가 없었을때는 필수값이나 입력값의 형식을 판단하기위해서는 무조건 서버로 한번 왕복을 해야만했고 그때당시의 엄청나게 서버가 느렸을거다 라고 생각한다면 회원가입을 하나 하더라도 엄청난 인내심이 필요하지않았을까 싶다.

웹의 인기

이렇게 초기에는 유효성 검사 목적으로 등장했지만 시간이 갈수록 웹이 인기를 얻고 사용자가 많아지면서 자바스크립트가 웹에서 차지하는 비중도 커지기 시작했다. 이때까지만해도 자바스크립트가 아닌 LiveScript 라고 불리우고있었다. 자바스크립트로 변경된 이유는 이때당시 인기가 있던 자바에 편승하기위해 변경된것이라고한다. (자바와 자바스크립트가 다르다는걸 인지하지 못했어도 이해한다…)

자바스크립트의 두가지 버전

이때당시 자바스크립트를 개발했던곳은 넷스케이프라는 곳이었고 내비게이터3에 자바스크립트 버전 1.1을 포함시키면서 넷스케이프는 웹을 선도하는 회사로 자리잡을 수 있었다. 이쯔음 마이크로소프트에서 인터넷익스플로러 라는 브라우저에 인력을 투입하기 시작했고 (재앙의시작..) 넷스케이프 내비게이터3가 출시되고 마소에서는 익스3을 출시하면서 여기에 포함시킨 자바스크립트를 JScript라고 불렀고 이름을 다르게 한 이유는 넷스케이프와의 저작권 문제를 피하기 위해서 였다.

이렇게 마소가 독자적 자바스크립트를 구현하여 웹브라우저에 포함시켜 넷스케이프와 마소가 구현한 두가지의 자바스크립트가 존재하게된다. 이때당시 자바스크립트를 제어할 표준이 없었기때문에 서로 다른 버전의 자바스크립트는 혼란만 일으키게되었다.

자바스크립트의 표준화

1997년 자바스크립트 1.1이 유럽 컴퓨터 제작자협회에 제안되고 자바스크립트언어의 표준을 정해 모든 플랫폼에서 사용가능하고 제조사에 중립적인 스크립트언어를 만들기로하고 자바스크립트 1.1을 손질하여 ECMA-262를 만들었고 이 표준이 우리가 알고있는 에크마스크립트(ECMAScript)로 불리우게된다.

자바스크립트 구현

표준은 정해졌지만 사실 자바스크립트는 표준보다 훨씬 많은것을 담고있었다. 표준은 말 그대로 기준을 정한것뿐 자바스크립트가 가진 내용을 모두 포함될 수는 없었을거다. 자바스크립트에는 ECMAScript + DOM + BOM 에 대한 구현을 담고있었고 ECMAScript는 웹 브라우저에 종속되지 않았다. ECMAScript는 단순히 명세에서 설명하는 부분들을 구현한 언어를 부르는 말일 뿐이었다.

ECMA-262 에서 정의한것

• 문법
• 타입
• 언선문
• 키워드
• 예약어
• 연산자
• 객체

ECMAScript의 여러가지 버전

ECMA-262 도 교정되고 재정립되면서 여러가지 버전이 생겨났고 이걸 ‘판’ 이라고 부른다. 제대로 인정받기 시작한건 3판때 부터인데 초판때만해도 자바스크립트를 구현하는걸 표준에 맞추지 않았고 2판은 초반의 교정본이었기때문에 초판과 다를게 없었다. 3판에서부터 문자열을 다루는 방법과 에러를 정의하고 숫자형 출력을 담았고 정규표현식과 예외처리를 지원하기 시작했다.

4판에서는 변수타입을 고정할 수 있도록하고 새로운 선언문과 데이터구조, 클래스, 데이터조작 등이 도입되었다. 다만 4판은 너무 급격한 도약이라 생각되어 공식으로 발행되지는 않았고 점진적으로 적용하기로하고 5판이 2009년에 공식적으로 발표되었다.

🖥 웹 브라우저의 지원

일단 다시 웹을 짚어보자면 넷스케이프에서 개발한 브라우저인 내비게이터3은 자바스크립트1.1을 내포하고있었고 ECMA-262 초판은 이 자바스크립트 1.1을 기반으로 완성되어졌지만 정작 자바스크립트 1.2는 초판을 준수하지않는 상황이 되버린다. 마소에서 JScript 1.0을 만들었지만 일부 잘못 구현된 기능에 업데이트가 필요했고 익스4에 포함된 버전이 JScript 3.0이었다. 하지만 이또한 ECMA-262 의 표준을 지키지는 못했다.

넷스케이프 내비게이터에 자바스크립트 1.3버전으로 업데이트하였는데 이때부터 ECMA-262 초판에 완전히 호환되었고 1.2에서 도입한 기능을 모두 유지하면서 유니코드표준도 지원하기 시작했다

2008년부터 주요 웹 브라우저에는 ECMA-262 3판을 준수하였고 익스8은 5판을 구현하는 최초의 브라우저였으며 익스9는 5판을 완전히 지원하게된다.

DOM

앞서 말했던것과 같이 자바스크립트는 ECMAScript + DOM + BOM 들을 포함하고있고 이중에 DOM 에 대해 알아보려고 한다.

DOM(Document Object Model) 은 문서객체모델 이라고 하며 XML 을 HTML에서 사용할 수 있도록 확장한 API 이다. DOM은 문서를 표현하는 트리를 생성하고 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 수정할 수 있다. DOM 역시도 익스4와 내비게이터4가 각각 다른 동적 HTML을 지원하면서 웹페이지를 새로고침 하지 않고서도 콘텐츠의 모양은 바꿀수 있게 되었지만 html 하나만으로 모든 브라우저에서 사용하기는 불가능하게 되었다.

따라서 W3C 에서 DOM과 관련된 작업을 진행했고 DOM 레벨1~3으로확장되어졌다.

DOM level1

문서구조를 표현하는것이 목표

DOM level2

마우스 및 사용자 인터페이스 지원 CSS 지원

DOM level3

문서를 저장하고 불러오는 통일된방법 문서가 유효한지 검사하는 방법

웹 브라우저의 DOM 지원

IE8 - DOM level1 IE9 - DOM level1~3

BOM

BOM(Browswer Object Model) 브라우저객체모델로 DOM과 다르게 브라우저창에 접근하고 조작할 수 있게 해주는 인터페이스이다. 이또한 BOM을 주관하는 자바스크립트 표준이 존재하지 않았었는데 HTML5 에서 표준화하고 있기때문에 개선되어지고있다.

자바스크립트 요약

주저리주저리 적었지만 자바스크립트는 결국 웹페이지와 상호작용하기위해 등장했고 ECMAScript 로 표준이 정해졌지만 이 표준에 정해지지않은것들에 대해서는 브라우저별로 특히 IE 는 개별적인 노선을 타고있었고 덕분에 항상 고통받고있다는것….

프론트엔드 개발자를 위한 자바스크립트 프로그래밍 일명 노랑이 책을 참고하여 작성하였습니다.