자바스크립트 입문 1주차 회고

아니 그 찐따 같던 자바스크립트 맞냐? 자바스크립트는 전설이다…

91년생인 나는 격동하는 인터넷의 시대를 몸으로 겪은 세대이다. 천리안 하이텔과 같은 서비스의 황혼기에 태어나서 라이코스, 야후 등 웹 사이트라는 것이 태동하던 시기이다. 신기한 플래시 애니메이션, 게임, 다양한 주제의 게시판과 사이트… 인터넷에 접속 가능한 컴퓨터가 있는 아이의 집에 몰려가서 게임하는 것을 구경하는 것만으로도 즐거운 시절이었던 것이다.

나는 부모님을 졸라 집에 컴퓨터를 구입했고 인터넷을 연결했다. 인터넷의 세상은 방대했고 너무나 많은 정보를 손쉽게 얻을 수 있었다.  나는 컴퓨터에 매료되어 있었다. 당시의 자료는 전부 유실되었지만 인터넷을 뒤적이며 무료 호스팅 업체에 가입하고 작은 사이트를 만들기도 했었다. 나모웹 에디터와 제로보드를 이용해 즐겨하던 게임 커뮤니티 사이트도 만든 기억이 있다. 당시엔 PHP가 뭔지, HTML 태그가 뭔지도 이해하고 있지 않았지만 누군가가 정리한 자료를 보며 따라 하는 것으로 용케 만들었던 것 같다. 

2000년대 초반 자바스크립트 및 ActiveX로 인해 개인정보가 유출되는 문제가 하루가 멀다하고 뉴스에 오르내렸다. 당시의 자바스크립트는 느렸고 곧 없어질 것처럼 보였다. 나 역시 그렇게 생각했고 점점 흥미를 잃어갔다.

잊고 지내던 자바스크립트는 그 후 크나큰 발전을 이룩했다.

곧 없어질 것 같았던 프로그래밍 언어가 지금은 세계에서 가장 인기 있는 언어라니, 이거 소년 만화 주인공의 왕도 같은 것 아닌가?! 간단하게 자바스크립트의 역사를 살펴보면 1995년 정적인 HTML을 동적으로 표현하기 위해 탄생했지만 자바스크립트의 역사는 순탄치 않았다.

자바스크립트의 파편화와 표준화

1996년 마이크로소프트는 자바스크립트의 파생 버전인 JScript를 IE 3.0에 탑재했다. 그런데 문제는 이것이 자바스크립트와 적당히(?) 호환되었다는 것이다. 즉 자사 브라우저의 시장 점유율을 위해 IE에서만 동작하는 기능을 경쟁적으로 추가하기 시작한 것이다. 이로 인해 브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고 모든 브라우저에서 동작하는 웹 페이지를 개발하는 것은 무척 어려웠다.

이에 자바스크립트의 파편화를 방지하고 모든 브라우저에서 동일하게 동작하는 표준화된 자바스크립트에 대한 필요성이 제기되어, 넷스케이프 커뮤니케이션즈는 1996년 “ECMA 인터내셔널”¹에 자바스크립트의 표준화를 요청하게 된다.

1997년 7월 ECMA-262라 불리는 표준화된 자바스크립트 초판의 명세가 완성되었고 상표권 문제로 자바스크립트는 ECMASCript로 명명되었다. 이후 1999년 ECMAScript 3(ES3)이 공개되었고 10년 만인 2009년 출시된 ECMAScript 5(ES5)는 HTML5와 함께 출현한 표준안이다.

그리고 2015년 ECMAScript 6(ES6)가 공개되었는데 범용 프로그래밍 언어로서 갖추어야 할 let/const키워드, 화살표 함수, 클래스, 모듈 등과 같은 기능이 대거 도입된 큰 변화가 있었다.

자바스크립트의 성장

초창기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위하여 한정적으로 사용되었다. 당시의 대부분 로직은 서버에서 실행되었고 브라우저는 전달받은 HTML/CSS만 랜더링 하는 수준이었다고 한다.

1999년 Ajax가 등장했다. 이는 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 기능이다.

이전의 웹 페이지는 서버로부터 완전한 HTML을 전송받아 웹 페이지 전체를 렌더링 하는 방식으로 동작했다. 따라서 화면이 전환되면 서버로부터 새로운 HTML을 전송받아 웹 페이지 전체를 다시 렌더링 한다.

이는 변경이 없는 부분까지 포함된 데이터를 전송받아야 하기 때문에 불필요한 데이터 통신이 발생하고 퍼포먼스 측면에서도 불리했다. 그리고 이로 인해 화면 전환이 일어나면 순간적으로 화면이 깜빡이는 현상이 발생하여 이는 웹 애플리케이션의 한계로 받아들여졌다.

그러나 Ajax의 등장으로 이전의 패러다임을 획기적으로 전환했다. 변경이 필요한 부분만 한정적으로 렌더링 하는 방식이 가능해졌고 웹 브라우저에서도 데스크톱 애플리케이션과 유사한 빠른 퍼포먼스와 부드러운 화면 전환이 가능해진 것이다.

이후 2006년 당시의 까다롭던 자바스크립트보다 배우기 쉽고 직관적인 jQuery가 등장하여 이를 선호하는 개발자가 양산되었다.

