자바스크립트의 역사와 브라우저 전쟁: 넷스케이프부터 파이어폭스까지

안녕하세요 찐망고입니다.

 

자바스크립트 첫 포스팅은 스크립트의 역사부터 시작하려고 했는데

검색해 보니 정리가 잘된 블로그들이 많더라고요..

그래서 해보는 링크 공유

자바스크립트의 역사

 

추가로 더 써보자면

 

자바스크립트의 탄생

자바스크립트는 1995년, 브렌던 아이크(Brendan Eich)가 넷스케이프와 썬 마이크로시스템즈와 함께 개발한 언어입니다.

자바스크립트는 웹 브라우저에서 좀 더 동적인 기능을 제공하기 위해 만들어졌는데,

초기에는 간단한 폼 검증과 같은 작업에 주로 사용되었죠.

자바스크립트 1.0이 처음 출시 되었을 때, 넷스케이프 내비게이터는 브라우저 시장을 장악하고 있었는데요.

당시 마이크로소프트는 자사의 인터넷 익스플로러(IE)를 통해 넷스케이프를 따라잡으려 했고,

이 과정에서 VB스크립트와 J스크립트라는 언어를 도입했어요.

결국, 넷스케이프와 썬 마이크로시스템즈는 유럽 컴퓨터 제조 협회(ECMA)에 표준안을 제출하여,

자바스크립트는 ECMAScript라는 표준을 따르게 되었습니다.

ECMAScript는 자바스크립트의 핵심 표준을 정의하며, 현재 우리가 사용하는 모든 자바스크립트 환경의 기반이 되는 거죠.

 

 

브라우저 전쟁과 표준화

1996년에는 넷스케이프와 인터넷 익스플로러 3.0 버전이 모두 자바스크립트 1.1 표준안을 거의 지원하게 되었고,

이후 두 브라우저는 시장점유율을 놓고 개싸움 치열한 경쟁을 벌입니다.

이 과정에서 웹 디자이너와 개발자들은 브라우저 간의 비표준적 요소와 충돌로 인해 많은 어려움을 겪었죠

특히, DHTML(다이내믹 HTML)의 등장으로 HTML, CSS, 자바스크립트를 결합한 동적인 웹 페이지가 가능해졌지만,

브라우저마다 다르게 구현된 DOM(Document Object Model)때문에

웹 개발자들은 각 브라우저에 맞춘 코드를 작성해야 하는 어려움을 겪었습니다.

 

예를 들어, 넷스케이프 DOM은 레이어를유일한 아이디(id)로 정의하고

 document.layers ['element']라고 표현했으며, 마이크로소프트 DOM은  document.all ['element']로 접근했죠.

둘 사이에 결과적인 차이는 없지만 결과적으로 스크립트에서  DOM을 다루기 위해 개발자들은 별도의 코드를 작성해야 했습니다

 

결국, 1998년 W3C와 주요 브라우저 회사들이 협력하여 DOM Level1이라는 표준을 수립하게 되었고,

이로 인해 브라우저간의 호환성이 크게 개선되었죠.

 

 

 

DOM과 BOM

DOM은 웹 문서를 프로그램적으로 접근하고 수정할 수 있게 해주는 표준 인터페이스입니다.

문서 내의 모든 요소는 객체로 표현되며, 자바스크립트를 통해 이를 동적으로 조작할 수 있습니다.

DOM의 트리구조는 웹 문서의 계층적 구조를 표현하며, 요소 간의 부모-자식 관계를 정의합니다.

 

W3Schools.com

 

 

HTML DOM 객체 트리

 

DOM은 웹페이지에서 HTML 문서에 접근하기 위한 인터페이스로,

문서 내 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공합니다.

이를 통해 새로운 HTML 요소나 속성을 추가하거나 삭제하고, 기존 속성을 수정하거나

CSS 스타일을 변경하는 작업을 할 수 있습니다.

 

W3C DOM 표준은 세 가지 모델로 구분되며, 앞으로 저는 HTML DOM에 대해 주로 포스팅할 예정입니다.

(실제로 제가 가장 잘 아는 부분이기도 합니다. 😀)

 

한편, BOM(Browser Object Model)은 웹 브라우저 자체와 관련된 객체 모델로,

브라우저 창이나 탭과 관련된 정보와 기능을 제공합니다.

