Web FrontEnd - Java Script

신재윤·2021년 8월 3일

Web Frontend

Web FrontEnd

목록 보기

1/1

프론트엔드 Java Script

2021.09.12 ~
8월에 공부한 내용을 모두 잊어버려서 다시 정리中

Java Script 서론, 링크

Web Developer라면 필수적인 JavaScript를 공부하기로 마음먹었다. 프론트엔드를 희망하지만 node.js를 활용한 백엔드에도 관심이 생겨서 그 부분도 깊게 공부하려고 한다. 추후, 모던 자바스크립트 딥다이브 교재를 통하여 대비할 것이다.

드림코딩 엘리 - JavaScript 기초강의 플레이리스트
https://www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

MDN JavaScript 문서
https://developer.mozilla.org/ko/docs/Web/JavaScript

Java Script(1) : 역사/현재/미래

1. 동적인 웹사이트를 만들기 위한 노력

마크 앤더슨은 원래 정적이었던 웹사이트 ( HTML과 CSS로만 이루어져 있고 링크를 타고 페이지와 페이지 간에 이동 정도만 가능한 아주 정적인 웹사이트였다. ) Netscape Navigator Browser에 scripting 언어를 추가하여 동적인 웹사이트를 만들고자 하였다. 처음에 고려한 언어는 Java였지만, 웹 개발에는 좀 무겁기 때문에 브랜든이 만들었던 기존의 Scheme Scripting 언어를 수정해서 새로운 언어를 만들기로 했다.

시간이 없어서 빠르게 만들어야 했다. 따라서, 프로토타입을 베이스로 한 유연한 언어를 개발하게 되었다. 내부적으로 Mocha라고 불렸으며 나중에 LiveScript로 바뀌게 되었다. 그 당시에 Java의 인기가 많았기 때문에 그의 인기 덕을 보고 싶었던 Netscape 회사는 LiveScript를 JavaScript로 이름을 변경하였다. 따라서, Java와 JavaScript는 아무런 연관이 없는 언어이다.

Netscape의 브라우저가 잘되자, Microsoft 역시 웹 사업에 뛰어들었다. Netscape사에서 출시한 브라우저를 reverse engineering 하게 되는데, 이것은 만들어진 프로그램의 바이너리 코드를 분석해서 소스 코드를 복원해내는 과정을 뜻한다. 한마디로 Netscape의 JavaScript를 고대~로 베껴와서 자신들이 만든 언어인 것처럼 한 것이다. Microsoft에서는 이 언어를 JScript라고 이름 짓게 된다. Internet Exploer에서는 이 JScript를 사용하게 되었다. ( ~~이것이 고통의 시.발.점~~ )

2. ECMAScript 두두등장

Microsoft사의 Internet Explorer는 JScript를 사용하고, Netscape사의 Netscape Navigator는 Javascript를 사용하다보니까, 둘은 달라서 다양한 브라우저에서 동작할 수 있도록 개발해야하는 개발자들은 너무 고통스러웠다. 예를 들어, 1996년 당시에 웹사이트를 인터넷 익스플로어로 열면 "이 사이트는 Netscape Navigator로 더 잘보이니까 당장 다운받으세요!"와 같은 문구가 지속적으로 나왔다. 반대도 마찬가지.

이 상황을 참지 못했던 Netscape사는 자신들이 Javascript를 만들었으니 그에 대한 표준안을 만들어보자고 ECMA International이라는 단체에 찾아가게 된다. 그리하여 탄생한 것이 ECMAScript 1이다.

근데, 망할 Microsoft가 거만해져서 자기들이 표준이라고 ECMAScript 표준안 이제는 안쓸거다 ! 이렇게 되면서 ECMAScript의 표준화 진행이 2000년도부터 매우 더디게 되었다.

3. 춘추전국시대

표준화를 앞에 두고 Firefox, Internet Exploer, Netscape Navigator 3사의 치열한 신경전이 벌어지고 있었다. 개발자들만 죽어나가고 있는 상황이었는데 2004년 제시 제임스가 제출한 종이에는 AJAX (Asynchronous JavaScript and XML)라는 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와주는 기술이 적혀있었다.

그러나, Ajax 기술이 도입되었음에도 표준화는 제대로 진행이 되지 않고 있는 상황이었다. 웹 브라우저는 점점 더 많아지는 상황에 개발자들은 웹 시장에 더욱 뛰어들게 되었다. 그러면서 개발자 간의 커뮤니티는 활성화 되었고 이런 커뮤니티 사에서 나오게 된 것이 바로 jQuery, dojo, mootools와 같은 라이브러리이다. 이 라이브러리들은 개발자가 각기 다른 브라우저에 대한 구현을 신경쓰지 않아도 되도록 하는 것을 원했다.

4. 이 싸움을 끝내러왔다.

2008년 Google사의 JIT(just-in-time compilation)라는 강력한 엔진이 포함된 Chrome 브라우저가 등장했다. Javascript를 실행하는 속도가 매우 빠른 브라우저이다. 이에 자극을 받은 나머지 브라우저와 크롬은 서로 윈윈할 수 있는 구조를 만들기 위해 모여서 표준화를 진행하게 된다. 그렇게 2009년에 나온 것이 바로 ECMAScript 5가 나왔고, 2015년에 나온 ECMAScript 6이다. 매우 큰 변화는 저렇게 두 버전에서 많이 나왔다.

대부분의 웹 브라우저는 표준안 ECMAScript를 잘 따라가게 되었고, 더이상 jQuery와 같은 라이브러리는 필요로 하지 않게 되었다.

각각의 브라우저는 ECMAScript 표준안을 따라가는 엔진을 가지게 되었다. Chrome - V8 / Firefox - SpiderMonkey / Safari - JSCore / MS Edge - Chakra / Opera - Carakan / Adobe Flash - Tamarin 등등 다양한 엔진이 등장했다. 특히 V8 엔진은 node에서도 사용하는 엔진이다.

[ 추가 (1) ]

BABEL은 무엇일까?

시장에서 다양한 사용자들은 다양한 브라우저를 사용하고 있고, 또, 모든 사용자들이 최신 버전의 브라우저를 사용하는 것은 아니다. 하지만 개발자들은 최신 기능이 포함된 ECMAScript를 사용하고 싶어한다. 그래서 개발할 때는 최신버전의 ECMAScript를 사용하고 사용자에게 배포할 때만 JavaScript transcompiler를 이용해서 코드를 변환시켜서 배포하는데 이것을 가능하게 하는 것이 바로 BABEL이다.

[ 추가 (2) ]

SPA(Single Page Application)은 무엇일까?

최근 나아가고 있는 방향인데, 더이상 웹사이트를 만드는 것만으로는 충분하지가 않고 하나의 페이지 안에서 데이터를 받아와서 필요한 부분만 부분적으로 업데이트 하는 것이 굉장히 유행 중인데, JavaScript만으로도 구현이 가능 하겠지만, React, Vue, Angular등과 같은 라이브러리나 프레임워크를 통해서 SPA를 더 쉽게 구현하고자 한다.

또, Javascript를 활용한 방법은 무궁무진하다. node를 이용해서 백엔드 개발도 가능하고 리액트 네이티브 같은 것을 이용해서 모바일 어플리케이션도 일렉트론을 이용해서 데스크탑 어플리케이션도 만들 수 있다.