통합 요약노트
Ch.2 JavaScript 라이브러리 15선
프롬프트 한 줄로 JavaScript의 세계를 열어봅니다.
이 챕터의 내용
Chart.js — 인터랙티브 차트
데이터를 눈으로 보여주는 라이브러리, Chart.js를 만나보세요.
매출 보고서를 만들 때, 엑셀 캡처 대신 살아있는 차트를 웹에 넣고 싶다면?
CDN 한 줄이면 설치 끝. HTML 파일 하나로 바로 차트를 그릴 수 있습니다.
- Chart.js는 CDN 한 줄로 설치하고, canvas 태그 하나로 차트를 그린다
- bar, line, pie 등 다양한 차트 타입을 type 값 하나로 전환할 수 있다
- 마우스 호버 툴팁, 애니메이션이 기본 내장되어 있다
- 프롬프트에 차트 타입, 데이터, 강조 포인트를 명시하면 AI가 완성 코드를 준다
Three.js — 3D 그래픽 브라우저에서
브라우저 안에서 3D 세계를 만드는 라이브러리, Three.js를 만나보세요.
나이키 신발을 360도로 돌려보는 웹사이트, 구글 어스처럼 지구를 돌리는 페이지 — 전부 Three.js로 만든 것입니다.
제품 사진만으로는 부족할 때, 고객이 직접 돌려보고 확대할 수 있는 3D 뷰어가 필요할 때.
- Three.js의 3요소: Scene(무대) + Camera(시점) + Renderer(화면 출력)
- Mesh = Geometry(모양) + Material(재질). StandardMaterial + 조명을 써야 입체감이 살아난다
- requestAnimationFrame 루프로 매 프레임 rotation 값을 바꿔 회전 애니메이션을 구현한다
- OrbitControls를 추가하면 마우스 드래그 회전·확대·이동이 한 번에 해결된다
- 프롬프트에 재질(Material), 조명 종류, 회전축, 컨트롤 방식을 명시하면 완성도가 올라간다
Reveal.js — PPT 대체 프레젠테이션
파워포인트 없이 HTML로 발표 자료를 만드는 라이브러리, Reveal.js를 만나보세요.
발표 자료에 실제 코드가 들어가야 할 때, PPT에 코드 캡처 이미지를 붙이는 건 2010년 방식입니다. Reveal.js는 코드를 직접 넣으면 자동으로 색칠해줍니다.
코드가 들어간 기술 발표, 매주 형식이 같은 주간 보고, URL 하나로 공유해야 하는 상황에 딱입니다.
- Reveal.js에서 section 태그 하나가 슬라이드 한 장이다
- class="fragment"를 붙이면 클릭할 때마다 요소가 순차적으로 나타난다
- pre > code에 코드를 넣으면 자동 구문 강조. data-line-numbers로 단계별 하이라이트도 가능
- 테마(white, moon, night 등)는 CSS 파일 한 줄로 전환한다
- 완성된 HTML 파일을 GitHub Pages나 Netlify에 올리면 URL 하나로 발표 자료 공유 끝
Remotion — 코드로 영상 만들기
프리미어 없이 React 코드로 영상을 만드는 라이브러리, Remotion을 만나보세요.
특히 같은 형식의 영상을 대량 생산해야 할 때 빛납니다. 100개의 명언 영상? 프리미어로 100번 작업하는 대신, 코드 한 번 짜고 JSON만 바꾸면 됩니다.
매주 같은 포맷의 영상을 올려야 할 때, 프리미어를 열기 귀찮을 때, 자동화된 영상 파이프라인이 필요할 때.
- Remotion은 React 컴포넌트를 프레임 단위로 렌더링해 MP4 영상을 만드는 라이브러리다
- useCurrentFrame()으로 현재 프레임, interpolate()로 값 보간, spring()으로 자연스러운 바운스를 구현한다
- Sequence 컴포넌트로 장면을 분리하고, from/durationInFrames로 각 장면의 타이밍을 제어한다
- npx remotion render 명령어로 브라우저 미리보기 없이 MP4 파일을 바로 출력할 수 있다
- props를 활용하면 하나의 템플릿으로 수백 개의 변형 영상을 자동 생성할 수 있다
Puppeteer — 브라우저 자동화 + PDF
Puppeteer는 크롬 브라우저를 코드로 조종하는 라이브러리입니다
반복적인 브라우저 작업을 자동으로 처리합니다
npm 한 줄이면 크롬까지 자동 설치됩니다
- Puppeteer는 크롬 브라우저를 코드로 조종하는 Node.js 라이브러리
- page.goto()로 접속, page.screenshot()으로 캡처, page.pdf()로 PDF 생성
- page.type()과 page.click()으로 폼 입력/클릭 자동화 가능
- AI 프롬프트에 '접속할 URL + 수행할 동작 + 저장 형식'을 명시하면 정확한 자동화 코드 생성
Express — 백엔드 서버
Express는 Node.js의 웹 서버 프레임워크입니다
프론트엔드만으로는 데이터를 저장할 수 없습니다
npm 한 줄이면 설치 끝
- Express는 Node.js에서 가장 인기 있는 웹 서버 프레임워크
- app.get(), app.post(), app.delete()로 API 엔드포인트 생성
- express.json() 미들웨어로 JSON 요청 본문 파싱
- AI 프롬프트에 'Express + 엔드포인트 목록 + 응답 형식'을 명시하면 정확한 서버 코드 생성
Socket.IO — 실시간 채팅
Socket.IO는 실시간 양방향 통신 라이브러리입니다
새로고침 없이 데이터가 바로 나타납니다
서버와 클라이언트 양쪽 모두 설치합니다
- Socket.IO는 서버와 브라우저 간 실시간 양방향 통신 라이브러리
- io.on('connection')으로 연결, emit()으로 전송, on()으로 수신
- 채팅, 알림, 협업 도구, 라이브 대시보드 등 실시간 기능에 필수
- AI 프롬프트에 '이벤트 이름 + 닉네임/방 구분 + 전달할 데이터 구조'를 명시하면 정확한 코드 생성
Electron — 데스크탑 앱 만들기
Electron은 웹 기술로 데스크탑 앱을 만드는 프레임워크입니다
웹 개발 실력 하나로 데스크탑 앱을 만듭니다
npm으로 설치하고 바로 데스크탑 창을 띄워봅니다
- Electron은 HTML/CSS/JS로 데스크탑 앱을 만드는 프레임워크
- BrowserWindow로 창 생성, loadFile()로 HTML 로드, ipcMain/ipcRenderer로 프로세스 간 통신
- VSCode, Discord, Slack 등 유명 앱들이 Electron 기반
- AI 프롬프트에 '메인 프로세스 기능 + UI 구성 + 단축키/메뉴'를 명시하면 정확한 코드 생성
Anime.js — 웹 애니메이션
CSS, SVG, DOM 요소를 부드럽게 움직이는 경량 애니메이션 라이브러리, Anime.js를 만나보세요.
파일 크기가 17KB밖에 안 됩니다. 그런데 타임라인, 스태거, 이징 함수까지 전부 지원해요.
랜딩 페이지를 열었을 때 로고가 통통 튀고, 텍스트가 한 글자씩 나타나면 어떨까요?
- Anime.js는 CDN 한 줄로 설치하고, targets에 CSS 선택자를 넣으면 바로 애니메이션이 시작된다
- timeline()으로 여러 애니메이션을 순차 실행하고, stagger()로 간격을 자동 계산한다
- easing 옵션으로 바운스, 탄성, 등속 등 다양한 가감속 곡선을 적용할 수 있다
- 프롬프트에 동작 순서, 타이밍, 이징 스타일을 명시하면 AI가 타임라인 코드를 완성해준다
Anthropic SDK — AI를 내 프로그램에 넣기
Claude AI를 내 코드에서 직접 호출하는 공식 라이브러리, Anthropic SDK를 만나보세요.
AI 챗봇, 자동 번역기, 문서 요약 도구… 이 모든 걸 코드 몇 줄로 만들 수 있습니다.
매번 웹사이트에 복사-붙여넣기 하는 대신, 코드가 알아서 AI에게 물어보면 어떨까요?
- Anthropic SDK는 npm install 한 줄로 설치하고, Claude AI를 코드에서 직접 호출한다
- messages.create()로 일반 요청, stream()으로 실시간 스트리밍 응답을 받을 수 있다
- system 프롬프트로 AI의 역할(번역가, 요약봇 등)과 출력 규칙을 지정한다
- 프롬프트에 'SDK + 입출력 형식 + 원하는 기능'을 명시하면 AI가 완성 코드를 만들어준다
Leaflet — 인터랙티브 지도
Leaflet은 웹에 인터랙티브 지도를 삽입하는 라이브러리
위치 데이터를 지도 위에 표시할 때
HTML 파일 하나로 바로 시작합니다
- Leaflet은 인터랙티브 지도를 웹에 삽입하는 오픈소스 라이브러리 (42KB, 무료)
- CDN 링크 2줄이면 설치 완료. HTML 파일 하나로 바로 시작 가능
- L.map → L.tileLayer → L.marker → .bindPopup 4단계로 지도 완성
- OpenStreetMap과 함께 쓰면 Google Maps와 달리 완전 무료
- AI 프롬프트에 좌표, 표시할 정보, 인터랙션 방식을 구체적으로 명시하면 정확한 코드 생성
Discord.js — 디스코드 봇 만들기
Discord.js는 디스코드 봇을 JavaScript로 만드는 라이브러리입니다
커뮤니티가 커지면 사람 손으로는 관리가 안 됩니다
npm 한 줄이면 설치 끝
- Discord.js는 디스코드 봇을 JavaScript로 만드는 공식 라이브러리
- Client + GatewayIntentBits로 봇 생성, messageCreate 이벤트로 명령어 처리
- 봇 토큰은 반드시 환경변수(DISCORD_TOKEN)로 관리 — 코드에 직접 넣지 말 것
- AI 프롬프트에 '명령어 목록 + 이벤트 종류 + 응답 형식'을 명시하면 정확한 봇 코드 생성
Sharp — 이미지 초고속 일괄 처리
Sharp는 이미지를 초고속으로 변환하는 Node.js 라이브러리입니다
이미지 100장을 포토샵으로 하나씩 열 건가요?
npm 한 줄이면 설치 끝
- Sharp는 Node.js 이미지 처리 라이브러리 — libvips 기반으로 1장당 약 50ms 초고속
- sharp().resize().webp().toFile() 체이닝으로 리사이즈 + 포맷 변환을 한 줄에
- Pillow 대비 5~10배 빠르고 메모리 효율적 — 대량 이미지 일괄 처리에 최적
- AI 프롬프트에 '입력 폴더 + 출력 크기 + 포맷 + 품질'을 명시하면 정확한 일괄 처리 스크립트 생성
p5.js — 크리에이티브 코딩
코드로 그리는 캔버스, p5.js. 붓 대신 코드 한 줄로 그림을 그리고, 애니메이션을 만들어보세요.
디자이너, 아티스트, 입문 개발자 모두가 쓰는 도구입니다. 코드를 몰라도 10줄이면 움직이는 그림이 나옵니다.
포트폴리오에 살아 움직이는 배경을 넣고 싶을 때, 코딩 교육에서 시각적 결과물을 바로 보여주고 싶을 때.
- p5.js는 CDN 한 줄로 설치하고, setup()과 draw() 두 함수로 시작한다
- draw()는 매 프레임 반복 실행되어 애니메이션과 인터랙션을 자연스럽게 만든다
- mouseX, mouseY, mousePressed() 등으로 사용자 입력에 즉시 반응할 수 있다
- 프롬프트에 장면 묘사, 인터랙션 방식, 시각 효과를 구체적으로 적으면 AI가 완성 코드를 준다
jsPDF — 브라우저에서 PDF 생성
브라우저 안의 프린터, jsPDF. 버튼 하나로 PDF를 뚝딱 만들어 바로 다운로드하세요.
백엔드 서버가 없어도 됩니다. 사용자가 입력한 내용을 즉석에서 PDF로 변환해서 내려받게 할 수 있어요.
거래처에 보낼 견적서를 웹에서 바로 PDF로 뽑고 싶을 때, 수강생에게 수료증을 즉시 발급하고 싶을 때.
- jsPDF는 CDN 한 줄로 설치하고, new jsPDF()로 문서를 만든다
- text(), rect(), line() 등으로 텍스트·도형·선을 원하는 위치에 배치한다
- save()를 호출하면 완성된 PDF가 브라우저에서 바로 다운로드된다
- 프롬프트에 문서 종류, 입력 필드, 레이아웃 구조를 명시하면 AI가 완성 코드를 준다
핵심 용어 모음
Chart.js
웹에서 인터랙티브 차트를 만드는 JS 라이브러리
대시보드
실시간 매출·방문자 수를 bar/line 차트로 시각화
보고서
분기별 실적을 pie 차트로 한눈에 비교
포트폴리오
프로젝트 기술 스택 비율을 도넛 차트로 표현
Three.js
웹 브라우저에서 3D 그래픽을 렌더링하는 라이브러리
WebGL
브라우저에서 GPU를 활용한 3D 렌더링 API
제품 3D 뷰어
신발, 가구, 전자제품을 360도 회전하며 살펴보는 쇼핑몰 페이지
건축 시각화
아파트 내부를 가상으로 걸어 다니는 모델하우스 투어
게임 & 인터랙티브
브라우저에서 바로 플레이하는 3D 미니게임이나 시뮬레이션
Reveal.js
HTML로 프레젠테이션을 만드는 프레임워크
기술 세미나
코드 예시가 많은 개발 발표. 구문 강조 + 라인 하이라이트까지 자동
팀 주간보고
매주 같은 레이아웃에 내용만 바꾸면 되는 반복 발표
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기