자바스크립트 역사
자바스크립트는 넷스케이프 네비게이터 브라우저에서 웹페이지를 동적처리하기 위해 브랜든 아이크를 고용해 만든 아주 유연한 스크랩트 언어로 모카와 라이브스크립트라는 이름을 거쳐 현재의 자바스크립트로 변경되었다.
마이크로소프트 사에서도 자바스크립트를 배낀 제이스크립트가 탄생하면서 표준화에 대한 이야기가 진행된다. 그리하여 자바스크립트 표준안 ECMAScript가 1997년에 등장한다. 마이크로소프트의익스플로러가 점유율이 95%에 이르면서 표준안에 참여하지 않게 되면서 개발자는 각기 다른 브라우저에 맞는 개발을 진행해야 했다. 다른 브라우저의 구현 상황을 신경쓰지 않게 하는 JQuery와 같은 라이브러리가 등장함으로 api로 처리할 수 있게 되었다. 2008년 크롬 브라우저가 등장하는데 크롬의 JIT엔진은 자바스크립트 실행 속도가 매우 빠른 엔진이었다. 이 성능 차이로 인해 각 브라우저들은 성능 개선을 시작하고 표준안에 다시 착수하게 된다. ECMAScript5 (2009), ECMAScript6 (2015), 이후에도 계속 개선된다. 그리고 모든 브라우저들이 이제는 이 표준안을 잘 따르기 시작하면서, JQuery와 같은 라이브러리의 도움없이 자바스크립트만으로 처리할 수 있게 되었다.
SPA(Single Page Application)는 웹페이지를 (한 페이지에서) 부분적으로 업데이트를 하기 위해 등장했다. SPA를 구현하기 위해서 앵귤러, 리액트, 뷰와 같은 라이브러리가 등장한다. 이제 자바스크립트는 V8 엔진을 이용한 백엔드 서비스를 node.js 를 통해서 구현할 수 있게 되었다. 또한 리액트 네이티브와 같은 것으로 모바일, 일렉트론 같은 것으로 데스크탑 어플리케이션도 만들 수 있게 되었다. 웹 브라우저는 WA와 같은 것을 사용하여 자바스크립트가 아닌 언어도 받아들이고 있다.
자바스크립트 설정
보통 자바스크립트로 "Hello world!"를 찍어보기 위해서 콘솔 로그에 출력하도록 console.log()를 사용하는데, 이와 같은 기능은 자바스크립트가 제공하는 기능이 아니다. 브라우저가 제공하는 함수들로, Node.js에서도 이런 console.log()가 존재한다. 예를 들어 alert()은 브라우저에서 경고창을 띄우지만 Node.js에서는 사용할 수 없다. setTimeout을 사용하면 실행에 딜레이를 줄 수 있는데, 브라우저에서는 실제로 딜레이가 걸리지만, Node.js에서는 그냥 설정값만 출력해준다.
자바스크립트의 공식사이트는 ecma-international.org이지만 문서화가 더 잘 된 모질라 MDN 사이트(developer.mozilla.org)를 이용한다. w3schools.com은 공식사이트가 아니다.
자바스크립트를 불러올 때 위치에 따라서 상의한 성능 차이가 존재한다. 과거에는 html, css를 우선적으로 보여주기 위해서 위에두고 자바스크립트를 아래에 두었었다.
<head> ...
<title>Document</title>
<script src="main.js"></script>
</head>
<body> ... <div id="root"></div> ... </body>head에서 script를 부를 경우 모든 스크트립을 다 받은 후 실행하기 때문에 사용자 인터넷이 느리다면 문제가 될 수 있다.
<head> ...
<title>Document</title>
</head>
<body> ... <div id="root"></div> ...
<script src="main.js"></script>
</body>이렇게 바디 아래에 두면 html, css가 실행되어 웹 화면을 볼 수 있지만, 자바스크립트에 의존적(즉, 자바스크립트의 이용이 많을 경우) 문제가 될 수 있다.
<head> ...
<title>Document</title>
<script asyn src="main.js"></script>
</head>
<body> ... <div id="root"></div> ... </body>script를 불러올 때 boolean type의 asyn 속성값을 사용하면 병렬로 js를 받다가 다운이 완료되면 그때 js를 실행하고 나머지를 처리한다. 다운 속도의 이점이 있지만 아직 정의되지 않는 자바스크립트가 요구될 경우 문제가 될 수 있다. 또한 파싱 동안 자바스크립 실행 시간에는 멈출 수 있기 때문에 사용자가 페이지를 보는데 시간이 걸리는 문제가 있을 수 있다.
<head> ...
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body> ... <div id="root"></div> ... </body>asyn 대신 defer 옵션을 사용하면 다운은 병렬로 받으면서 html 파싱이 모두 끝나면 그제서야 실행하는 방법이다. 필요한 js를 다 받아놓고, 사용자에게 페이지를 보여준 다음에 바로 자바스크립트를 이용하기 때문에 가장 좋다고 할 수 있다.
// js 시작부분에 아래의 문장을 넣으면 적용된다.
'use strict';해당 문장을 js 에 넣어주면 자바스크립트의 유연함에 제약을 건다. 경직된 문법에서는 좀 더 철저한 코딩이 이뤄진다. 다른 언어에서 볼 수 없는 비상식적인 문법을 까다롭게 해서 오류를 미리 걸러낼 수 있으며, 자바스크립트의 속도 향상에도 도움을 준다.
