자바스크립트의 역사: 넷스케이프에서 ECMA스크립트까지

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

임시 저장된 포스팅이 또 하나 추가될 예정입니다만..

이렇게 또 두서없이 스크립트 포스팅을 시작하도록 하겠습니다. ㅎㅎ

 

 

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

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

그래서 일단 링크로 정리..

https://roseline.oopy.io/dev/javascript-back-to-the-basic/history-of-javascript

Roseline 개발 블로그

추가로 더 써보자면

 

자바스크립트는 넷스케이프가 썬 마이크로시스템즈(자바 만든 회사)와 함께 만들었는데,

자바스크립트는 웹 브라우저에 나중에 추가된 기능입니다. 좀 더 동적으로 보이게 하기 위해서요

자바스크립트 1.0이 처음 나왔을 때 넷스케이프 내비게이터는 브라우저 시장을 장악하고 있었고

그때 마이크로소프트에서 인터넷 익스플로러(네 맞아요 그 애증의 ie)로 따라잡으려 노력하는 중이었어요

넷스케이프 따라 하기만 하다가 VB스크립트라는 자체 언어를 만들고

J스크립트라고 이름을 바꿔 익스플로러 3.0에 이 기능을 탑재하게 됩니다. 

이에 대한 대응으로 넷스케이프와 썬 마이크로시스템즈는

유럽 컴퓨터 제조 협회(ECMA, European Computer Manufacturers Association)에 표준안을 제출합니다.

이 이후로 둘 다 ECMA스크립트라고 부르게 되었습니다.

자바스크립트,   ECMA스크립트, J스크립트 어떻게 불러도 상관없고

 

 

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

이후 넷스케이프와 인터넷 익스플로러는 개싸움 브라우저 점유율 싸움을 시작하게 됩니다.

 

중요한 점은 10일 만에 만들어진 이 자바스크립트 언어가 정말 중요한 언어가 되었다는 점이고,

자바의 그림자에서 벗어난지도 꽤 되었다는 거죠~

자바와 자바스크립트는 자전거와 자동차만큼 다릅니다 ㅎㅎ

자바의 장점은 이론적으로 모든 환경에서 구동될 수 있다는 점이었던데 반해

자바스크립트는 웹브라우저에서만 구동 가능하고요

자바스크립트는 스크립트 언어이고,

혼자서 실행되는 프로그램이 아니라 웹 브라우저에게 실행한 내용을 이야기해주는 언어입니다.

웹브라우저는 스크립트를 해석해서 원하는 동작을 수행하는데

이 점이 다른 자바나  C++ 같은 컴파일러 파일이 필요한 언어와 다른 점입니다.

 

지나가다가 비밀 댓글을 달아주신 내용으로 글을 수정해 봅니다

ECMAScript는 자바스크립트의 표준 사양이고, 자바스크립트는 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) 등 여러 플랫폼에서 사용할 수 있는 언어입니다

 

 

요즘은 자바스크립트 대신 파이썬이 대세라고 하고 물론 자바나 C언어도 많이들 배우시지만

나름 장점이 많다고 생각하는 언어입니다.

상대적으로 쉽고 단순하다는 것이 큰 장점이고

한 언어로 여러 가지 프로그래밍 기법을 배울 수 있고,  웹에 정보가 제일 많아요

제일 중요한 건 결과를 바로 인터넷 브라우저 화면으로 볼 수 있다는 게 장점이죠~

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

 

자바스크립트는 웹 개발자들이 웹 브라우저의 여러 가지 부분과 속성들을 쉽게 다를 수 있도록 해줍니다.

웹브라우저의 크기, 높이, 위치 같은 속성을 바꾸거나 정할 수 있고,

웹브라우저 속성을 바꾼다 해서 브라우저 객체모델(BOM, Browser Object Model)이라 부르기도 했습니다.

 

 

 

문서 객체 모델(DOM, Document Object Model)

아마 우리가 제일 많이 하게 될 부분이 DOM일 텐데요~

간단히 말해 문서 내에 있는 내용을 뽑아내서 개념화하는 방법이라고 할 수 있습니다.

이걸 제가 그냥 학원으로 예를 들어볼까요?

