[FE] 04. JavaScript 라이브러리

<4. JavaScript 라이브러리>

* jQuery

지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했으나 2018년 현재 그 인기는 많이 줄었들었음!

- jQuery의 장점

• IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여줌

• 복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능

• 사고의 흐름에 맞춰 프로그래밍할 수 있음

- jQuery에서 DOM조작을 처리하는 방법

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

method chaining: 메서드를 연속적으로 부르는 방식

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

---

* Framework Framework

웹에서 할 수 있는 것들이 많아지면서, Single Page Application(SPA)이라는 서비스개념이 등장하게 됨

즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 등장 (React, Angular, Vue, Ember)

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

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

- 라이브러리 프레임워크 차이점

• 프레임워크: 커다란 형태, 틀, 구조적인 장치 (React, Angular, Vue, Ember)

• 라이브러리: jQuery

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

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

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

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

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

Observables을 처리해주는 RxJS(함수형 프로그래밍과 관련)나, Lodash(함수형, 데이터 처리 라이브러리)와 같은 데이터를 쉽게 처리해주는 유틸리티 등이 인기를 얻는 정도이다. (node.js에서도 많이 사용)

나머지 라이브러리는 해당 Framework가 사용하는 것이 무엇인가에 따라 달라진다. React에서는 Immutable.js나 Redux(라이브러리) 등이 인기를 얻고 있다.

---

* jQuery를 사용해야 한다면

많은 웹서비스의 legacy코드(이전 개발자가 개발한 코드, 이전까지 잘 유지되고 있는 코드)는 아직도 jQuery나 오래된 라이브러리를 사용하므로 유지 보수해야 할 필요성은 존재한다.

- jQuery 몇 가지 가이드

1. jQuery의 버전을 잘 확인하고, 그 버전에 맞는 적절한 메서드를 선택

2. 한 페이지에 여러 가지 jQuery버전이 없도록 한다.

3. 가급적 대체 가능한 메서드는 표준 JavaScript메서드를 사용하면서 jQuery의존도를 줄여나간다.

ex) array를 체크할 때 jQuery에 있는 메서드를 사용하는 것이 아닌 JavaScript 메서드를 사용

4. 직접적인 jQuery은 좋은 방법이 아님 => 유지보수에서 큰 어려움을 겪을 수 있다