스크립트
00:00:00TanStack이 이번에는 TanStack Charts를 통해 JavaScript의 차트 문제를 해결하며 또 한 번 해냈습니다.
00:00:04ReCharts 같은 라이브러리보다 더 작은 번들 크기를 약속하며, SVG 및
00:00:08캔버스 출력, 애니메이션, 툴팁, 상호작용을 지원합니다. 대부분의 TanStack 라이브러리가 그렇듯
00:00:13프레임워크 독립적인 코어, 타입 안정성, 뛰어난 개발자 경험을 제공하죠. 그리고 이렇게 새로움에도 불구하고
00:00:18기본적인 선 그래프나 막대 그래프부터
00:00:22상키 다이어그램, 트리맵, 히트맵, 레이더 차트 같은 더 복잡한 차트까지 이미 다양한 종류의 차트를 빌드할 수 있습니다.
00:00:27도넛 차트, 게이지, 심지어 멋진 세계 지도까지 만들 수 있죠. 아마 필요한 웬만한 것은
00:00:32이미 다 만들 수 있을 겁니다. 자, 가장 먼저 살펴보고 싶은 것은 TanStack Charts가 실제로 차트에 접근하는 방식입니다.
00:00:41R의 ggplot2 같은 라이브러리와 비슷한 방식으로 '그래픽 문법(grammar of graphics)'을 사용하기 때문이죠. 이
00:00:47방식은 차트를 고정된 유형으로 다루지 않고, 대신 마크와
00:00:51스케일, 매핑의 조합으로 다룹니다. 따라서 막대 차트를 요청하는 대신 여기에 막대를 놓고,
00:00:56이 변수를 x에, 저 변수를 y에 매핑하고, 이러한 스케일을 적용하라고 지정하면 그러한 설명으로부터
00:01:01차트가 나타납니다. 아주 미세한 차이지만, 이 라이브러리를 극도로 유연하게 만들어 주는 요소 중 하나죠.
00:01:05트위터에서 이런 차트를 만들 수 있냐고 물어본 사람이 있었는데, 대답은 '그렇다'였습니다.
00:01:11이건 내장된 차트 유형이 아니라 라이브러리가 충분히 유연해서 만들 수 있는 것입니다.
00:01:14작동 방식을 살펴보자면, 영어 알파벳의 빈도를 매핑하는 이 막대 차트 데모를 보면
00:01:18가장 중요한 코드가 고작 20줄밖에 되지 않습니다. define chart 함수를 사용한 차트 정의로 시작하며
00:01:23이 안에서 마크로 시작합니다. 마크는 실제로 그려지는 요소, 즉 선, 점, 막대라고 생각하면 됩니다.
00:01:28저는 실제로 TanStack Charts에서 사용할 수 있는 모든 마크를 사용해 보려고 데모 사이트를 만들었는데, 대략 55개 정도가 있는 것 같습니다.
00:01:32따라서 TanStack Charts로 빌드할 수 있는 차트의 꽤 좋은 예시가 될 텐데,
00:01:37정말 종류가 많습니다. 여기서 저를 따라와 주셔야 하는데요,
00:01:40가로든 세로든 원하는 일반적인 막대 차트가 있고,
00:01:43선과 영역 같은 것들도 마찬가지입니다. 그리고 점 차트도 있고,
00:01:47차트를 가로지르는 점선인 규칙(rule)도 있으며, 세로 방향으로도 지정할 수 있습니다.
00:01:51틱 차트(x 또는 y)를 만들 수 있고, 직사각형, 셀, 밴드,
00:01:54화살표, 벡터가 있어 바람장을 만들 수도 있고, 링킹, 육각형,
00:01:59텍스트가 있어서 차트 내 원하는 곳에 텍스트를 렌더링할 수도 있습니다. 프레임,
00:02:04선, 차이(difference), 선형 회귀 차트, 상자 그림, 바이올린,
00:02:08차트, 와플 차트도 있습니다. 이미 등고선 지도도 만들 수 있죠. 참고로
00:02:13이 라이브러리가 나온 지 일주일밖에 안 됐는데 말도 안 되게 기능이 많고, 목록은 아직도 끝이 없습니다.
00:02:17도대체 무엇에 쓰는 물건인지 모를 이런 차트도 만들 수 있죠.
00:02:22트리맵 차트, 선버스트 차트, 상키 다이어그램, 십자선 포커스,
00:02:25가이드, 파이 차트나 도넛, 레이더 같은 방사형 차트가 있으며,
00:02:29마지막으로 세계 지도 차트를 원한다면 geoshape도 있습니다. 말씀드렸듯이 이 중 아주 많은 것들을 조합하여
00:02:33필요한 거의 모든 차트를 만들 수 있습니다. 다시 막대 차트 데모로 돌아가서,
00:02:38필요한 유일한 마크는 bar y이며, 이 안에 데이터를 전달합니다.
00:02:42이 객체 배열 말이죠. 그 후에 어떤 것이 x 키가 되고 어떤 것이 y
00:02:47키가 될지 정의합니다. 데이터를 특정 구조에 맞출 필요가 없기 때문에 아주 훌륭하며,
00:02:51여기서 간단히 정의할 수 있습니다. 타입 안정성도 지원하므로 이 키 중 하나를 잘못 입력하면,
00:02:56즉시 알려줍니다. 이것이 바로 우리가 TanStack에서 사랑하게 된 타입 안정성입니다.
00:03:00원하는 마크를 정의한 후에는 x축과 y축을 설정합니다. x축의 경우.
00:03:04매우 간단합니다. 범주형 데이터를 위한 space band를 지정하여 알파벳들이
00:03:08균등하게 간격이 벌어지도록 했고, 그 사이에 패딩도 좀 주었습니다. y축의 경우 숫자를 위한.
00:03:12scale linear를 사용하고 있으며, nice 설정도 true로 했습니다. 이는 가지고 있는 가장 높은 값에서 멈추는 대신.
00:03:17축을 합리적인 숫자로 반올림한다는 뜻입니다. 이걸 false로 설정하면.
00:03:21여기 축의 상단이 가장 높은 막대의 상단에서 끝나는 것을 볼 수 있습니다. 그리고 여기서는.
00:03:26축에 레이블과 포맷도 지정하여 이 숫자들을 소수점 대신 백분율로 포맷할 수 있게 했습니다.
00:03:30이러한 모든 정의는 프레임워크 독립적인 부분이지만, React에서 이를 실제로
00:03:34렌더링하려면 차트 컴포넌트를 가져와서 정의를 전달하고.
00:03:39높이와 레이블을 지정하기만 하면 됩니다. 차트를 만드는 데 필요한 것은 이게 전부입니다. 하지만 정말 분명히 하고 싶은 점은
00:03:43여기서 막대 차트를 사용한 것이 아니라는 사실입니다. 코드에서 마크를 렌더링하고 싶은 곳을 정의했을 뿐이고.
00:03:47최종 결과가 우연히 막대 차트가 된 것입니다. 아주 미세한
00:03:51차이지만, 이것이 바로 그래픽 문법을 사용하는 이유입니다. 유연성의 예시로.
00:03:55막대 차트에 평균선을 넣고 싶다면, 마크 배열에 들어가서 새로운 마크를 추가하기만 하면 됩니다.
00:04:00이번에는 rule Y를 쓰는 거죠. 또 다른 빠른 예시로 점과 아래쪽 영역이 있는 선 그래프를 원한다고 해봅시다.
00:04:04그것들 전부를 마크로 정의하기만 하면 됩니다. 보시다시피 구독자 수 그래프가 완성되었네요.
00:04:09구독을 누르고 이런 AI 및 개발자 소식을 최신으로 받아보라고 말씀드리기 딱 좋은 타이밍입니다.
00:04:14앞서 보여드렸던 그 다양한 차트들을 빌드하기 위해 이러한 마크를 사용하는 더 많은 예시를 보고 싶다면
00:04:18문서를 확인해 보세요. 예시가 엄청나게 많고 엄청나게 상세합니다.
00:04:22사실 TanStack Charts가 정확히 무엇을 할 수 있는지 보여드리기 위해 문서에서 몇 가지 예시를 더 가져왔습니다.
00:04:26모든 기능을 심층적으로 다룰 시간은 없거든요. 말 그대로 20시간 정도 걸릴 테니까요. 가장 멋진 기능 중 하나는 이 지구본
00:04:30차트인데, 정말 마음에 듭니다. 일주일 된 라이브러리에서 이런 걸 할 수 있다는 게 엄청나게 멋진 것 같아요.
00:04:34그리고 상호작용 기능도 정말 멋집니다. 여기 브러시가 있어서 플롯을 드래그하여.
00:04:38양쪽에서 범위를 변경할 수 있죠. 차트 확대 기능도 있어서 이 선 그래프를 깔끔하게 확대할 수 있습니다.
00:04:42키 선택 및 키보드 선택 기능도 지원하여, 이 중 하나에 마우스를 올리고 스페이스바를 누르면.
00:04:46모든 것이 매끄럽게 작동하며, 아래쪽에 선택한 값의 결과가 읽히는 것을 볼 수 있습니다.
00:04:51십자선(crosshair)도 있어서, 이동함에 따라 아래쪽 축에 마우스를 올린 실제.
00:04:56날짜가 출력되는 것을 볼 수 있습니다. 설정이 풍부한 툴팁도 제공되므로.
00:05:00현재 이 설정은 nearest X로 되어 있어 어떤 포인트를 고를지 결정할 때 수평 거리만 계산됩니다.
00:05:04group X 같은 전략을 선택할 수도 있어서, 이 영역 어디에든 마우스를 올리면 그 모든.
00:05:09값들을 보여줍니다. 툴팁 고정 기능도 있어서, 여기 막대 차트에 마우스를 올리면.
00:05:14툴팁이 바뀌는 것을 볼 수 있지만, 하나를 클릭하면 툴팁이 고정되고.
00:05:18추가적인 세부 정보도 함께 표시됩니다. 여기서는 툴팁이 없지만.
00:05:22바로 아래에서 해당 값들을 읽어오고 있어 정보를 추출할 수 있으며, 여기서는.
00:05:26사용자 정의 툴팁을 렌더링하고 있습니다. 따라서 고정하려고 클릭하면 커스텀 닫기 버튼이 나타나고, 이 모든 것이.
00:05:31React로 구현되어 있습니다. 이 라이브러리는 애니메이션 기능도 지원하므로, 이 막대들의 값을 변경하면.
00:05:35변경된 값들 사이로 부드럽게 애니메이션이 적용되는 것을 볼 수 있습니다.
00:05:39여기서 다시 재생(replay)을 클릭하면 막대 차트가 시차를 두고 나타나는(staggered entrance) 효과를 줄 수 있으며.
00:05:43여기 아래쪽 막대 몇 개를 제거해 보면 막대가 추가되거나 제거될 때 부드럽게 애니메이션이 작동하는 것을 볼 수 있습니다.
00:05:48스트리밍 애니메이션도 가능해서, 새로운 데이터가 들어올 때.
00:05:51선이나 막대를 다시 그리지 않고 단순히 이동시킵니다. 그리고 이 차트들이 어떻게.
00:05:55스타일링되는지 넘어가기 전에 보여드리고 싶었던 마지막 기능은 내보내기 기능입니다. SVG 및 PNG로 다운로드하기 위한.
00:06:00버튼들이 있는 것을 볼 수 있으며, 이를 클릭하면 얻을 수 있는 최종 결과물이 바로 이것입니다.
00:06:03자, 이제 이 차트들을 테마를 지정하고 스타일링하는 방법에 대해 이야기해 봅시다. 이 차트에서 스타일을 제거하면.
00:06:07이것이 기본 기본(base) 외형이기 때문입니다. 기본적으로 스타일이 없고, 단순히.
00:06:12전경색으로 current color를 사용하며 배경은 투명합니다. TanStack Charts의 스타일링에는 세 가지 수준이 있으며.
00:06:16첫 번째는 CSS 변수입니다. 이것들은 6개의 커스텀 속성에서 오는 범주형 색상이며.
00:06:21원하는 컨테이너에서 이를 재정의할 수 있습니다. 따라서 여기 있는 값들을 변경하면.
00:06:25이 차트가 모든 색상을 어떻게 업데이트하는지 볼 수 있습니다. 두 번째 수준은 실제 차트 정의에 있는.
00:06:30테마 블록입니다. 이는 데이터보다는 차트 가구(furniture)라고 불리는 요소들을 위한 것으로, 텍스트, 격자선, 배경.
00:06:35등이 여기에 해당합니다. 그리고 세 번째 수준은 마크 자체에 적용됩니다. 따라서 채우기,.
00:06:39스트로크, 불투명도, 선 끝 모양, 대시, 모서리 반경, 폰트 등을 설정할 수 있습니다.
00:06:43이것들은 고정된 값일 수도 있고 데이터 기반일 수도 있어서, 특정 목표치를 넘었는지에 따라 막대 색상을 지정할 수 있습니다.
00:06:47데이터를 사용하여 그라데이션을 빌드할 수도 있죠. 말씀드렸듯이 이 라이브러리는 엄청나게 유연하며 매우 가볍습니다.
00:06:51십자선, 브러싱, 확대/축소, 선택 기능 등을 모두 포함한 전체 벤치마크 스위트에서.
00:06:57번들 크기가 36~43 킬로바이트 사이입니다. Chart.js나.
00:07:01Recharts와 비교해 보면, Chart.js는 45~58 킬로바이트이고.
00:07:06Recharts는 153~168 킬로바이트입니다. 따라서 TanStack Charts가.
00:07:10상당히 더 작습니다. 이에 대한 철학 또한 또 다른 멋진 부분입니다. 그들은 실제로.
00:07:16두 가지 목표를 위해 이것을 만들었습니다. 첫째, 사람들은 짧은 선언으로 세련된 차트를 얻어야 하고.
00:07:24둘째, AI가 애플리케이션 전용 시리즈 모델을 학습하지 않고도 차트를 작성, 검사, 수정할 수 있어야 한다는 것입니다.
00:07:28그래서 에이전트가 문서를 읽지 않고도 차트를 작성할 수 있도록 이 API를 설계했습니다.
00:07:32솔직히 저도 앞서 진행한 대부분의 데모를 Claude를 사용해 작성했는데, 요즘에는 보기 드물게.
00:07:38제가 예상했던 모든 것과 대부분 일치했습니다. 변경해야 할 부분이 거의 없었죠.
00:07:42신규 라이브러리치고는 꽤 놀라운 일입니다. 이것이 바로 TanStack Charts입니다. 제.
00:07:47새로운 최애 차트 라이브러리이며 빠르게 발전하고 있습니다. 아래 댓글로 여러분의 생각을 알려주세요.
00:07:52김에 구독도 해주시고요. 늘 그렇듯 다음 영상에서 뵙겠습니다.
00:07:57새로운 최애 차트 라이브러리이며 빠르게 발전하고 있습니다. 아래 댓글로 여러분의 생각을 알려주세요
00:08:01김에 구독도 해주시고요. 늘 그렇듯 다음 영상에서 뵙겠습니다.