라이브러리 vs 프레임워크 차이

라이브러리란?

프로그램에서 필요로 하는 기능을 제 3자가 사용할 수 있는 형태로 모아둔 것을 말한다.
라이브러리를 사용하는 형태에도 여러 가지가 있지만, 꼭 어떤 특정한 형태의 설계를 갖는 애플리케이션의 어떤 부분에서 사용해야 한다는 법칙이 정해져 있는 것은 아니다. 라이브러리를 사용하는 쪽에서는 자신들이 설계한 애플리케이션에서 필요로 하는 기능이 라이브러리에 갖춰져 있다면 원하는 대로 그 기능을 프로그램 내에서 사용할 수 있다.

이에 비해 프레임워크란?

애플리케이션의 전체 혹은 일부분의 형태를 규정 혹은 방침화한 것을 말한다. 프레임워크에는 설계에 대한 내용을 작성하는 방법이 정혀져 있는데, 이를 잘 따름으로써 개발이 손쉬워 지거나, 나중에 코드를 다시 볼 때에도 전체 내용을 파악하기 쉬워진다.
"애플리케이션으로서 갖춰야 할 형태"에 집중하고 이를 실현하기 위해 필요한 기능을 제공하는 식이다.

여기서 중요한 부분은 자바스크립트를 이용하여 개발할 때, 이와 관련된 프레임워크와 라이브러리 역시 자바스크립트로 만들어진 것이기에, 개발에서 진척이 막혔을 때에도 자바스크립트 파일을 직접 열어서 코드를 확인할 수 있으므로 불안감을 해소할 수 있다는 점이다.

XMLHttpRequest

1999년 12월 ECMAScript3 이 발표되면서 자바스크립트의 표준이 정립되었다. 이때 이 표준 사항에 XMLHttpRequest라는 기능이 있었다. 이 기능은 서버측으로부터 비동기적으로 데이터를 받아올 수 있다는 것이 특징으로, 오늘날 사용되는 Ajax의 주요 요소 기술이 되었다.

Ajax는 Adaptive Path사의 공동 설립자인 제시 제임스 개럿이 주창한 것으로, 웹 2.0붐과 함께 자바스크립트로 구현된 애플리케이션의 현대적 아키텍처로 널리 쓰이게 된다.

CoffeeScript -> ECMAScript6

2009년 CoffeeScript는 Jeremy Ashkenas가 발표한 프로그래밍 언어이다. 클래스 문법과 함수를 간단하게 정의할 수 있는 syntax sugar(편의문법) 등을 포함하여 현대적 프로그래밍 언어로 받아들여질 수 있었다. 그 다음 등장한 2015년 ECMAScript 6에서도 이들 기능이 형태만 바꾸어 다시 포함되었다.
Jeremy Ashkenas는 이 당시 Backbone.js라는 차세대 라이브러리를 내놓았는데, 이 Backbone.js는 SPA를 만들 수 있는 구조를 갖춘 것이 특징으로 이후 발표되는 자바스크립트 프레임워크에 큰 영향을 미쳤다.

2009년, Node.js 발표

서버사이드에서 js를 실행하는 환경이었지만, 함께 탑재된 패키지매니저 npm덕분에 자바스크립트의 대표적 빌드 환경으로 쓰이게 되었다. 이런 연유로 자바스크립트는 ECMAScript3시절부터 쓰이던 HTML파일에서 읽어들여 사용하는 방식을 벗어나 많은 수의 파일로 구성된 자바스크립트 프로그램을 하나로 묶어주는 빌드환경과 복잡한 프로그램 작성을 도와주는 언어 환경을 갖추게 되었다.

그리고 찾아온 SPA 시대

Single Page Application 약자. 이 책에서는 다음과 같은 의미로 사용

• 브라우저 및 브라우저 렌더링 엔진 내부에서 동작하는 웹 애플리케이션

• 브라우저에서 최초 접근한 URL을 기점으로 하여 다양한 화면으로의 이동을 제공하지만 기본적으로 최초의 HTML안에서 사용자 인터페이스가 완결됨

• 페이지 내의 사용자 인터페이스 변화에 따라 URL이 순차적으로 변화하며, 브라우저 히스토리를 통해 앞의 페이지로 거슬러 올라갈 수 있음

• 페이지에서 필요로 하는 데이터는 서버로부터 API 등의 형태로 필요할 때마다 단편적으로 제공됨

Ajax가 페이지의 일부만을 rich HTML로 만들 수 있었던데 비해, 페이지 전체가 동적으로 변화하고 서버의 응답과 상관없이 화면전환이 가능한 애플리케이션을 SPA라고 한다.

그 외의 자바스크립트 프레임워크

• 1. 웹 컴포넌트 계열
• 2. 풀스택 계열
• 3. 모바일 네이티브 계열
• 4. WebVR 계열

Web VR 계열

브라우저 상에서 VR 체험 제공을 목적으로 하는 오픈스펙이다. 이 스펙을 준수하는 콘텐츠를 VR 헤드마운트 디스플레이로 열람하면 좌우 두 눈으로 각각의 영상이 재생되어서 가상현실을 체험해 볼 수 있다.
브라우저는 WebVR API를 통해 VR 헤드마운트 디스플레이의 상태에 접근하고, Vr콘텐츠 쪽에서는 자바스크립트를 사용하여 사용자의 상태에 맞는 내용을 표현하게 된다.
여담이지만 WebVR 콘텐츠는 3D 형태로 만들어지는 것이 많기 때문에 3D 라이브러리와 함께 사용하여 콘텐츠를 구현한다. 즉, WebVR 자체에는 3D 표시 기술이 포함되지 않는다. Web VR프레임워크에는 A-Frame, React 360 등이 있다.