2. 라이브러리 활용과 클린코드 (1)

1) JavaScript 라이브러리

jQuery 의 10년

• 지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다. 2018년 현재 그 인기는 많이 줄었습니다.
• 어떤 이는 이제 더 배울 필요가 없다고 이야기되고 합니다.
  (실제로는 기존에 적용된 코드를 수정하느라 웹개발자들이 쉽게 jQuery를 떠날 수는 없을 겁니다.)
• jQuery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다.
  1. IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여주었습니다.
  2. 복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다.
  3. 사고의 흐름에 맞춰 프로그래밍할 수 있습니다.
• jQuery에서 DOM조작을 어떻게 처리하는지 찾아보면 꽤 편리합니다.
• 물론 그전에 DOM을 native방식으로 접근해야, jQuery가 얼마나 편리한지 알겠지만요.
• 아래 코드는 '사고의 흐름'이라는 관점에서 이해할 수 있는 jQuery코드 입니다. 주석에 적힌 내용대로 코드를 구현할 수 있습니다.
  (메서드를 연속적으로 부르는 방식을 method chaining이라고 합니다. 이러한 방식은 jQuery뿐만 아니라 많은 라이브러리에서 제공하고 있습니다)

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

 

그러던 jQuery가 왜..

• 인기 있던 이유를 하나씩 현재 다시 보면 이렇습니다.
  1. 점차 브라우저 호환성 이슈가 줄었습니다.
  2. DOM APIs는 그대로지만, 7~8년 전부터 등장한 JS Frameworks 들이 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있습니다.
  3. 다른 라이브러리들도 이런 방식을 지원도 합니다.
• 그 외에도 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의존도를 줄여나갑니다.
  • 직접적인 jQuery의 수정, 굉장히 좋은 방법은 아닙니다. 오버라이딩 한다 그래서 비슷한 메서드들을 추가해가지고 치환시켜가지고 쓰는 그런 방법도 있겠지만 수정해놓고 수정한 티도 안 내고 그대로 두는 경우에는 유지보수 상에서 큰 어려움을 겪을 수가 있습니다.

 

결론

• 라이브러리나 프레임워크는 필요한 시점에 적절한 것을 골라서 사용하면 됩니다. 
• 라이브러리나 프레임워크가 어떤 목적, 철학을 가지고 있는 것인지 관심을 두는 게 좋습니다.
  그래야 우리에게 필요한 것을 잘 선택할 수 있습니다.
• 어쩌면 라이브러리가 필요하지 않은 경우도 상당히 많습니다. 간단하게 처리할 수 있으면서 라이브러리를 가져오는 행동은 자제합니다.

 

생각해보기

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

참고자료

[참고링크] 2018년 기준 중요한 라이브러리
https://medium.com/javascript-scene/top-javascript-libraries-tech-to-learn-in-2018-c38028e028e6

[참고링크] React           https://reactjs.org/    A JavaScript library for building user interfaces

[참고링크] Vue             https://vuejs.org/

[참고링크] Immutable.js           https://facebook.github.io/immutable-js/

[참고링크] lodash          https://lodash.com/

[참고링크] Rx.js             http://reactivex.io/rxjs/