[React] Chart.js 플러그인 사용법
React Chart.js 를 활용한 다양한 차트 구현 - 막대, 선, 산점도, 파이, 레이더 차트 완벽 가이드
Posted 
By
23 min read
[React] Chart.js 플러그인 사용법
#01. Chart.js 소개
Chart.js는 HTML5 Canvas를 기반으로 한 강력한 차트 라이브러리입니다. React Chart.js는 이를 React에서 쉽게 사용할 수 있도록 래핑한 라이브러리입니다.
주요 특징
- 반응형 디자인: 모든 화면 크기에 자동 적응
- 다양한 차트 타입: 막대, 선, 파이, 도넛, 레이더, 산점도 등
- 커스터마이징: 색상, 애니메이션, 툴팁 등 세부 설정 가능
- 성능 최적화: Canvas 기반으로 빠른 렌더링
#02. 플러그인 설치
https://react-chartjs-2.js.org/ 에서 자세한 내용을 확인할 수 있습니다.
Yarn 사용
1
$ yarn add chart.js react-chartjs-2
npm 사용
1
$ npm install chart.js react-chartjs-2
중요:
chart.js와react-chartjs-2두 패키지 모두 설치해야 합니다.
#03. 초기 구성
1. 필요한 모듈 import
Chart.js 3.x부터는 사용할 컴포넌트만 선별적으로 import해야 합니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import React, {memo} from 'react';
import styled from 'styled-components';
import {
// 공통 항목들
Chart,
CategoryScale,
LinearScale,
Title,
Tooltip,
Legend,
// 세로,가로 막대 그래프 전용
BarElement,
// 선 그래프 및 산점도 그래프 전용
PointElement,
LineElement,
// 파이그래프 전용
ArcElement,
// 레이더 차트 전용(선그래프 요소를 포함해야 함)
RadialLinearScale,
Filler
} from 'chart.js';
import { Bar, Line, Scatter, Pie, Radar } from 'react-chartjs-2';
2. Chart.js 컴포넌트 등록
사용할 차트 타입에 따라 필요한 컴포넌트를 등록해야 합니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
Chart.register(
CategoryScale,
LinearScale,
Title,
Tooltip,
Legend,
// 세로,가로 막대 그래프 전용
BarElement,
// 선 그래프 및 산점도 그래프 전용
PointElement,
LineElement,
// 파이그래프 전용
ArcElement,
// 레이더 차트 전용(선그래프 요소를 포함해야 함)
RadialLinearScale,
Filler
);
3. 스타일 컴포넌트 정의
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const ChartExContainer = styled.div`
.chart-container {
display: flex;
flex-wrap: wrap;
gap: 30px; /* 아이템 간 간격 */
box-sizing: border-box;
.chart-wrapper {
flex: 0 1 calc(50% - 15px);
box-sizing: border-box;
margin-bottom: 30px;
h3 {
font-size: 24px;
text-align: center;
margin-bottom: 30px;
}
/* 그래프의 크기를 제어하는 역할 */
.chart-item {
height: 400px;
}
}
}
`;
#04. 막대 그래프 (Bar Chart)
1. 세로 막대 그래프
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<Bar
options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
plugins: {
legend: {
position: 'bottom', // 범주의 위치
}
},
}}
data={{
labels: ['철수', '영희', '민수', '수현', '호영'], // x축
datasets: [{
label: '국어',
data: [98, 88, 92, 63, 100],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '영어',
data: [82, 90, 70, 60, 50],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
borderColor: 'rgba(53, 162, 235, 1)',
borderWidth: 1
}, {
label: '수학',
data: [88, 62, 71, 31, 84],
backgroundColor: 'rgba(258, 234, 153, 0.5)',
borderColor: 'rgba(258, 234, 153, 1)',
borderWidth: 1
}]
}}
/>
2. 가로 막대 그래프
세로 막대 그래프에서 indexAxis: 'y' 옵션만 추가하면 됩니다:
1
2
3
4
5
6
7
8
9
10
11
12
13
<Bar
options={{
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y', // 가로 막대 그래프를 위한 옵션
plugins: {
legend: {
position: 'bottom',
}
},
}}
data={/* 동일한 데이터 */}
/>
#05. 선 그래프 (Line Chart)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Line
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
}
},
}}
data={{
labels: ['06/18', '06/19', '06/20', '06/21', '06/22', '06/23', '06/24'],
datasets: [{
label: '서울시 확진자',
data: [1237, 1108, 719, 2042, 1775, 1580, 1605],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '인천시 확진자',
data: [260, 278, 222, 481, 404, 372, 366],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
borderColor: 'rgba(53, 162, 235, 1)',
borderWidth: 1
}]
}}
/>
#06. 산점도 그래프 (Scatter Chart)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<Scatter
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
}
},
}}
data={{
// X축 --> 기온
labels: [28, 29, 30, 31, 32, 33, 34, 35],
datasets: [{
label: '에어컨 판매량',
data: [300, 321, 335, 400, 381, 480, 560, 545],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
}}
/>
#07. 파이 그래프 (Pie Chart)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<Pie
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'right', // 파이 차트는 오른쪽 범례가 일반적
}
},
}}
data={{
labels: ['컴퓨터활용', '퍼블리싱', '프론트엔드', '백엔드', '데이터베이스'],
datasets: [{
label: '점수',
data: [72, 95, 94, 77, 82],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
],
borderWidth: 1
}]
}}
/>
#08. 레이더 그래프 (Radar Chart)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<Radar
options={{
responsive: true,
maintainAspectRatio: false,
plugins: {
legend: {
position: 'bottom',
}
},
}}
data={{
labels: ['컴퓨터활용', '퍼블리싱', '프론트엔드', '백엔드', '데이터베이스'],
datasets: [{
label: '점수',
data: [72, 95, 94, 77, 82],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}, {
label: '목표수준',
data: [80, 80, 80, 80, 80],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
}}
/>
#09. 완전한 예제 코드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
/**
* Chartjs 2
* - Chartjs2는 기본 Javascript에서 그래프를 표시해 주는 기능을 하는 라이브러리
* - ReactChartjs2라는 Wrapper 라이브러리를 통해 React에서 사용 가능하다.
*
* https://react-chartjs-2.js.org/
*
* yarn add chart.js react-chartjs-2
*/
import React, {memo} from 'react';
import styled from 'styled-components';
import {
// 공통 항목들
Chart,
CategoryScale,
LinearScale,
Title,
Tooltip,
Legend,
// 세로,가로 막대 그래프 전용
BarElement,
// 선 그래프 및 산점도 그래프 전용
PointElement,
LineElement,
// 파이그래프 전용
ArcElement,
// 레이더 차트 전용(선그래프 요소를 포함해야 함)
RadialLinearScale,
Filler
} from 'chart.js';
import { Bar, Line, Scatter, Pie, Radar } from 'react-chartjs-2';
Chart.register(
CategoryScale,
LinearScale,
Title,
Tooltip,
Legend,
// 세로,가로 막대 그래프 전용
BarElement,
// 선 그래프 및 산점도 그래프 전용
PointElement,
LineElement,
// 파이그래프 전용
ArcElement,
// 레이더 차트 전용(선그래프 요소를 포함해야 함)
RadialLinearScale,
Filler
);
const ChartExContainer = styled.div`
.chart-container {
display: flex;
flex-wrap: wrap;
gap: 30px; /* 아이템 간 간격 */
box-sizing: border-box;
.chart-wrapper {
flex: 0 1 calc(50% - 15px);
box-sizing: border-box;
margin-bottom: 30px;
h3 {
font-size: 24px;
text-align: center;
margin-bottom: 30px;
}
/* 그래프의 크기를 제어하는 역할 */
.chart-item {
height: 400px;
}
}
}
`;
const ChartEx = memo(() => {
return (
<ChartExContainer>
<h2>ChartEx</h2>
<div className="chart-container">
{/* 세로 막대 그래프 */}
<div className="chart-wrapper">
<h3>세로 막대 그래프</h3>
<div className="chart-item">
<Bar options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
plugins: {
legend: {
position: 'bottom', // 범주의 위치
}
},
}} data={{
labels: ['철수', '영희', '민수', '수현', '호영'], // x축
datasets: [{
label: '국어',
data: [98, 88, 92, 63, 100],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '영어',
data: [82, 90, 70, 60, 50],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
borderColor: 'rgba(53, 162, 235, 1)',
borderWidth: 1
}, {
label: '수학',
data: [88, 62, 71, 31, 84],
backgroundColor: 'rgba(258, 234, 153, 0.5)',
borderColor: 'rgba(258, 234, 153, 1)',
borderWidth: 1
}]
}} />
</div>
</div>
{/* 가로 막대 그래프 */}
<div className="chart-wrapper">
<h3>가로 막대 그래프</h3>
<div className="chart-item">
<Bar options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
indexAxis: 'y', // 가로 막대 그래프를 위한 옵션
plugins: {
legend: {
position: 'bottom', // 범주의 위치
}
},
}} data={{
labels: ['철수', '영희', '민수', '수현', '호영'], // x축
datasets: [{
label: '국어',
data: [98, 88, 92, 63, 100],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '영어',
data: [82, 90, 70, 60, 50],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
borderColor: 'rgba(53, 162, 235, 1)',
borderWidth: 1
}, {
label: '수학',
data: [88, 62, 71, 31, 84],
backgroundColor: 'rgba(258, 234, 153, 0.5)',
borderColor: 'rgba(258, 234, 153, 1)',
borderWidth: 1
}]
}} />
</div>
</div>
{/* 선 그래프 */}
<div className="chart-wrapper">
<h3>선 그래프</h3>
<div className="chart-item">
<Line options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
plugins: {
legend: {
position: 'bottom', // 범주의 위치
}
},
}} data={{
labels: ['06/18', '06/19', '06/20', '06/21', '06/22', '06/23', '06/24'],
datasets: [{
label: '서울시 확진자',
data: [1237, 1108, 719, 2042, 1775, 1580, 1605],
backgroundColor: 'rgba(255, 99, 132, 0.5)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}, {
label: '인천시 확진자',
data: [260, 278, 222, 481, 404, 372, 366],
backgroundColor: 'rgba(53, 162, 235, 0.5)',
borderColor: 'rgba(53, 162, 235, 1)',
borderWidth: 1
}]
}} />
</div>
</div>
{/* 산점도 그래프 */}
<div className="chart-wrapper">
<div className="chart-item">
<h3>산점도 그래프</h3>
<Scatter options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
plugins: {
legend: {
position: 'bottom', // 범주의 위치
}
},
}} data={{
// X축 --> 기온
labels: [28, 29, 30, 31, 32, 33, 34, 35],
datasets: [{
label: '에어컨 판매량',
data: [300, 321, 335, 400, 381, 480, 560, 545],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
}} />
</div>
</div>
{/* 파이 그래프 */}
<div className="chart-wrapper">
<h3>파이 그래프</h3>
<div className="chart-item">
<Pie options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
plugins: {
legend: {
position: 'right', // 범주의 위치
}
},
}} data={{
labels: ['컴퓨터활용', '퍼블리싱', '프론트엔드', '백엔드', '데이터베이스'],
datasets: [{
label: '점수',
data: [72, 95, 94, 77, 82],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
],
borderWidth: 1
}]
}} />
</div>
</div>
{/* 레이더 그래프 */}
<div className="chart-wrapper">
<h3>레이더 그래프</h3>
<div className="chart-item">
<Radar options={{
responsive: true, // 반응형 기능 사용
maintainAspectRatio: false, // 세로 높이를 스스로 설정 (false인 경우 부모에 맞춤)
plugins: {
legend: {
position: 'bottom', // 범주의 위치
}
},
}} data={{
labels: ['컴퓨터활용', '퍼블리싱', '프론트엔드', '백엔드', '데이터베이스'],
datasets: [{
label: '점수',
data: [72, 95, 94, 77, 82],
backgroundColor: 'rgba(54, 162, 235, 0.2)',
borderColor: 'rgba(54, 162, 235, 1)',
borderWidth: 1
}, {
label: '목표수준',
data: [80, 80, 80, 80, 80],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1
}]
}} />
</div>
</div>
</div>
</ChartExContainer>
);
});
export default ChartEx;
#10. 주요 옵션 설정
1. 공통 옵션
| 옵션 | 타입 | 기본값 | 설명 |
|---|---|---|---|
responsive | boolean | true | 반응형 기능 활성화 |
maintainAspectRatio | boolean | true | 종횡비 유지 (false시 부모 크기에 맞춤) |
aspectRatio | number | 2 | 종횡비 (너비/높이) |
2. 플러그인 옵션
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
plugins: {
title: {
display: true,
text: '차트 제목'
},
legend: {
display: true,
position: 'top', // 'top', 'bottom', 'left', 'right'
labels: {
usePointStyle: true,
font: {
size: 14
}
}
},
tooltip: {
enabled: true,
backgroundColor: 'rgba(0,0,0,0.8)',
titleColor: '#fff',
bodyColor: '#fff'
}
}
3. 스케일 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
scales: {
x: {
display: true,
title: {
display: true,
text: 'X축 제목'
},
grid: {
display: true,
color: 'rgba(0,0,0,0.1)'
}
},
y: {
display: true,
title: {
display: true,
text: 'Y축 제목'
},
beginAtZero: true,
min: 0,
max: 100
}
}
#11. 차트별 특수 옵션
1. 막대 그래프 전용
1
2
3
4
5
6
7
8
9
10
// 가로 막대 그래프
indexAxis: 'y',
// 막대 두께 설정
datasets: [{
barThickness: 20, // 고정 두께
maxBarThickness: 30, // 최대 두께
categoryPercentage: 0.8, // 카테고리별 너비 비율
barPercentage: 0.9 // 막대 너비 비율
}]
2. 선 그래프 전용
1
2
3
4
5
6
7
8
datasets: [{
tension: 0.1, // 곡선 정도 (0: 직선, 1: 매우 곡선)
fill: true, // 영역 채우기
pointRadius: 5, // 점 크기
pointHoverRadius: 8, // 호버 시 점 크기
borderDash: [5, 5], // 점선 패턴
stepped: false // 계단식 선
}]
3. 파이/도넛 차트 전용
1
2
3
4
5
6
7
datasets: [{
cutout: '50%', // 도넛 차트로 만들기 (중앙 구멍 크기)
rotation: -90, // 회전 각도
circumference: 180, // 호 각도 (180도 = 반원)
borderWidth: 2, // 테두리 두께
hoverOffset: 4 // 호버 시 분리 거리
}]
#12. 동적 데이터 업데이트
1. useState를 활용한 데이터 변경
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const [chartData, setChartData] = useState({
labels: ['1월', '2월', '3월', '4월', '5월'],
datasets: [{
label: '매출',
data: [12, 19, 3, 5, 2],
backgroundColor: 'rgba(75, 192, 192, 0.2)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1
}]
});
const updateData = () => {
setChartData(prevData => ({
...prevData,
datasets: [{
...prevData.datasets[0],
data: prevData.datasets[0].data.map(() => Math.floor(Math.random() * 20))
}]
}));
};
2. 실시간 데이터 추가
1
2
3
4
5
6
7
8
9
const addData = (newLabel, newValue) => {
setChartData(prevData => ({
labels: [...prevData.labels, newLabel],
datasets: [{
...prevData.datasets[0],
data: [...prevData.datasets[0].data, newValue]
}]
}));
};
#13. 애니메이션 설정
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
options={{
animation: {
duration: 2000, // 애니메이션 지속시간
easing: 'easeInOutQuart', // 이징 함수
delay: (context) => { // 지연시간
return context.dataIndex * 300;
},
onComplete: () => { // 완료 콜백
console.log('애니메이션 완료!');
}
},
transitions: {
show: {
animations: {
x: {
from: 0
},
y: {
from: 0
}
}
}
}
}}
#14. 이벤트 처리
1
2
3
4
5
6
7
8
9
10
11
options={{
onClick: (event, elements) => {
if (elements.length > 0) {
const element = elements[0];
console.log('클릭된 데이터:', element);
}
},
onHover: (event, elements) => {
event.native.target.style.cursor = elements.length > 0 ? 'pointer' : 'default';
}
}}
#15. 실무 활용 팁
1. 색상 팔레트 정의
1
2
3
4
5
6
7
8
const colorPalette = {
primary: 'rgba(54, 162, 235, 0.8)',
secondary: 'rgba(255, 99, 132, 0.8)',
success: 'rgba(75, 192, 192, 0.8)',
warning: 'rgba(255, 206, 86, 0.8)',
danger: 'rgba(255, 99, 132, 0.8)',
info: 'rgba(54, 162, 235, 0.8)'
};
2. 반응형 차트 만들기
1
2
3
4
5
6
7
8
9
10
11
12
const ChartContainer = styled.div`
position: relative;
height: 400px;
@media (max-width: 768px) {
height: 300px;
}
@media (max-width: 480px) {
height: 250px;
}
`;
3. 차트 데이터 포매팅
1
2
3
4
5
6
7
8
9
10
const formatChartData = (rawData) => ({
labels: rawData.map(item => item.name),
datasets: [{
label: '값',
data: rawData.map(item => item.value),
backgroundColor: rawData.map((_, index) =>
`hsla(${index * 60}, 70%, 60%, 0.8)`
)
}]
});
#16. 주의사항
- 모듈 등록: Chart.js 3.x부터는 사용할 컴포넌트를 반드시 등록해야 합니다.
- 트리 쉐이킹: 필요한 모듈만 import하여 번들 크기를 최적화하세요.
- 메모리 관리: 컴포넌트 언마운트 시 차트 인스턴스가 자동으로 정리됩니다.
- 성능: 대량의 데이터를 다룰 때는
decimation플러그인을 고려하세요. - 접근성: 색상만으로 정보를 구분하지 말고 패턴이나 레이블을 함께 사용하세요.
React Chart.js 2는 강력하고 유연한 차트 라이브러리로, 다양한 데이터 시각화 요구사항을 효과적으로 해결할 수 있습니다. 적절한 차트 타입 선택과 커스터마이징을 통해 사용자에게 직관적이고 아름다운 데이터 경험을 제공할 수 있습니다.
This post is licensed under CC BY 4.0 by the author.