학원 객체 모델이라고 불러볼게요  학원에서 객체란 컴퓨터, 의자, 책상 같은 식별 가능한 물건을 말합니다.

컴퓨터랑 의자를 혼동하진 않을 거잖아요?

이 학원 객체 모델에서는 꼭 실체가 있는 것뿐만 아니라 개념도 설명할 수 있어요

예를 들어 위치 설명을 위해 "오른쪽에서 두 번째 자리"라고 말하려면 일단 "오른쪽"과 "두 번째"가 명확해야 합니다

실생활에서 사람들은 개념적인 모델에 익숙하기 때문에 간단히 설명해도 그 의미를 쉽게 파악할 수 있겠죠.

 

D는 문서입니다.

문서(document)가 없으면 움직이지 않습니다.

웹 문서를 만들어 웹 브라우저에 띄우는 순간 DOM이 살아 움직이기 시작합니다.

작성한 문서가 객체로 바뀌게 되니까요~

 

O는 객체입니다.

일단 객체에 대해서 알아야겠죠?

객체란 자기 자신을 포함하는 데이터 묶음을 뜻하고,

객체에 포함된 변수를 프로퍼티라고 부르고, 객체에 의해 실행되는 함수를 메서드라고 합니다.

 

M은 모델입니다.

M은 모형(Model)을 말합니다. 

문서 객체모델은 웹 브라우저 창 안에서 읽은 웹 문서를 나타내 주는 것인데

브라우저는 이 문서의 모형을 제공해주고 우리는 이 모형을 자바스크립트를 통해 읽거나 사용할 수 있는 거죠

 

모델에서 정보를 얻으려면 문서를 표시하는 데 사용하는 규칙들을 알아야 합니다.

DOM에서 사용하는 가장 중요한 규칙은 문서를 나뭇가지(tree) 형 구조로 표시한다는 것입니다. 

좀 더 자세히 말하면 웹 문서는 가계도와 비슷합니다.

가계도는 모델의 다른 예라고 할 수 있습니다.

 

https://www.w3schools.com/js/js_htmldom.asp

JavaScript HTML DOM

 

HTML DOM 객체 트리

문서 객체 모델은 웹페이지에서 HTML 문서에 접근하기 위한 일종의 인터페이스라고 생각하시면 되고,

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공해요

그리고 이러한 객체모델을 이용하여 새로운 HTML요소나 속성을 추가하거나 삭제 또는 속성을 제거하거나

요소를 변경하고 CSS 스타일을 변경하는 작업들을 할 수 있죠~

 

W3C  DOM표준은 세 가지 모델로 구분되는데

아마 저는 HTML DOM에 대해서 많이 포스팅 할거 같아요...

(실은 그것밖에 아는 게 없습니다..)

 

 

이대로 다음 포스팅으로 넘어가기 전에 써보는 브라우저 업체 간 점유율 전쟁에 대해 좀 적어볼까요

 

넷스케이프 내비게이터는 97년 6월에 출시됐고 그해 10월에 인터넷 익스플로러 4.0(IE4)이 나왔어요

양쪽 브라우저는 이전 버전에 비해 향상된 기능을 제공하기로 했고 

(우리 펌웨어 업그레이드하면 머가 조금씩 바뀌잖아요 그만큼 버그도 깨알같이 늘고 ^^)

비약적으로 확장된 DOM기능과 자바스크립트 사용기능을 추가했습니다.

그리고 웹디자이너들은 DHTML이라는 유행을 만나죠 ㅋㅋㅋㅋㅋ

아주 모호한 DHTML은 다이내믹 HTML의 줄임말이에요 

특정 기술이 아니라 HTML, CSS, 자바스크립트의 결합을 설명하기 위한 말에 불과한 거긴 한데

지금이랑은 좀 많이 다르죠

 

 

넷스케이프 DOM은 레이어(layer)라는 요소를 만들었는데 레이어들은 유일한 아이디(id)로 정의하고

 document.layers ['element']라고 정의했고 마이크로소프트 DOM은  document.all ['element']로 표시했죠..

둘 사이에 결과적인 차이는 없지만 결과적으로 스크립트에서  DOM을 다루기 위해 코드를

나눠야 했습니다. DHTML은 웹으로 무엇이든 할 수 있다는 가능성을 열어준 것처럼 보였지만..

