#1 JavaScript란?
Modern JS & ES6
Javascript는 Netscape Communications사에 의해 개발된 브라우저용 스크립트 언어로 태어났다. 개발 당시 Livescript라고 불리었지만 당시 주목받고 있었던 Java언어와 비슷하다고 해서 다음 버전에서 JavaScript라고 이름이 변경되었다. 이 때문에 오해의 소지가 생겼지만 Java와 JavaScript는 언어 사양이 비슷한 부분이 있지만 전혀 다른 언어이며 호환성도 없다.
Javascript는 1995년 Netscape Navigator 2.0에서 구현된 것을 시작으로 1996년에는 Internet Explorer 3.0에 적용되면서 브라우저 표준 스크립트 언어로 정착하게 되었다. 이후 20여 년이 지난 현재는 Google Chrome, Firefox, Safari, Microsoft Edge 등의 브라우저 대부분에서 구현되어 있다. 무엇보다도 그런 JavaScript가 그 역사 자체가 평탄하다고 하기 어렵지만 오히려 여러 가지 우울했던 시대를 거쳐 발전 도니 언어라고 할 수 있다.
JavaScript의 역사
1990년대 후반 초기 JavaScript의 전성기라고 할 수 있었다.
요소에 마우스 포인터를 가져가면 문자열이 깜박인다
상태 표시줄에 문자열을 보여준다.
페이지 전환 시 페이드인/아웃 등의 전환 효과를 적용할 수 있다.
이런 다양한 효과가 JavaScript의 중요한 용도였고 알맞게 이용하면 페이지 모양과 느낌을 향상할 수 있었다. 하지만 아쉽게도 당시에 이것이 과열되는 양상을 띠며 동작인 페이지를 만들겠다는 형태로 발전하게 되면서 과도한 형태로 JavaScript를 사용하게 되었다. 그 결과 느리고 지저분해진 페이지가 양상 되었다. 이런 과열된 부분은 점차 오래 지속되지 않았고, JavaScript는 페이지에 입력 확인용 스크럽 트 언어나 초보 개발자가 이용할 수 있는 언어라는 이미지가 만들어져 우울한 시대로 들어갔다.
이후 브라우저 제공업체가 개별적으로 JavaScript구현을 확장하던 시대이기도 했다. 더 눈에 들어오도록 화려한 기능 위주로 발전함에 따라 브라우저별로 사양 차이(크로스 브라우징 문제)가 커져갔다. 따라서 사용자는 각각의 브라우저를 지원하는 코드를 만들어야 했고, 그런 번거로움 때문에 JavaScript는 사용자와의 갭이 더 커졌다. 이 시대의 JavaScript 구현에 관련된 브라우저의 보안 문제도 간헐적으로 발견된 것도 JavaScript의 부정적인 이미지를 더 정착시키는 요인이 되었다.
다시 컴백하게 된 계기를 만들어준 Ajax와 HTML5의 시대
이런 상황에서 2005년 Ajax(Asyncronous JavaScript + XML)이라는 기술이 등장하게 된다. Ajax는 한마디로 브라우저에서 데스크톱 응용프로그램 와 유사한 페이지를 만드는 기술이다. HTML, CSS, JavaScript 등의 브라우저 표준 기술만으로 다양한 콘텐츠를 만들 수 있어 Ajax는 빠르게 인기를 얻었다.
요즘 브라우저 개발사도들도 경쟁을 거의 하지 않게 되고 호환성 문제도 크게 일어나지 않았다. 국제 표준화 단체인 ECMA International에서 JavaScript를 표준화가 진행되면서 확실한 진화가 이루어졌다. 이런 배경을 통해 JavaScript의 언어로써의 가치를 다시 검토할 기회를 얻었다.
또한 Ajax기술의 보급을 통해 JavaScript는 HTML과 CSS을 돋보이게 하는 역할을 해주는 언어가 아니게 되었다. Ajax기술을 지원하는 핵심으로 보게 되면서 프로그래밍 기법에도 변화의 바람이 불기 시작했다. 기존과 같이 함수를 조합하는 것만으로도 간단하게 작성하여 대규모 개발환경에서도 견딜 수 있는 객체 지향적 코딩을 요구하게 되었다.
또한, 2000년대 후반에는 HTML5의 등장으로 상황은 더 좋아졌다. HTML5는 마크업으로서 충실하고 응용프로그램 개발을 위한 JavaScript API를 강화한 것이 특징이다. HTML5 권고 자체는 2014년이지만, 2008년 이후 출시된 브라우저 대부분은 HTML5를 대응하여 단계적으로 이용이 가능했다.
<HTML5에서 추가된 주요 JavaScript API>
Geolocation API: 사용자의 지리적 위치 가져옴
Canvas : JavaScript에서 동적으로 이미지 그리기
File API: 로컬 파일 시스템 읽기
Web Storage: 로컬 데이터를 저장하기 위한 스토리지
Indexed Database: 키/값 세트에서 JavaScript객체를 관리
Web Workers: JavaScript를 백그라운드에서 병렬 실행
Web Sockets: 클라이언트-서버 간의 양방향 통신
HTML5를 통해 브라우저의 기본 기능만으로 실현할 수 있는 범위가 크게 확대되었다. 또한 스마트폰 등의 기기 보급이 확대됨에 따라 RIA 기술(Flash, silverlight)은 쇠퇴하고, SPA(Single Page Application) 유행을 통해 브라우저 네이티브 JavaScript가 인기를 얻어가게 되었다.
여기서 말하는 SPA는 이름 그대로 하나의 페이지로 구성된 웹 응용프로그램을 말한다. 처음 접근 시 우선 페이지 전체를 얻지만 다음 페이지 변경되는 부분은 기본적으로 JavaScript로 처리한다. 이때 JavaScript만으로 이를 해결하지 못하기 때문에 데이터를 얻고 변경되는 부분에 대한 비동기 통신을 Ajax를 통해 구현하여 최대한 데스크톱 응용프로그램과 비슷한 조작성을 보여줄 수 있게 되었다.
JavaScript에 대한 오해들
JavaScript는 Java나 C#과 같은 프로그래밍 언어뿐만 아니라 엄연한 객체지향 언어이다. 실제로 JavaScript가 Ajax기술의 핵심으로 떠오르면서 이후 프로그래밍 스타일 자체도 많은 변화가 생겼다. 기존의 절차적 프로그래밍 기법에서 본격적인 객체지향 코딩 스타일을 요구하게 되었다.
다음으로 JavaScript는 보안상 문제가 있다는 것이다. 이는 어떻게 보면 맞는 이야기라고 생각할 수 있지만 좀 더 따져보면 JavaScript의 문제가 아닌 JavaScript를 구현한 브라우저의 문제였다. 즉, 언어로써의 문제가 있는 것은 아니라는 것이다. 또한 브라우저 제조사들도 보안의식이 높아졌고 현재는 보안 문제는 크게 줄었다.
그리고 JavaScript에는 크로스 브라우저 문제가 있어, 개발 생상성이 낮다는 말들이 있는데 이것도 브라우저의 구현 문제이다. 또한 다시 이야기하지만, 표준화 통일을 가져가고 있어 호환성 문제는 감소 중이다.
이런 오해들을 줄이다 보면, JavaScript는 쉽게 도입할 수 있고 대중화한다는 의미에서 초보자들이 학습하기 편한 언어라고 말할 수 있다. 또한 Ajax 및 HTML5가 보급됨에 따라 웹 개발자들은 다시 JavaScript라는 언어에 대한 이해를 요구하고 있다.
프로그래밍 언어로써의 특징
JavaScript가 언어로써의 특징은 다음과 같다.
(1) 스크립트 언어이다.
스크립트 언어는 중요한 부분만 간추려 간략화한 것을 목적으로 만들어진 프로그래밍 언어이다. 이미 다른 언어를 배운 개발자나 처음 프로그래밍을 하는 사람도 단기간에 익힐 수 있다.
(2) 인터프리터형 언어이다.
인터프리터 어어는 프로그램을 처음부터 일일이 분석하고 컴퓨터가 이해할 수 있는 형태로 번역하면서 실행해 나가는 언어이다. 따라서, 소위 말하는 컴파일 언어에 비해 동작이 느리다는 문제가 있지만 프로그램을 실행하기 위해 컴파일 같은 별도의 절차는 필요 없다는 장점이 있다. 소스코드를 작성하고 그대로 실행할 수 있는 간편함이 장점이다.
(3) 다양한 환경에서 사용이 가능하다.
JavaScript는 원래 브라우저에서 실행되는 것을 상정하고 만들어진 언어이지만, 최근에는 브라우저에서만 사용하는 용도를 벗어나 JavaScript 또는 ECMAScript를 기반으로 만들어진 언어가 실제로 다양한 환경에서 실행되고 있다.
Node.js : 서버 사이드 용도를 중심 한 JavaScript실행환경
Windows Script Host : Windows환경 스크립트 실행환경
Java Platform, Standard Edition: Java언어 실행환경
Android/iOS WebView: 웹페이지를 표시하는 기본 브라우저
앞으로 이 강좌에서는 초기에는 JavaScript 환경에 의존하지 않고 JavaScript 언어로 표준 기능을 활용하는 방법을 배우고 브라우저 이외의 환경에서 JavaScript를 이용할 경우에는 필수로 이해하기 바란다. 다음으로 DOM(Document Object Model)을 사용하는 방법을 배우고 마지막에는 브라우저 객체로 브라우저에서 사용하는 JavaScript를 제어하는 방법을 정리해보려고 한다.
