JavaScript란?
객체기반의 스크립트 프로그래밍 언어이다.
동적이며 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
JavaScript 실행순서
위에서 아래의 순서로 실행이 진행되기떄문에 코드를 작성하는 순서가 중요하다.
JavaScript 장단점
장점
html안에서 바로 script태그안에서 코드를 작성하므로 개발속도가 빠르고, 컴파일과정이 필요없기떄문에 즉시 실행이 가능하다.
단점
브라우저는 악성 웹페이지가 개인 정보에 접근하거나 사용자의 데이터를 손상하는 것을 막기 위한 목적으로 보안을 위해 자바스크립트의 기능에 제약을 걸어놓았다. 웹브라우저에서 실행되기 때문에 일부 보안상의 제약이 있으며, 브라우저에서 웹페이지를 열 때 안정하고 위험에 처하지 않도록 보장해야 한다.
OS에 직접 접근할수없고, 하드디스크를 읽거나 쓸수없고, 다른 프로그램을 호출할 수 없다.
JavaScript 표준
ECMAScript는 자바스크립트의 표준사양으로, Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의된 범용 스크립트 언어이다.
JavaScript의 성장 (Ajax, DOM, jQuery, V8자바스크립트엔진, Node.js, SPA 프레임워크)
초창기 자바스크립트는 단지 브라우저를 제어하기 위한 언어였다. 하지만 점차 Web은 단순히 정보를 제공하는 것에 그치지 않고 서로 교류를 하는 방향으로 바뀌어가고있었다.
1. Ajax (Asynchronous Javascript And XML, 비동기식 자바스크립트와 XML)
자바스크립트의 라이브러리 중 하나이며, 비동기방식으로 데이터를 교환할 수 있는 통신기능이다.
이전의 웹페이지는 html로 시작해 html로 끝나는 완전한 HTML 코드를 서버로부터 전송받아 웹페이지 전체를 렌더링 하는 방식으로 동작했었는데, Ajax는 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법이다.
따라서 웹페이지 속도가 향상되었지만 히스토리관리가 안되는 문제점이 있다.
2. DOM (Document Object Model, 문서객체모델)
DOM은 HTML 문서에 대한 인터페이스이다.
따라서 여러프로그램들이 페이지의 콘텐츠 및 구조, 스타일을 읽고 조작할 수 있도록 API를 제공한다.
DOM의 개체 구조는 "노드 트리(Node Tree)"로 표현된다.
DOM은 원본 HTML과 비슷해보이지만 다른점이있다.
- 자바스크립트에 수정될 수 있는 동적모델이여야 한다.
- 가상요소를 포함하지 않는다 (::after)
- 보이지 않는 요소를 포함한다. (display:none)
3. jQuery
jQuery는 문서 순회, 이벤트 처리, Ajax 상호 작용 및 애니메이션을 수행하는 자바스크립트 라이브러리로, 클라이언트 사이드 스크립트 언어를 단순화 할 수 있도록 설계되었다.
DOM을 더욱 쉽게 조작하게 되었고, UI관련기능을 최소한의 코드로 작성할 수 있는 장점이 있다.
이로인해 배우기가 다고 까다로운 자바스크립트보다 배우기 쉽고 직관적인 jQuery를 더 선호하는 개발자가 양상되기도 했다.
그게 바로 나...
4. V8 자바스크립트엔진
원래 자바스크립트는 브라우저에서만 컴파일되고 실행되었었는데, v8엔진을 기반으로 자바스크립트를 브라우저가 아닌 일반 운영체제 환경에서도 실행 할 수 있게 되었다.
V8 자바스크립트엔진의 등장으로 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자경험(UX)을 제공할 수 있는 웹 애플리케이션 프로그래밍 언어로 정착하게 되었다.
5. Node.js
Node.js는 자바스크립트를 실행 할 수 있게 해주는 runtime환경이다. Node.js를 이용하면 작성한 자바스크립트를 컴파일 해 실행할 수 있고 이를 활용해 자바스크립트로 작성된 서버,앱,소프트웨어를 만들수있다.
6. SPA 프레임워크 (Vue.js, React, Angular)
서버 - 유저(클라이언트)와의 상호작용이 많아지면서 개발규모와 복잡도가 상승했고, 복잡해진 개발 과정을 수행하기 어려워지면서 프레임워크가 등장했다.
대표적으로 기업에서 많이 사용하는 React도 결국 브라우저 위에서 돌아가는 Javascript일 뿐이며 다만 node.js 환경에서 작성하고, 실행해보고, 작은 용량으로 압축해서 브라우저위에서 돌아가는 프론트 프레임워크(라이브러리)이다.
>> 왜 이렇듯 계속 발전하고 개발될까
시간이 지나면서 인터넷 이용자, 네트워크 속도 등 웹의 크기가 커져갔고 브라우저가 감당해야할 javascript의 양이 많아지면서, 많은 양의 자바스크립트를 읽고 실행하기 위해서 브라우저 엔진의 개선이 지속적으로 필요한것이다.
ES6 브라우저 지원 현황
인터넷 익스플로러를 제외한 대부분의 모던 브라우저는 ES6를 지원하지만 100%지원하고 있지는 않다.
따라서 ES6지원 현황은 다음 링크에서 확인할 수 있다.
브라우저에서 아직 지원하지않는 최신 기능을 사용하거나 인터넷 익스플로러나 구형 브라우저를 고려해야하는 상황이라면 바벨(Babel)과 같은 트랜스파일러를 사용해 ES6 이상의 사양으로 구현한 소스코드를 ES5 이하의 사양으로 다운그레이드할 필요가 있다.
잘보고갑니다