If you're seeing this message, it means we're having trouble loading external resources on our website.

웹 필터가 올바르게 작동하지 않으면 도메인 *. kastatic.org*.kasandbox.org이 차단되어 있는지 확인하세요.

주요 내용

JS 라이브러리의 세계

우리가 사용할 수 있는 JavaScript 라이브러리는 수 천 가지가 있고, 이 라이브러리는 웹 페이지의 다음과 같은 부분을 작성하는 것을 도와줄 수 있습니다:
  • DOM 조작
  • DOM 이벤트
  • AJAX / 데이터 검색
  • 효과 & 애니메이션
  • HTML 템플릿
  • 페이지 레이아웃
  • UI 위젯
  • 그래픽 & 차트
  • 데이터 모델링
  • 라우팅 & 탐색
  • 접근성
  • 다중 브라우저 지원
  • 모바일 지원
이렇게 생각해보면 쉽습니다. 웹 페이지는 사용자 인터페이스 (HTML & CSS), 상호성 (JS + DOM), 데이터 (종종 JS를 통해 가져오는)로 이루어집니다. 데이터 기반의 대화형 UI를 라이브러리를 사용하지 않고 만들 수도 있고, 서로 다른 라이브러리를 각 부분에 사용할 수도 있습니다. 어떤 라이브러리는 여러 가지 일을 하는 방면에 어떤 라이브러리는 한 가지 일만 하도록 설계되어 있습니다.
웹 응용 프로그램을 UI, 상호성, 데이터로 분리하는 여러 방법을 보여주는 다이어그램.
웹 개발에서 가장 어려운 부분 중 하나는 어떤 라이브러리를 사용하는지 결정하는 것입니다. 왜냐하면 라이브러리에 의존하여 코드를 작성하는 일이 많은데, 나중에 변경하기가 어렵기 때문입니다. 정답은 없습니다. 여러 가지 방안을 고려하여 타당한 추측을 해야 합니다.

웹 프레임워크

일부 라이브러리는 데이터 획득부터 DOM 조작, 세련된 UI 위젯까지 "모든 것을" 합니다. 만약 이런 프레임워크를 사용한다면, 페이지에 많은 JavaScript를 가져와야 할 것이고, 프레임워크가 제공하는 기능 중 대부분이 꼭 필요한 것인지 고려해야 합니다. 일부 개발자들은 이러한 프레임워크가 너무 많은 일을 한다고 느끼고, 더 작은 일에 초점이 맞추어진 라이브러리를 사용합니다.

CSS 프레임워크

CSS 라이브러리는 CSS 스타일 규칙과, 어떤 HTML 태그와 클래스를 사용해야 하는지 적어놓은 문서의 모음집입니다. 아름다운 웹 사이트를 쉽게 만들 수 있게 도와주는 유명한 CSS 라이브러리들이 있습니다. 그중 일부는 선택적으로 자바스크립트 위젯을 포함하기도 하지만, 개발자들은 대부분 CSS 라이브러리와 함께 다른 JS 라이브러리를 사용합니다.

JS 브라우저 라이브러리

다음은 DOM API, 윈도우 메소드같이 이 단원에서 이야기 한 브라우저의 기능들을 더 쉽게 사용할 수 있도록 도와주는 라이브러리입니다. 이 라이브러리는 같은 작업을 더 적은 양의 코드로 만들 수 있게 도와주고 브라우저 간 버그도 해결해 줍니다.

JS 응용 프로그램 아키텍처 라이브러리

이 라이브러리는 웹 응용 프로그램의 덩치가 커질 때 유용합니다. 아직은 수백 줄 정도의 코드라 잘 모를 수 있지만, 코드의 길이가 몇천 줄이 넘어가게 되면, 코드가 관리가 불가능할 정도로 엉망이 되어 "스파게티" 처럼 될 수도 있습니다. 이 라이브러리는 주로 객체 지향 프로그래밍 법칙대로 "모델" (데이터) 을 "뷰" (표현) 계층으로부터 분리해 코드를 잘 정리하도록 해 줍니다.

미니 라이브러리 & 마이크로 라이브러리

특정한 목적을 위해서 개발자들이 만든 작은 라이브러리를 사용해 보세요. 너무 작기 때문에 "마이크로 라이브러리"라고도 불리는 미니 라이브러리는 다음과 같이 여러 종류가 있습니다.
microjs.com에서 더 많은 라이브러리를 찾거나, 인터넷에서 여러분이 필요로 하는 기능의 "자바스크립트 라이브러리[기능]"을 검색해보세요.
JS 라이브러리를 칸아카데미의 웹 페이지에서 시도해본 적 있나요? 아래에 댓글로 공유하세요.