본문 바로가기
Front-End

[JS] 자바스크립트란?

by Judy 2020. 6. 29.
자바스크립트의 역사와 간단한 동작원리를 알아봅니다.

 

일반적인 프로그래밍 언어와 다르게 웹 페이지의 단순한 보조 기능을 처리하기 위한 제한적인 용도를 목적으로 태어났다.

자바스크립트 엔진 내부에서 암묵적으로 처리해 주는 기능이 있습니다. 편리한 경우도 있지만 내부 동작을 이해하기 어려웠다.

 

하지만, 자바스크립트는 더 이상 제한적 용도의 프로그래밍 언어가 아닙니다. 프론트엔드와 백엔드 영역의 프로그래밍 언어로 사용할 수 있는 범용 애플리케이션 개발 언어로 성장했다.

자바스크립트

브라우저에 따라 웹 페이지가 정상적으로 동작하지 않는 크로스 브라우징 이슈가 발생하기 시작했고, 웹 페이지를 개발하는 것은 무척 어려워졌다.

자바스크립트의 파편화를 방지하고 모든 브라우저에서 정상적으로 동작하는 표준화된 자바스크립트에 대한 필요성이 제기되기 시작했다.

 

  • 1996년 11월 - 컴퓨터 시스템의 표준을 관리하는 ECMA 인터내셔널에 자바스크립트의 표준화를 요청했다.
  • 1997년 7월 - ECMA-262라 불리는 표준화된 자바스크립트 초판이 완성되었고 자바스크립트는 ECMAScript로 명명되었다.
  • 1999년 - ECMAScript3(ES3) 공개되었다.
  • 2009년 - ECMAScript5(ES5)는 HTML5와 함께 표준안으로 공개되었다.
  • 2015년 - ECMAScript6 (ES6)가 공개되면서 자바스크립트의 큰 변화가 있었다.

 

ECMAScript 2015, ES6
let, const, class, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 스프레드 문법, rest 파라미터,Symbol, Promise, Map/Set, iterator, for...of, generator, Proxy, module import/export
let, const, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖추어야 할 기능들이 대거 도입되었다.
let, const, 화살표 함수, 클래스, 모듈 등과 같이 범용 프로그래밍 언어로서 갖추어야 할 기능들이 대거 도입되었다.
ES6 이후의 버전업은 비교적 작은 기능의 추가 레벨로 매년 공개하였다.
자바스크립트 성장과 역사
Ajax
1999년, 자바스크립트를 이용해서 서버와 브라우저가 비동기적으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 XMLHttpRequest로 등장했다.
웹 페이지는 서버로부터 완전한 HTML을 전송 받아 웹 페이지 전체를 렌더링하는 방식으로 동작하여 화면이 전환되면 서버로부터 새로운 HTML을 전송 받아 웹 페이지 전체를 처음부터 다시 렌더링하였다.
불필요한 데이터 통신이 발생하고 변경이 없는 부분까지 처음부터 다시 렌더링해야 하기 때문에 퍼포먼스 측면에서도 불리한 방식이였다.
Ajax의 등장으로 이전의 패러타임을 획기적으로 전환하여, 웹 페이지의 변경이 필요 없는 부분은 다시 렌더링하지 않고, 서버로부터 필요한 데이터만을 전송 받아 변경이 필요한 부분만 한정적으로 렌더링하는 방식이 가능해졌다.
V8 자바스크립트 엔진
Google Maps를 통해 웹 애플리케이션 개발 프로그래밍 언어로서의 가능성이 확인된 자바스크립트로 웹 애플리케이션을 구축하려는 시도가 늘어나면서 보다 빠르게 동작하는 자바스크립트 엔진이 요구되었다.
2008년 구글의 V8 자바스크립트 엔진은 빠른 성능을 보여주었고 자바스크립트의 발전되었다.
Node.js
2009년 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이며 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작할 수 있도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다.
Node.js는 다양한 플랫폼에 적용할 수 있지만 서버 사이드 애플리케이션 개발에 주로 사용되며 이에 필요한 모듈, 파일 시스템, HTTP 등 빌트인 API를 제공한다.
비동기 I/O를 지원하며 단일 슬레드 이벤트 루프 기반으로 동작하여 요청 처리의 성능이 좋다. 데이터 실시간 처리하여 빈번한 I/O가 발생하는 SPA에 적합하다.
자바스크립트는 크로스 플랫폼을 위한 가장 중요한 언어로, 웹, 모바일 하이브리드 앱, 서버 사이드, 데스크톱, 머신러닝, 로보틱스 프로그래밍 언어이다.
Javascript와 ECMAScript
ECMAScript는 자바스크립트의 표준 사양인 ECMA-262를 말하며 프로그래밍 언어의 타입, 값, 객체와 프로퍼티, 함수, 표준 빌트인 객체 등 핵심 문법을 규정한다. 각 브라우저(Chrome, Safari, IE, Opera, Firefox) 제조사는 ESMAScript를 준수하여 브라우저에 내장되는 자바스크립트 엔진을 구현한다.
클라이언트 사이드 Web API (DOM, BOM, Canvas, XMLHttpRequest, Fetch, requestAnimationFrame, SVG, Web Storage, Web Component, Web worker)
Javascript의 특징
웹 브라우저에서 동작하는 유일한 프로그래밍 언어이며, 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어이다.
인터프리터 언어

런타임에 문 단위로 한 줄씩 중간 코드인 바이트 코드로 변환 후 실행한다. 실행 파일을 생성하지 않으며 인터프리터 단계와 실행 단계가 분리되어 있지 않아 한 줄씩 바이트 코드로 변환하고 즉시 실행한다.
코드가 실행될 때마다 인터프리트 과정이 반복 수행된다. 코드 실행 속도가 비교적 느리다.
자바스크립트는 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러타임 프로그래밍 언어이며, 프로토타입 기반의 객체지향 언어이다.

'Front-End' 카테고리의 다른 글

[JS] 표현식과 문  (0) 2020.07.04
[JS] 변수  (0) 2020.06.30
[React] SPA  (0) 2020.05.20
[React] 컴포넌트 성능 최적화  (0) 2020.05.19
[JS] 자바스크립트란?  (0) 2020.05.19