대신 개발자들은 고통을 맛보고 결국 추잡한 유행이 되어 사라졌어요..

그리고 우리나라엔 플래시가... 그 행보를 이어갔다는 슬픈 전설이..

 

여하튼 브라우저 회사들이 시장을 선점하기 위해 

DOM을 경쟁에서 이기기 위한 무기로 삼아 전쟁을 벌이는 동안

W3C는 조용히 DOM을 표준으로 만들고 있었고요..

98년 10월 각 브라우저 회사들과 W3C가 함께 작업해서 DOM레벨 1이라는 새 표준을 만들었습니다.

이젠 id로 지정된 요소를 지정할 때

 document.getElementById('element')라고 정의하게 되었습니다.

 

DOM은 일종의 API(Application Programming Interface)라고 생각할 수 있습니다.

API란 어떤 일을 잘 해내기 위한 필수적인 약속이라 생각하면 됩니다.

머 실생활로 따지면 모스부호나, 국제표준시 같은 거? 

표준은 사람들이 의사소통과 협력작업을 더 쉽게 할 수 있도록 도와줍니다.

프로그래밍의 세계에는 수많은 개발언어가 있는데 결국 하는 일은 다 비슷합니다.

API가 있고 표준만 알면 다른 많은 환경에 적용할 수 있지 문법은 사용하고 있는 언어에 의존하지만

규칙은 언제나 같을 테니까요~

 

W3C는 DOM을 이렇게 정의했습니다.

문서의 외양과 구조, 내용을 스크립트와 프로그램 언어가 동적으로 접근해 고칠 수 있는
플랫폼과 개발언어에 중립적인 인터페이스 

표준  DOM의 독립성은 결국 지금까지 사랑받게 되는 거죠~

 

아 예전에 HTML, CSS, 자바스크립트를 조합해서 DHTML이라고 했는데 실제로는

이세 개를 엮어주는 것은 문서 객체모델, DOM입니다.

 

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

결국 승자는 마이크로소프트사가 이겼는데요 그 회사가 뭐하는 회사예요 윈도 만드는 회사잖아요

윈도를 설치하면 자동으로 인터넷 익스플로러가 깔려있게 쫙 세팅을 하는 비상함~~

윈도 점유율이 높아지면서 인터넷 익스플로러를 사용하는 사람들이 당연히 늘어났고..

공교롭게도 자기들끼리 만든 비표준 태그나 DOM기능의 충돌 같은 건... (아오 또 욕이 나오네? ^^)

패자가 된 넷스케이프는 자체 브라우저 개발은 멈추었습니다. 대신

현재 우리가 알고 있는 파이어폭스가 생겨났죠!

넷스케이프 6.0과 7.0의 기초가 된  오픈소스 렌더링 엔진을 기반으로 만든 브라우저입니다.

애플에서 만든 사파리, 구글에서 만든 크롬, 점유율은 아주 낮지만 아직도 살아있는 오페라 브라우저가 있네요

IE 같은 경우엔 우리나라에선 점유율이 거의 90%가 넘었고요..

점유율이 그렇게 높다 보니 IE에서만 잘 보이는 작업을 하기 시작했죠

웹 표준이고 나발이고 IE에서만 잘 보이면 되잖아

그래서 테이블 요소로 사이트를 통으로 만드는 말도 안 되는 작업물을 만들고..

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

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

 

 

웹브라우저 경쟁 속에 가장 힘들었던 사람들은 웹디자이너였습니다.

브라우저간에 호환성을 맞추는 작업은 악몽이었을 테니까요..

CSS 지원 정도도 너무 달라서 진짜.. 

IE는 버전별로 다르다는 게 더 화남..^^

그래서 브라우저 개발사들이 웹 표준 프로젝트 줄여서 WaSP라고 부르는 모임이 생겼습니다.

W3C의 권고표준을 지키도록 독려하는 것이었죠 

 

 

현재 IE와 구형 브라우저를 제외하곤

모든 브라우저는 ECMA스크립트 6 버전 줄여서 ES6까지 지원을 하고요

이젠 브라우저에 따라 코드를 새로 써야 하는 걱정도 없습니다.

 

 

자바스크립트의 시작을 여기서 마치도록 하겠습니다