예를 들어, 브라우저의 크기나 위치를 조절하거나, 브라우저 기록에 접근하는 등의 기능을 BOM을 통해 수행할 수 있죠

 

 

 

현대 자바스크립트의 활용

자바스크립트는 비교적 쉽고 단순하여 배우기 쉽고,

다양한 프로그래밍기법을 배울 수 있으며,  웹개발분야에 가장 많은 자료와 예제를 찾을 수 있습니다.

 

가장 큰 장점 중 하나는 결과를 즉시 확인할 수 있다는 점인데요.

브라우저 개발자 도구에서 콘솔 창에 코드를 입력하면  바로 결과도 확인할 수 있습니다. (크롬 기준)

 

자바스크립트는 웹 브라우저 외에도 다양한 환경에서 사용되고 있어요.

예를 들어, Node.js를 통해 서버사이드 자바스크립트를 구현하여, 서버 애플리케이션 개발에 널리 활용하고 있으며,

Electron을 통해 자바스크립트 기반의 데스크톱 애플리케이션을 개발할 수 있죠

 

현재 대부분의 최신 브라우저는 ECMAScript 6(ES6)까지 지원하고 있어, 모던 자바스크립트 기능을 사용할 수 있습니다.

(단, Internet Explorer와 같은 구형 브라우저는 지원하지 않을 수 있습니다.)

 

비밀 댓글을 달아주신 내용을 덧붙입니다.

한편, ECMAScript는 자바스크립트의 표준 사양이며, 자바스크립트는 이 사양을 따르는 스크립트 언어입니다.

일반적으로 "JavaScript"라는 용어는 ECMAScript뿐만 아니라, Web API와 같은 다양한 요소들을 포괄합니다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/JavaScript_technologies_overview
`그러나, 웹 브라우저 맥락에서 포괄적으로 쓰이는 용어로써의 "JavaScript"는 사실 매우 다른 요소 여럿을 포함하는 것입니다. 그중 하나는 핵심 언어(ECMAScript)고, 다른 하나는 DOM(Document Object Model)을 포함한 Web API입니다.`

자바스크립트는 더 이상 웹 브라우저에만 국한된 언어가 아닙니다.

Javascript는 Server (Nodejs), 데스크톱 (electron) 등 여러 플랫폼에서 사용할 수 있는 언어입니다

 

 

 

 

 

브라우저 전쟁 얘기를 하다 말았죠?

결국, 마이크로소프트가 승리했습니다. 그 회사가 뭐 하는 회사예요 윈도 만드는 회사잖아요

윈도 설치 시  인터넷 익스플로러(IE)가 기본적으로 설치되면서 사용자가 자연스럽게 늘어났습니다.

이런 상황에서 IE는 비표준적인 태그와 DOM 기능을 사용해 웹 표준과 충돌을 일으키기도 했습니다.

이 부분은 많은 개발자들에게 불편함을 주었고

이후에도 IE는 애증하는 상대가 되어 결국 기념비까지 만들어 주게되..

그는 다른 브라우저를 다운로드하는 좋은 도구였습니다

 

 

한편, 넷스케이프는 브라우저 개발을 중단하게 되었지만,

대신 오픈소스 렌더링 엔진을 기반으로 한 파이어폭스(Firefox)가 탄생하게 되었습니다.

넷스케이프 6.0과 7.0이 파이어폭스의 기초가 되었죠.

 

현재는 애플의 사파리, 구글의 크롬, 그리고 여전히 사용 중인 오페라 등 다양한 브라우저가 존재합니다.

그러나 한때 우리나라에서는 IE의 점유율이 거의 90%에 이를 정도로 높았고,

이로 인해 IE에서만 잘 보이는 웹사이트를 만드는 일이 빈번했습니다.

웹 표준을 무시하고 IE에 맞춘 사이트를 제작하는 경우가 많았던 것이죠.

그래서 그 시절 테이블 요소로 사이트 전체를 만드는 말도 안 되는 작업물이 많았는데

(저도 테이블로 사이트 여럿 만든 사람 중 하나였지만..)

아 나 근데 저거 시작한 사람이 제일 궁금함 어떻게 테이블로 사이트를 만들 생각을 했지

- 아마도 당시 웹 교육과정의 영향? 

- 나도 웹디자인기능사자격증 테이블로 수업한 기억이 (2006년이었더랬죠...?)