자바스크립트 라이브러리

자바스크립트에도 개발을 쉽게 할 수 있도록 도와주는 라이브러리가 있다.

그중, jQuery와 Framework에 대해 정리해보겠다.

1. jQuery

edwith의 웹 프로그래밍 강의를 들으며 2018년 기준, jQuery는 지난 10년간 가장 인기 있는 라이브러리라는 것을 알게 됐다.

나도 웹 프로그래밍 공부를 시작하면서 JavaScript를 공부하면서 제일 처음 접한 라이브러리가 jQuery였다.

그만큼 유명하고 많이들 사용하고 있구나 생각이 든다.

(참고로 jQuery는 w3schools 에서 공부했다.)

그동안 jQuery의 인기의 이유는 다음과 같다.

IE6, 7, 8를 포함해서 다양한 웹 브라우저의 API 간의 차이로 인해, 브라우저에 따라 코드 동작이 잘 안 되는 경우가 많이 있었다. jQuery는 이런 브라우저 호환성 이슈를 줄여주었다.
복잡하고 어려운 DOM APIs를 추상화해서 제공하여 DOM 조작을 쉽게 할 수 있다.
절차적인 사고의 흐름에 맞춰 그대로 프로그래밍을 할 수 있다.

jQuery 예제)

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

-> $()는 document.querySelectorAll()과 동일하다.

예제를 보면 id 속성 값이 p1인 엘리먼트($("#p1"))의 색을 빨간색으로 만들고(css), 2초 동안 스르륵 올라가고(slideUp), 2초 동안 스르륵 내려가도록 하는(slideDown) 동작을 나타낸다.

메서드 체이닝으로 한 줄에 나타냈다.

이렇게 jQuery를 사용하면 생각한대로 코드를 짜고, 쉽게 DOM을 조작할 수 있다.

하지만 다음과 같은 이유로 jQuery의 인기는 점점 줄어들고 있다고 한다.

IE6, 7, 8의 사용 점유율이 점점 떨어지고, 점차 브라우저 호환성 이슈가 줄어들었다. (국내에선 아직 점유율이 굉장히 높다고 한다.)
약 8년 전부터 JS Frameworks가 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있다.
이젠 다른 라이브러리들도 사고의 흐름에 맞춰 프로그래밍할 수 있도록 지원해준다.
2015년에 만들어진 ES6부터 유용한 메서드들을 많이 제공하고 있다. JavaScript만으로 jQuery에서만 제공하던 유용한 메서드를 사용할 수 있게 됐다는 것이다.

참고로 jQuery를 사용할 땐 다음 몇 가지 가이드를 기억해두면 좋다.

웹 프로그래밍에서 자바스크립트 코드의 비중이 커지면서 여러 명이 함께 개발하게 됐고, 여러 명이서 효율적으로 협업을 하기 위한 틀이 필요했다.

Single Page Application이라고, 데이터 처리나 Ajax 처리나 routing 처리 등을 편리하게 해주는 Framework가 등장했다.

React, Angular, Vue, Ember와 같은 것들이 있다.

이것들을 이용하면 DOM 제어를 더 쉽게 할 수 있고, 데이터 조작과 View를 분리하여 관리할 수 있다.

component 방식으로 개발할 수 있어, 코드 재사용률도 높일 수 있다.

이젠, 라이브러리의 인기는 Framework에서 얼마나 사용되냐에 달려있다.

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

라이브러리나 프레임워크가 필요하지 않은 경우도 상당히 많으니, 각각 어떤 목적을 가지고 있는지 보고 필요한 것을 잘 선택해야 한다.

출처)

edwith 부스트코스 웹 프로그래밍