Google Maps가 보여준 자바스크립트의 가능성을 매개로 자바스크립트를 이용한 웹 애플리케이션을 구축하려는 시도가 늘어가며 보다 빠르게 동작하는 자바스크립트 엔진이 요구되었다. 2008년 구글의 V8자바스크립트 엔진은 이러한 요구에 부합하는 빠른 성능을 보여주어 자바스크립트는 데스크톱 애플리케이션과 유사한 사용자 경험을 제공할 수 있는 애플리케이션 개발 언어로 정착하였다.

2009년 Node.js의 등장은 브라우저에서만 동작하던 반쪽짜리 프로그래밍 언어 취급받던 자바스크립트를 브라우저 이외의 환경에서 동작시킬 수 있게 하여 프런트엔드 영역은 물론 백엔드 영역까지 아우르는 언어의 표준으로 자리 잡는다.

지금은 다양한 플랫폼에서 동작하는 애플리케이션이 필요하게 되었고 이를 개발하기 위한 언어로 자바스크립트가 중요한 언어로써 주목받고 있다. 세계에서 가장 인기 있는 프로그래밍 언어가 되었다.

ECMAScript?

ECMAScript는 자바스크립트의 표준 명세인 ECMA-262를 말하며 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 빌트인 객체 등 핵심 문법(core syntax)을 규정한다. 각 브라우저 제조사는 ECMAScript를 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현한다.

ES6 이전과 이후의 차이

ES6 이전 버전과의 주요 차이점은 다음과 같습니다.

1. 블록 스코프 변수 선언 방식의 추가로, 변수의 범위와 생명 주기를 더 명확하게 제어할 수 있게 되었습니다. 이를 통해 코드의 가독성과 유지 보수성이 개선되었습니다.
2. 화살표 함수의 추가로, 함수를 간결하게 작성할 수 있게 되어 코드의 가독성이 좋아졌습니다. 또한, 함수를 선언적으로 작성하는 것보다 성능이 더 우수하다는 장점이 있습니다.
3. 클래스의 추가로, 객체 지향 프로그래밍을 더 쉽고 간결하게 구현할 수 있게 되었습니다. 이를 통해 코드의 유지 보수성과 가독성이 개선되었습니다.
4. 모듈의 추가로, 코드를 모듈 단위로 나누어 작성하고 필요한 모듈만 가져와 사용할 수 있게 되어 코드의 관리와 유지 보수가 더 편리해졌습니다. 또한, 모듈 간의 의존성을 명시적으로 관리할 수 있어서 코드의 신뢰성을 높일 수 있습니다.
5. 템플릿 리터럴의 추가로, 문자열 내에 변수나 표현식을 쉽게 삽입할 수 있게 되어 코드의 가독성이 좋아졌습니다.
6. Promise의 추가로, 비동기 처리를 보다 쉽고 효율적으로 처리할 수 있게 되어 애플리케이션의 성능 향상에 기여하였습니다. 이를 통해 코드의 신뢰성과 유지 보수성이 개선되었습니다.
7. 기본 매개변수의 추가로, 매개변수에 기본 값을 설정할 수 있게 되어 코드의 가독성과 유지 보수성이 더욱 개선되었습니다.

이러한 변화로 인해 자바스크립트의 기능성과 유연성이 높아지게 되어, 더욱 다양한 애플리케이션을 개발할 수 있게 되었다. ES5만으로는 다양한 애플리케이션을 개발하는데 어려움이 있었기 때문에 이를 해결하기 위해 큰 변화가 있었던 것으로 보인다.

맺으며

지금의 자바스크립트는 브라우저에서만 작동하는 언어를 벗어나서 거의 모든 곳에서 사용할 수 있는 언어가 되었습니다. 프런트엔드, 백엔드에서 모두 사용할 수 있으며, iOS/안드로이드, 크롬, 파이어폭스, 사파리 등 다른 브라우저나 다른 운영체제에서도 동작하는 애플리케이션을 개발할 수 있습니다. 정말 말 그대로 만능이라고 부를 만하다는 생각이 듭니다.

어린 시절에 잠시 스쳐 지나가는 인연이라 생각했던 자바스크립트가 몰라보게 발전하고 세계에서 가장 인기 있는 언어가 된 것은 참으로 놀라운 일입니다. 한 주 내내 내가 알던 자바스크립트가 맞나?라고 몇 번이나 되뇌었던 것 같습니다. 반푼이 프로그래밍 언어였던 자바스크립트가 가장 인기 있는 프로그래밍 언어가 된 것처럼 반푼이 개발자로 남지 않도록 노력해야겠습니다.

Reference

poiemaweb: https://poiemaweb.com/js-introduction

MDN 웹 사이트: https://developer.mozilla.org/en-US/docs/Web/JavaScript/LanguageResources

ES6 문법 정리 블로그: https://medium.com/@ljs0705/es6-초간단-정리-2d2e88f8f0ba

ES6 문법 정리 블로그(번역): https://gmlwjd9405.github.io/2019/04/06/javascript-es6.html

1. 컴퓨터 시스템의 표준을 관리하는 비영리 표준화 기구 ↩︎