주요 내용
컴퓨터 프로그래밍
코스: 컴퓨터 프로그래밍 > 단원 6
단원 7: 웹 페이지에 JS 라이브러리 사용하기JS 라이브러리의 세계
우리가 사용할 수 있는 JavaScript 라이브러리는 수 천 가지가 있고, 이 라이브러리는 웹 페이지의 다음과 같은 부분을 작성하는 것을 도와줄 수 있습니다:
- DOM 조작
- DOM 이벤트
- AJAX / 데이터 검색
- 효과 & 애니메이션
- HTML 템플릿
- 페이지 레이아웃
- UI 위젯
- 그래픽 & 차트
- 데이터 모델링
- 라우팅 & 탐색
- 접근성
- 다중 브라우저 지원
- 모바일 지원
이렇게 생각해보면 쉽습니다. 웹 페이지는 사용자 인터페이스 (HTML & CSS), 상호성 (JS + DOM), 데이터 (종종 JS를 통해 가져오는)로 이루어집니다. 데이터 기반의 대화형 UI를 라이브러리를 사용하지 않고 만들 수도 있고, 서로 다른 라이브러리를 각 부분에 사용할 수도 있습니다. 어떤 라이브러리는 여러 가지 일을 하는 방면에 어떤 라이브러리는 한 가지 일만 하도록 설계되어 있습니다.
웹 개발에서 가장 어려운 부분 중 하나는 어떤 라이브러리를 사용하는지 결정하는 것입니다. 왜냐하면 라이브러리에 의존하여 코드를 작성하는 일이 많은데, 나중에 변경하기가 어렵기 때문입니다. 정답은 없습니다. 여러 가지 방안을 고려하여 타당한 추측을 해야 합니다.
웹 프레임워크
일부 라이브러리는 데이터 획득부터 DOM 조작, 세련된 UI 위젯까지 "모든 것을" 합니다. 만약 이런 프레임워크를 사용한다면, 페이지에 많은 JavaScript를 가져와야 할 것이고, 프레임워크가 제공하는 기능 중 대부분이 꼭 필요한 것인지 고려해야 합니다. 일부 개발자들은 이러한 프레임워크가 너무 많은 일을 한다고 느끼고, 더 작은 일에 초점이 맞추어진 라이브러리를 사용합니다.
CSS 프레임워크
CSS 라이브러리는 CSS 스타일 규칙과, 어떤 HTML 태그와 클래스를 사용해야 하는지 적어놓은 문서의 모음집입니다. 아름다운 웹 사이트를 쉽게 만들 수 있게 도와주는 유명한 CSS 라이브러리들이 있습니다. 그중 일부는 선택적으로 자바스크립트 위젯을 포함하기도 하지만, 개발자들은 대부분 CSS 라이브러리와 함께 다른 JS 라이브러리를 사용합니다.
JS 브라우저 라이브러리
다음은 DOM API, 윈도우 메소드같이 이 단원에서 이야기 한 브라우저의 기능들을 더 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 같은 작업을 더 적은 양의 코드로 만들 수 있게 도와주고 브라우저 간 버그도 해결해 줍니다.
JS 응용 프로그램 아키텍처 라이브러리
이 라이브러리는 웹 응용 프로그램의 덩치가 커질 때 유용합니다. 아직은 수백 줄 정도의 코드라 잘 모를 수 있지만, 코드의 길이가 몇천 줄이 넘어가게 되면, 코드가 관리가 불가능할 정도로 엉망이 되어 "스파게티" 처럼 될 수도 있습니다. 이 라이브러리는 주로 객체 지향 프로그래밍 법칙대로 "모델" (데이터) 을 "뷰" (표현) 계층으로부터 분리해 코드를 잘 정리하도록 해 줍니다.
미니 라이브러리 & 마이크로 라이브러리
특정한 목적을 위해서 개발자들이 만든 작은 라이브러리를 사용해 보세요. 너무 작기 때문에 "마이크로 라이브러리"라고도 불리는 미니 라이브러리는 다음과 같이 여러 종류가 있습니다.
- DOM: tinyDOM
- Events: Events.js
- AJAX: MicroAjax
- Animation: Morpheus, Viper
- Data Modeling: Spine, Knockout
- Templates: Handlebars, Mustache
- Routing: PathJS
- Object-Orientation: Classy, Klass
- Graphics: Processing.JS (See example on KA), RaphaelJS (See example on KA), D3, Three.JS (See example on KA), Paper.js
- Charts: gRaphael, High Charts
- Date/time: moment.js
microjs.com에서 더 많은 라이브러리를 찾거나, 인터넷에서 여러분이 필요로 하는 기능의 "자바스크립트 라이브러리[기능]"을 검색해보세요.
JS 라이브러리를 칸아카데미의 웹 페이지에서 시도해본 적 있나요? 아래에 댓글로 공유하세요.