03장 사용 라이브러리 소개

3.1 데이터 시각화 라이브러리 소개 3.1.1 Chart.js 1. 특징 2. Chart.js는 언제 사용하는 게 좋을까?3.1.2 D3.js 1. 특징 2. D3.js는 언제 사용하는 게 좋을까?3.1.3 Leaflet 1. 특징 2. Leaflet은 언제 사용하는 게 좋을까?3.1.4 Canvas 1. 특징 2. Canvas는 언제 사용하는 게 좋을까?3.2 프로젝트 폴더 구조

3.1 데이터 시각화 라이브러리 소개

웹 프론트엔드 개발에서 데이터 시각화를 구현하기 위해 다양한 라이브러리들이 사용된다. 이 장에서는 데이터 시각화 라이브러리인 Chart.js, D3.js, Leaflet, Canvas에 대해 살펴본다. 각 라이브러리의 특징과 사용 사례를 통해 어떤 상황에서 어떤 라이브러리를 선택해야 하는지 이해할 수 있다.

3.1.1 Chart.js

Chart.js는 HTML5 Canvas 요소를 사용하여 아름답고 반응형인 차트를 쉽게 만들 수 있는 오픈 소스 JavaScript 라이브러리이다. 표준화된 차트를 쉽고 간단하게 생성할 수 있도록 설계되어 있다. 아래 링크는 Chart.js의 공식 문서이다.

Chart.js

Simple yet flexible JavaScript charting library for the modern web

https://www.chartjs.org/

1. 특징

Chart.js는 선, 막대, 파이, 도넛, 레이더, 극좌표, 산점도, 거품 차트 등 8가지 기본 차트를 지원한다. 이러한 차트들은 모두 쉽게 커스터마이징할 수 있어 다양한 데이터 시각화 요구에 맞게 적용할 수 있다. 또한, 기본적으로 반응형 디자인을 지원하여 데스크톱, 태블릿, 모바일 등 다양한 디바이스와 화면 크기에서도 최적화된 차트를 제공한다. 이를 통해 일관된 사용자 경험을 보장한다.

또한 설정이 간편하여 사용자가 빠르게 차트를 생성할 수 있다는 장점이 있다. 기본적인 차트를 구현하는 데 필요한 코드는 간단하며, 차트의 속성도 쉽게 조정할 수 있다. 더불어, 데이터의 변화를 부드럽게 시각적으로 표현할 수 있는 애니메이션 기능과 사용자가 차트를 클릭하거나 마우스를 올릴 때 반응하는 인터랙션 기능도 지원하여 차트 사용성을 더욱 높여준다.

Chart.js는 모듈식 아키텍처를 채택하고 있어 필요한 기능만 선택적으로 사용할 수 있다. 이를 통해 파일 크기를 줄여 성능을 최적화할 수 있으며, 프로젝트의 요구 사항에 맞춰 유연하게 사용할 수 있는 것이 큰 장점이다.

2. Chart.js는 언제 사용하는 게 좋을까?

첫째, 대시보드에서 기본적인 차트를 쉽게 만들 수 있기 때문에 데이터를 시각적으로 표현하는 데 효과적이다. 다양한 차트를 간편하게 구현할 수 있어 대시보드 구성 시 자주 활용된다.

둘째, Chart.js는 설정이 간단하여 빠르게 차트를 생성할 수 있고 데이터 시각화의 초기 단계나 빠른 프로토타이핑에 매우 유용하다.

마지막으로, Chart.js는 기본적으로 반응형 디자인을 지원하므로 모바일 환경에서도 최적화된 차트를 제공할 수 있어 모바일 친화적인 차트를 만들 때 적합하다.

3.1.2 D3.js

D3.js(Data-Driven Documents)는 데이터를 시각화하기 위한 무료 오픈소스 JavaScript 라이브러리로, 웹 표준을 기반으로 한다. 저수준 접근 방식을 통해 동적이고 데이터 중심의 그래픽을 그리는데 도움을 준다.

전통적인 의미의 차팅 라이브러리가 아니며, ‘차트’라는 개념이 존재하지 않는다. 대신, D3.js는 데이터를 시각화할 때 다양한 기본 요소를 구성하여 사용자가 원하는 형태의 시각화를 만들 수 있게 한다. 이는 D3.js가 매우 유연하고 맞춤형 시각화를 만드는 데 적합하다는 것을 의미한다.

D3.js의 저수준 제어 방식은 사용자가 시각화의 모든 부분을 세밀하게 제어할 있지만, 기본적인 차트를 생성하는 데도 상당한 양의 코드가 필요할 수 있다. 복잡한 시각화나 대규모 데이터셋을 다룰 때는 성능 최적화에도 주의를 기울여야 한다. 아래 링크는 공식 문서이다.

