참고 자료
- <짤방 1>
html, css는 프로그래밍 언어다! - <짤방 2>
자바스크립트로는 모든 것을 할 수 있습니다. - 자바스크립트란?
- 자바스크립트 역사. 등장배경, ES6
html, css, javascript는 표준 웹 기술에 포함된 핵심 요소이다.
html이 화면에 출력되기 위한 가장 핵심적인 정보를 담고 있다면,
css는 해당 정보를 시각적으로 좋게 바꿔주는 작용을 한다.
javascript는 더 나아가 사용자의 의도에 맞게 동적으로 사이트를 변형시켜준다.
html, css로만 구성된 웹 사이트를 '정적이다'고 표현. 일방적인 전달이기에 뉴스나 신문에 비유할 수 있다. (상호작용 불가능) 반면 javascript가 추가된 웹 사이트는 사용자의 반응으로 DOM 요소 조작이 가능하다. 비유하자면 sns와 비슷하다.
'동적이다' -> ?? 이 부분에 대해서는 좀더 논의해보고 싶음...
역사 (-> 유튜버 엘리님 영상 참고)
1993년 컴퓨터를 모르는 사람들도 쉽게 사용할 수 있는 모자이크 브라우저가 세상에 나오게 된다. 모자이크 브라우저의 개발팀을 이끌던 마크 앤더슨은 대학 졸업 직후 Netscape 회사를 세우고 이전 경험을 살려 좀더 UI 요소가 더해진 Netscape Navigator를 시장에 내놓게 된다. 이 당시엔 html, css로 간단하게 정적인 웹 사이트를 만들 수 있었다. 해당 브라우저는 80%의 점유율을 장악하게 되고 마크 앤더슨은 동적 웹 사이트에 대한 고민을 계속 하게 된다.
scripting 언어를 이용하여 DOM 요소를 조작하는 방식을 생각해낸다. 처음엔 Java가 후보로 고려됬지만 다소 무겁고 어려운 언어라 선택되지 않았고 브랜드 아이크를 스카웃하여 기존의 scheme script 언어를 변형하여 사용하기로 한다. 기존 컨셉을 유지하며 문법은 Java에 가깝게 변형시킨다. 이를 서둘러 작업하여 16일만에 정말 유연한 언어를 만들게 된다. 내부적으로는 Mocha라 불렸고 대외적으로는 LiveScript라 불리며 해당 브라우저에는 이를 번역할 수 있는 interpreter, 즉 엔진이 장착되어 배포되었다. 웹 개발자들이 언어를 사용하면 브라우저가 해석하여 Dom 요소를 조작할 수 있게 되었다. 1995년에 정식으로 언어와 엔진이 출시되었다. 이런 성공을 보고 MSsoft가 Netscape Navigator사의 브라우저를 분석하여 소스코드를 복원해낸다. 그 후 Jscript로 이름만 바꿔서 출시한다. 이렇게 약간 달라진 언어와 엔진을 장착한 IE를 시장에 내놓자 개발자들의 고통이 시작되었다. 1996년에는 두 브라우저에 경고창이 뜨는 게 아주 일반적이었다.
결국 N사는 ECMA international 단체에 찾아가 JS의 표준화를 제한한다. 1997년 ES1이 출시된다. 이런 논의가 진행되는 동안 2000년 IE는 시장 점유율이 급격히 상승하여 95%까지 치솟는다. 상황이 이러자 MSsoft는 자사에 이익이 되지 않겠다고 판단하여 더 이상 표준화 작업에 참여하지 않겠다고 선언한다. 때문에 ES4이후 업데이트는 더뎌지게 된다. 그리고 4년 후 모질라 사가 firefox 브라우저를 내놓고 자신들이 보유한 ActionScript3와 Tamarin 엔진을 이용하여 표준화 작업을 이어가길 제안한다. 하지만 너무 달랐기에 거부되었고 3사는 신경전을 벌인다. (그 사이 개발자들은 죽어나갔다...) 웹 시장이 커지며 개발자 커뮤니티가 등장하였고 이들은 힘을 합쳐 JQuery와 같은 라이브러리를 만들게 된다. 이 라이브러리의 목적은 브라우저의 설정에 구애되지 않고 같은 코드가 같은 기능을 하도록 만드는 일이었다. 이미 만들어진 API 호출만 하면 어떤 브라우저든 상관 없이 작동되었다.
드디어 2008년 구글에서 크롬 브라우저를 출시한다. JIT라는 굉장히 강력한 엔진이 포함되어 있었다. JS 실행 속도가 엄청 빨랐다. 다른 브라우저들이 경쟁에서 뒤쳐질 것을 염려하여 2008년 7월에 모든 브라우저들이 모여 표준화를 진행한다. 2009년 ES5가 출시되고, 2015년 ES6가 출시된다. 가장 보편적으로 사용되는 문법이다. 그 이후도 버전 업데이트는 되었지만 크게 달라진 점은 없다. 따라서 이제 JS는 성숙되고 잘 정돈된 언어가 되었다!
모든 브라우저들이 표준안을 잘 지키고 있기 때문에 더 이상 jQuery를 사용할 필요가 없게 되었다. (그러나 IE는 독자적인 언어를 계속 사용하고 있었기 때문에 호환성에서 밀리게 되었다.) 각각의 브라우저마다 각각의 엔진이 존재한다. 특히 크롬 브라우저의 V8 엔진은 node.js와 Electron에서도 사용된다. 다만 여전히 모든 사용자들이 최신 브라우저를 사용하는 건 아니기에 코드는 최신 문법을 사용하여 작성하되 배포할 때는 BaBel을 사용하여 ES5나 ES6로 바꾸게 된다.
최신 웹 개발 동향은 SPA이다. 하나의 페이지 안에서 필요한 부분만 동적으로 변화시키는 것이다. (기존의 방식은 페이지가 새로 열릴 때마다 서버에 요청하여 html 파일을 받아와야 했다.) 이를 위한 라이브러리가 리액트, 앵귤러, 뷰 등이다. 이제 JS는 웹 사이트 프론트 뿐만 아니라 서버, 앱 등으로 사용 영역이 확장되고 있다.
DOM 요소
Document Object Model -> 문서를 웹 브라우저가 이용하는 방식.
돔 요소라고 한다.
