JavaScript 라이브러리 - accidentlywoo/legacyVue GitHub Wiki

JavaScript 라이브러리

  • 들어가기 전에 자바스크립트 세계에도 개발을 좀더 쉽게 도와주는 라이브러리가 많이 있습니다. 어떤 라이브러리가 어떤 부분을 돕는지 궁금한 경우가 많습니다.

학습 목표

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

핵심 개념

  • jQuery
  • SPAs Framework

학습하기

jQuery의 10년

지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다.2018년 현재 그 인기는 많이 줄었습니다. 어떤 이는 이제 더 배울 필요가 없다고 이야기되고 합니다.(실제로는 기존에 적용된 코드를 수정하느라 웹개발자들이 쉽게 jQuery를 떠날 수는 없을 겁니다.) jQiery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다.

  • IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API간의 차이를 줄여주었습니다.
  • 복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다.
  • 사고의 흐름에 맞춰 프로그래밍할 수 있습니다. jQuery에서 DOM을 native방식으로 접근해야,jQuery가 얼마나 편리한지 알겠지만요. 아래 코드는 '사고의 흐름'이라는 관점에서 이해할 수 있는 jQuery코드 입니다. //p1아이디를 가진 엘리먼트를 찾아서, color를 red 로 하고, slideup을 2초간, slideDown을 2초간 한다. $("#p1").css("color", "red").slideUp(2000).slideDown(2000); 주석에 적힌 내용대로 코드를 그대로 구현할 수 있습니다. 메서드를 연속적으로 부르는 방식을 method chaining이라고 합니다. 이러한 방식은 jQuery뿐만 아니라 많은 라이브러리에서 제공하고 있습니다.

그러던 jQuery가 왜..

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

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

Framework Framework

Single Page Application이라는 서비스개념이 등장했습니다. 즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 나왔습니다. React, Angular, Vue, Ember와 같은 것들이 그런 것입니다. 이를 사용하면 좀 더 쉽게 DOM제어를 할 수 있고, Data조작을 View에서 분리해서 관리할 수 있습니다.그리고 component방식으로 개발할 수 있어 재사용 가능한 코드를 만들 수도 있고요, 라이브러리가 유용한 함수들을 제공한다고 할 수 있다면, Framework는 큰 애플리케이션의 구조를 잡는 것을 도와주는 역할을 하죠. 특히 데스크탑 웹 개발에서 더 유용하게 사용할 수 있습니다.

그 밖에

라이브러리 수준에서 유용한 것들은 이제 Framework에서 이를 얼마나 사용하는가에 의해서 인기가 달라집니다. 다시 말해서, '어떤 Framework가 인기가 있는가?'에 의해서 그 Framework이 가진 철학에 따라서 필요한 라이브러리가 의존적으로 많이 쓰이고 인기를 얻고 있습니다. 그렇다보니, Framework과 관련 없이 많이 쓰일만한 라이브러리는 이제 별로 없습니다. Observables을 처리해주는 RxJS나,Lodash와 같은 데이터를 쉽게 처리해주는 유틸리티 등이 인기를 얻는 정도입니다. 나머지 라이브러리는 해당 Framework가 사용하는 것이 무엇인가에 따라 달라집니다. 예를 들어 React에서는 Immutable.js나 Redux 등이 인기를 얻고 있는 것처럼요.

jQuery를 사용해야 한다면,

많은 웹서비스의 legacy코드는 아직도 jQuery나 오래된 라이브러리를 사용합니다. 당분간 이를 유지 보수해야 하는 개발자는 상당히 많을 것입니다. jQuery를 다뤄야 할 때는 몇 가지 가이드를 기억해두면 좋습니다. jQuery의 버전을 잘 확인하고, 그 버전에 맞는 적절한 메서드를 선택합니다. 한 페이지에 여러가지 jQuery버전이 없도록 합니다. 가급적 대체 가능한 메서드는 표준 JavaScript메서드를 사용하면서 jQuery의존도를 줄여나갑니다.

결론

라이브러리나 프레임워크는 필요한 시점에 적절한 것을 골라서 사용하면 됩니다. 그러기 위해서는 라이브러리나 프레임워크가 어떤 목적을 가지고 있는 것인지 관심을 두는 게 좋습니다.그래야 우리에게 필요한 것을 잘 선택할 수 있습니다. 어쩌면 라이브러리가 필요하지 않은 경우도 상당히 많습니다.

생각해보기

  1. SPAs가 무엇인가요?
  2. 왜 필요한 걸까요?
  3. 어떤 웹서비스에서 필요한지를 고민해볼 필요가 있습니다.