The JavaScript library for bespoke data visualization

https://d3js.org/

1. 특징

D3.js는 웹 표준 기술인 SVG, Canvas, HTML을 사용하여 시각화를 구현하는 라이브러리로 이를 통해 다양한 브라우저와 디바이스에서 일관된 시각화를 제공한다. 또한, D3.js는 데이터를 기반으로 DOM 요소를 생성하고 조작할 수 있는 강력한 기능을 제공하여 데이터가 변경될 때마다 동적으로 업데이트되는 시각화를 구현할 수 있다.

D3.js의 또 다른 강점은 전환과 애니메이션 기능으로, 데이터를 부드럽게 변화시키며 사용자와의 상호작용을 더욱 풍부하게 만들어준다. 트리, 패킹, 포스 레이아웃 등 다양한 내장 레이아웃과 알고리즘을 제공하여, 복잡한 데이터 구조도 효율적으로 시각화할 수 있는 도구를 갖추고 있다.

2. D3.js는 언제 사용하는 게 좋을까?

D3.js는 복잡한 시각화와 다양한 상호작용을 요구하는 프로젝트에 매우 적합하다.

첫째, D3.js는 복잡한 데이터 구조와 사용자 상호작용을 요구하는 시각화에 유리하며, 데이터를 시각적으로 변형하거나 사용자가 그래프와 상호작용하면서 실시간으로 데이터를 변경하는 경우에 사용한다. 예를 들어, 금융 데이터의 실시간 변화를 보여주거나, 사용자 입력에 따라 그래프가 동적으로 변하는 대시보드에서 자주 사용된다.

둘째, 맞춤형 차트 및 그래프를 제작할 때 이상적이다. 다른 차트 라이브러리에서는 제공하지 않는 독특한 디자인의 차트나 그래프를 구현할 수 있으며, 데이터 특성에 맞춰 새로운 형태의 차트를 제작하거나 특정 색상, 레이아웃, 애니메이션을 적용하여 브랜드나 제품에 맞는 고유한 시각화를 구현할 수 있다.

셋째, 지리적 좌표를 기반으로 데이터를 시각화할 수 있어 인구 밀도, 기후 변화, 전염병 확산 경로 등을 지도 위에 시각적으로 표현하는 작업에 자주 사용된다. 지도 기반 시각화를 통해 데이터의 공간적 분포와 변화를 사용자에게 명확히 전달할 수 있다. D3.js는 GeoJSON 및 TopoJSON을 지원하여, 다양한 형태의 지도를 그리거나 데이터를 직관적으로 보여줄 수 있는 기능도 제공한다.

이처럼 D3.js는 높은 수준의 커스터마이징과 복잡한 데이터 구조에 대한 세밀한 제어가 필요한 프로젝트에서 강점을 발휘하며, 복잡한 데이터를 명확하게 시각화할 수 있는 도구로서 널리 활용되고 있다.

3.1.3 Leaflet

Leaflet는 모바일 친화적인 디자인과 가벼운 파일 크기 덕분에 많은 개발자들에게 인기를 끌고 있다. 다양한 플러그인을 통해 기능을 확장할 수 있어 복잡한 요구사항도 쉽게 충족시킬 수 있다. 또한, 다양한 오픈 소스 및 상용 지도 타일 API와 호환되어 유연하게 사용할 수 있어 맞춤형 지도를 구현하는 데 큰 장점을 제공한다. 이러한 특성 덕분에 웹 및 모바일 환경에서 빠르고 유연한 지도 솔루션을 필요로 하는 개발자들에게 널리 사용되고 있다. 아래 링크는 공식 문서이다.

Leaflet — an open-source JavaScript library for interactive maps

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps.

https://leafletjs.com/

1. 특징

첫째, 가볍고 빠르다. Leaflet은 파일 크기가 작고 성능이 뛰어나기 때문에 로딩 시간과 리소스 사용을 최소화할 수 있으며 웹 및 모바일 환경에서 매우 빠르게 동작한다.

둘째, 반응형 디자인을 제공한다. Leaflet은 다양한 디바이스와 화면 크기에 최적화된 지도를 지원하여 데스크톱, 태블릿, 모바일 등 모든 환경에서 일관된 사용자 경험을 제공한다.

셋째, 플러그인 지원이 강력하다. 수많은 플러그인을 통해 기본 기능을 확장할 수 있어 다양한 요구에 맞춘 맞춤형 지도를 쉽게 구현할 수 있다.

넷째, 쉬운 사용성을 자랑한다. Leaflet은 간단하고 직관적인 API를 제공해 개발자가 인터랙티브한 지도를 쉽게 만들고 조작할 수 있다.

