해당 Post는 JavaScript 라이브러리에 대해서 정리한 파일입니다.

자바스크립트 라이브러리들을 이해하고, 어떤 것을 앞으로 활용하면 좋을지 판단할 수 있습니다.

jQuery 의 10년

지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다.

jQuery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다.

• IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여주었습니다.
• 복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다.
• 사고의 흐름에 맞춰 프로그래밍할 수 있습니다.

아래 코드는 ‘사고의 흐름’이라는 관점에서 이해할 수 있는 jQuery코드 입니다. 이 코드는 비동기 상황에서 일어나는 것으로, 이와 유사하게 비동기로 동작하는 이벤트 콜백에서 이런 일은 발생합니다.

//p1아이디를 가진 엘리먼트를 찾아서, color를 red 로 하고, slideup을 2초간, slideDown을 2초간 한다.
$("#p1").css("color", "red").slideUp(2000).slideDown(2000); 

주석에 적힌 내용대로 코드를 그대로 구현할 수 있습니다.

메서드를 연속적으로 부르는 방식을 method chaining이라고 합니다.

이러한 방식은 jQuery뿐만 아니라 많은 라이브러리에서 제공하고 있습니다.

그러나 점점 줄어드는 인기의 이유는?

인기 있던 이유를 하나씩 현재 다시 보면 이렇습니다.

• 점차 브라우저 호환성 이슈가 줄었습니다.
• DOM APIs는 그대로지만, 7~8년 전부터 등장한 JS Frameworks 들이 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있습니다.
• 다른 라이브러리들도 이런 방식을 지원도 합니다. 그 외에도 ECMAScript 2015부터 편리한 함수들이 많이 제공되고 있습니다.

jQuery가 제공했던 유용한 기능들이 JavaScript표준방법으로 사용할 수 있게 된 것입니다.

Framework

짧게 요약하면 웹에서 할 수 있는 것들이 많아지면서, Single Page Application이라는 서비스개념이 등장했습니다.

즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 나왔습니다.

React, Angular, Vue, Ember와 같은 것들이 그런 것입니다.

이를 사용하면 좀 더 쉽게 DOM제어를 할 수 있고, Data조작을 View에서 분리해서 관리할 수 있습니다.

그리고 component방식으로 개발할 수 있어 재사용가 능한 코드를 만들 수도 있습니다.

라이브러리가 유용한 함수들을 제공한다고 할 수 있다면, Framework는 큰 애플리케이션의 구조를 잡는 것을 도와주는 역할을 하죠.

특히 데스크탑 웹 개발에서 더 유용하게 사용할 수 있습니다.

그 밖에

라이브러리 수준에서 유용한 것들은 이제는 Framework에서 이를 얼마나 사용하는가에 의해서 인기가 달라집니다.

다시 말해서, ‘어떤 Framework가 인기가 있는가?’에 의해서 그 Framework이 가진 철학에 따라서 필요한 라이브러리가 의존적으로 많이 쓰이고 인기를 얻고 있습니다.

그렇다보니, Framework과 관련 없이 많이 쓰일만한 라이브러리는 이제 별로 없습니다.

Observables을 처리해주는 RxJS나, Lodash와 같은 데이터를 쉽게 처리해주는 유틸리티 등이 인기를 얻는 정도입니다.

나머지 라이브러리는 해당 Framework가 사용하는 것이 무엇인가에 따라 달라집니다.

결론

라이브러리나 프레임워크는 필요한 시점에 적절한 것을 골라서 사용하면 됩니다.

그리기 위해서는 라이브러리나 프레임워크가 어떤 목적을 가지고 있는 것인지 관심을 두는 게 좋습니다.

그래야 우리에게 필요한 것을 잘 선택할 수 있습니다.

어쩌면 라이브러리가 필요하지 않은 경우도 상당히 많습니다.

생각해보기

• SPAs가 무엇인가요?
• 왜 필요한 걸까요?

SPA(Single Page Application)은 페이지 갱신 요청시에 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하여 주고 전체 페이지를 새로고침하지 않아서
link tag를 사용하는 기존방식보다 효율적이고 트래픽을 감소시킬수 있습니다.
SPA는 웹보다는 앱어플리케이션에 적합합니다.