JavaScript 라이브러리 15선
Chart.js · Three.js · Reveal.js · Remotion · Puppeteer · Express · Socket.IO · Electron · Anime.js · Anthropic SDK · Leaflet · Discord.js · Sharp · p5.js · jsPDF.
JavaScript는 브라우저와 서버 양쪽에서 돌아가는 유일한 언어다. 차트, 3D, 실시간 통신, 데스크탑 앱, AI 연동까지 — 15개 라이브러리만 알면 웬만한 프로젝트를 바이브코딩으로 뚝딱 만들 수 있다.
레슨 단위로 펼쳐 보기
- TOPIC · 02 · 01★★
Chart.js — 인터랙티브 차트
Canvas 기반 차트 라이브러리. bar, line, pie, doughnut 등 다양한 차트를 몇 줄로 완성.
- TOPIC · 02 · 02
Three.js — 3D 그래픽
WebGL을 추상화한 3D 그래픽 라이브러리. Scene, Camera, Renderer 세 요소로 브라우저 속 3D 세계를 구현.
- TOPIC · 02 · 03
Reveal.js — 프레젠테이션
HTML/마크다운으로 만드는 프레젠테이션 프레임워크. 코드 하이라이팅, 애니메이션, 발표자 노트 내장.
- TOPIC · 02 · 04
Remotion — 코드로 영상 제작
React 컴포넌트로 영상을 만드는 라이브러리. 프레임 단위 제어, MP4 렌더링까지.
- TOPIC · 02 · 05★★
Puppeteer — 브라우저 자동화
헤드리스 Chrome을 코드로 조종하는 라이브러리. 스크린샷, PDF 변환, 크롤링, E2E 테스트에 활용.
- TOPIC · 02 · 06★★
Express — 백엔드 서버
Node.js 웹 서버 프레임워크. 라우팅, 미들웨어, REST API 구축의 사실상 표준.
- TOPIC · 02 · 07★★
Socket.IO — 실시간 통신
이벤트 기반 실시간 양방향 통신 라이브러리. 방(room), 브로드캐스트, 자동 재연결 내장.
- TOPIC · 02 · 08
Electron — 데스크탑 앱
HTML/CSS/JS로 Windows·macOS·Linux 데스크탑 앱을 만드는 프레임워크. VS Code, Discord가 Electron 기반.
- TOPIC · 02 · 09
Anime.js — 웹 애니메이션
CSS 속성, SVG, DOM 요소를 부드럽게 트위닝하는 경량 애니메이션 엔진.
- TOPIC · 02 · 10★★
Anthropic SDK — AI 연동
Claude API를 호출하는 공식 SDK. 텍스트 생성, 스트리밍, 도구 사용(Tool Use)을 지원.
- TOPIC · 02 · 11
Leaflet — 인터랙티브 지도
경량 인터랙티브 지도 라이브러리. 마커, 팝업, 타일 레이어를 자유롭게 구성.
- TOPIC · 02 · 12
Discord.js — 디스코드 봇
디스코드 봇을 만드는 공식 Node.js 라이브러리. 슬래시 명령, 메시지 이벤트, 임베드 메시지 지원.
- TOPIC · 02 · 13
Sharp — 이미지 일괄 처리
Node.js 고성능 이미지 처리 라이브러리. 리사이즈, 포맷 변환, 크롭, 워터마크를 C++ 속도로 처리.
- TOPIC · 02 · 14
p5.js — 크리에이티브 코딩
setup/draw 루프 기반의 크리에이티브 코딩 라이브러리. 2D 그래픽, 인터랙션, 사운드를 쉽게 구현.
- TOPIC · 02 · 15
jsPDF — PDF 생성
브라우저/Node.js에서 PDF를 동적으로 생성하는 라이브러리. 텍스트, 이미지, 표 삽입 가능.