마지막으로, 광범위한 브라우저 지원을 제공하며, 최신 브라우저뿐만 아니라 오래된 브라우저에서도 원활하게 동작해 다양한 환경에서 호환성이 뛰어나다.

2. Leaflet은 언제 사용하는 게 좋을까?

첫째, 인터랙티브 지도를 구현할 때 적합하다. Leaflet은 사용자가 줌 인/아웃, 패닝, 클릭 등의 상호작용을 통해 지도를 탐색할 수 있는 기능을 제공하여 지리적 데이터를 효과적으로 시각화하고 사용자 경험을 크게 향상할 수 있다.

둘째, 모바일 애플리케이션에서 사용하기에 최적화되어 있다. 가벼운 파일 크기와 반응형 디자인을 갖추고 있어 모바일 기기에서도 원활하게 작동하며 지도 표시를 빠르게 처리할 수 있다.

셋째, 맞춤형 지도 솔루션을 구현하는 데 유용하다. 다양한 플러그인과 API를 활용하여 특정 요구에 맞춘 커스터마이징이 가능하다. 예를 들어, 커스터마이징된 마커를 통해 간단한 데이터 시각화를 구현할 수 있으며 타일 API뿐만 아니라 GeoJSON, CSV 등 다양한 데이터를 통해 지도를 표현할 수 있다.

이러한 유연성 덕분에 Leaflet운 복잡한 지리적 데이터 처리와 맞춤형 솔루션을 요구하는 프로젝트에 적합한 도구로 사용된다.

3.1.4 Canvas

Canvas는 HTML5의 주요 요소 중 하나로 그래픽을 그릴 수 있는 동적인 영역을 제공한다. 이를 통해 웹에서 2D 그래픽을 쉽게 렌더링하고 동적으로 업데이트할 수 있는 그래픽을 생성할 수 있는데 다양한 도구를 활용해 픽셀 단위로 그래픽을 처리할 수 있어 사용자와 데이터 간 상호작용 가능한 콘텐츠를 제작하는 데 적합하다. 아래 링크는 공식 문서이다.

Canvas API - Web API | MDN

Canvas API는 JavaScript와 HTML <canvas> 엘리먼트를 통해 그래픽을 그리기위한 수단을 제공합니다. 무엇보다도 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용됩니다.

https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

1. 특징

첫째, 동적인 그래픽 생성이 가능하다. Canvas는 JavaScript를 통해 실시간으로 그래픽을 생성하고 업데이트할 수 있는데, 이를 통해 다양한 애니메이션, 게임, 차트 등을 구현할 수 있다.

둘째, 픽셀 단위의 제어가 가능하다. Canvas는 각 픽셀을 개별적으로 제어할 수 있다. 따라서 복잡하고 정밀한 그래픽 작업을 수행할 수 있다.

셋째, 2D 및 3D를 지원한다. 기본적으로 2D 그래픽을 위한 API를 제공하지만 WebGL을 사용하면 3D 그래픽 작업도 가능하다.

넷째, 대부분의 최신 웹 브라우저와 호환된다. 대부분의 브라우저에서 Canvas를 지원하여 크로스 브라우징 문제가 거의 없다.

다섯째, Canvas는 CPU 기반 그래픽 처리를 지원하며 빠른 렌더링 성능을 제공한다. 이를 통해 실시간으로 많은 데이터를 처리할 수 있다.

2. Canvas는 언제 사용하는 게 좋을까?

첫째, Canvas는 데이터 시각화를 위한 차트나 그래프를 그릴 때 유용하다. Chart.js와 같은 라이브러리도 내부적으로 Canvas를 활용하여 데이터를 시각화하고 있으며 이는 실시간으로 데이터가 변동되는 경우에도 유연하게 처리할 수 있다.

둘째, Canvas는 이미지 데이터를 개별 픽셀 단위로 제어할 수 있기 때문에 이미지 처리 작업에도 활용된다. 필터 적용, 이미지 변형 등 다양한 그래픽 처리를 빠르게 수행할 수 있다.

셋째, SVG와 달리 Canvas는 매우 복잡한 그래픽 작업을 빠르게 처리할 수 있다. 예를 들어, 대규모 데이터 셋을 기반으로 그래프나 지도를 그릴 때 성능 최적화에 유리하다.

3.2 프로젝트 폴더 구조


📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📂spread
 ┃ ┃ ┣ 📜FileExport.jsx
 ┃ ┃ ┣ 📜FileInput.jsx
 ┃ ┃ ┗ 📜XlsxSheet.jsx
 ┃ ┗ 📜Lnb.jsx
 ┣ 📂hooks
 ┃ ┣ 📜useBinding.js
 ┃ ┣ 📜useGeoLocation.js
 ┃ ┣ 📜useMap.js
 ┃ ┣ 📜useMapEvent.js
 ┃ ┣ 📜useMarker.js
 ┃ ┣ 📜usePopup.js
 ┃ ┗ 📜useVectorMap.js
 ┣ 📂pages
 ┃ ┣ 📂canvas
 ┃ ┃ ┣ 📂01_FillRect
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂02_BeginPath
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂03_Triangle
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂04_Sin
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂05_SunriseSunset
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂chartjs
 ┃ ┃ ┣ 📂01_AreaChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂02_BarChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂03_BubbleChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂04_DoughnutChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂05_LineChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂06_MBTI
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂07_MixedChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂08_Olympic
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂09_PieChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂10_PolarAreaChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂11_RadarChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂12_ScatterChart
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂Dashboard
 ┃ ┃ ┃ ┣ 📜ExpenseHeatmap.jsx
 ┃ ┃ ┃ ┣ 📜data.js
 ┃ ┃ ┃ ┣ 📜index.jsx
 ┃ ┃ ┃ ┗ 📜style.css
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂d3js
 ┃ ┃ ┣ 📂01_svg1
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂02_svg2
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂03_svg3
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂04_selection
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂05_axis
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂06_scale
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂07_color
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂08_transition
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂09_line_shape
 ┃ ┃ ┃ ┣ 📜data.js
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂10_bar_shape
 ┃ ┃ ┃ ┣ 📜data.js
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂11_area_shape
 ┃ ┃ ┃ ┣ 📜data.js
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂12_pie_shape
 ┃ ┃ ┃ ┣ 📜data.js
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂13_actual_ex
 ┃ ┃ ┃ ┣ 📜data.js
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┣ 📂leafletjs
 ┃ ┃ ┣ 📂01
 ┃ ┃ ┃ ┣ 📂01
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂02
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂03
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂02
 ┃ ┃ ┃ ┣ 📂01
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂02
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂03
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂03
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂04
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📂map
 ┃ ┃ ┃ ┃ ┣ 📜Button.jsx
 ┃ ┃ ┃ ┃ ┣ 📜CustomMarker.jsx
 ┃ ┃ ┃ ┃ ┣ 📜DefaultMarker.jsx
 ┃ ┃ ┃ ┃ ┣ 📜IconInput.jsx
 ┃ ┃ ┃ ┃ ┣ 📜MapContainer.jsx
 ┃ ┃ ┃ ┃ ┣ 📜Popup.jsx
 ┃ ┃ ┃ ┃ ┣ 📜PopupMarker.jsx
 ┃ ┃ ┃ ┃ ┣ 📜StyleInput.jsx
 ┃ ┃ ┃ ┃ ┣ 📜TileLayer.jsx
 ┃ ┃ ┃ ┃ ┗ 📜VectorLayer.jsx
 ┃ ┃ ┃ ┗ 📂spread
 ┃ ┃ ┃ ┃ ┣ 📜FileExport.jsx
 ┃ ┃ ┃ ┃ ┣ 📜FileInput.jsx
 ┃ ┃ ┃ ┃ ┗ 📜XlsxSheet.jsx
 ┃ ┃ ┣ 📂hooks
 ┃ ┃ ┃ ┣ 📜useBinding.js
 ┃ ┃ ┃ ┣ 📜useGeoLocation.js
 ┃ ┃ ┃ ┣ 📜useMap.js
 ┃ ┃ ┃ ┣ 📜useMapEvent.js
 ┃ ┃ ┃ ┣ 📜useMarker.js
 ┃ ┃ ┃ ┣ 📜usePopup.js
 ┃ ┃ ┃ ┗ 📜useVectorMap.js
 ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┗ 📜index.jsx
 ┃ ┗ 📂map
 ┃ ┃ ┣ 📂01_svg_map
 ┃ ┃ ┃ ┣ 📂01_map_container
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂02_tile_layer
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂03_custom_hooks
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂02_svg_marker
 ┃ ┃ ┃ ┣ 📂01_marker
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂02_popup_tooltip
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂03_custom_marker
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┣ 📂03_svg_vector
 ┃ ┃ ┃ ┣ 📂01_vector
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📂02
 ┃ ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┃ ┣ 📜[id].jsx
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┃ ┃ ┗ 📂04_map_with_csv
 ┃ ┃ ┃ ┗ 📜index.jsx
 ┣ 📂styles
 ┃ ┗ 📜map.css
 ┣ 📂utils
 ┃ ┗ 📜getRoutes.js
 ┣ 📜App.css
 ┣ 📜App.jsx
 ┣ 📜Router.jsx
 ┣ 📜index.css
 ┗ 📜main.jsx