TOAST UI Monthly 2021년 2월호
입춘을 지나고 봄이 시작되는 2월이 시작되었습니다. 날씨가 많이 따뜻해졌지만 꽃이 피려면 조금 더 시간이 필요한 것 같습니다. 백신 접종을 시작으로 코로나 사태라는 1년간의 긴 겨울을 벗어나 우리 일상에 다시 따뜻한 봄날이 찾아오길 기대해 봅니다.🙏 그럼 이번달에 TOAST UI에 어떤 업데이트가 있었는지 살펴볼까요?🌝🌝
🚀 Releases
v4.0.3
- CSS 트리쉐이킹 제외를 위한 sideEffects 세팅 변경(#549)
v4.0.4
- 차트 생성 직후 API 호출 시 발생하던 에러 수정(#558)
v4.1.0
기능 추가
RadialBar 차트가 출시되었습니다! 🎉
새로운 타입의 차트인 RadialBar 차트가 출시되었습니다. clockwise, angleRange, radiusRange 등 많은 옵션을 사용할 수 있습니다.
clockwise 옵션
clockwise옵션을 통해 차트가 그려지는 방향을 지정해 줄 수 있습니다.
const chart = new RadialBarChart({el, data, {
series: {
clockwise: false, // default: true
}
}});| clockwise | counter clockwise |
|---|---|
 |
 |
angleRange 옵션
angleRange를 통해 호의 시작과 끝 지점의 각도를 정해줄 수 있습니다.
const chart = new RadialBarChart({el, data, {
series: {
angleRange: {
start: 45,
end: 315
}
}
}});| angleRange | 테마 적용 |
|---|---|
 |
 |
radiusRange 옵션
radiusRange의 inner, outer옵션을 통해 원의 안, 밖 반지름을 지정해 줄 수 있습니다.
const chart = new RadialBarChart({el, data, {
series: {
radiusRange: {
inner: 50,
outer: '90%'
}
}
}});| radiusRange | 테마 적용 |
|---|---|
 |
 |
Guide
addOutlier API (#557)
addOutlier() API를 통해 BoxPlot 차트에 새 outlier data를 추가 할 수 있습니다.
public addOutlier(seriesIndex: number, outliers: number[][])
/* example */
const boxPlotChart = new BoxPlotChart({ el, data, options });
boxPlotChart.addOutlier(1, [[1, 50], [3, 30]]);데이터 visible 옵션
- 사용 가능 차트:
Line,Area,LineArea,Bar,Column,ColumnLine,Bullet,BoxPlot,Scatter,LineScatter,Bubble,Pie,NestedPie,Radar,RadialBar(v4.1.2~)
visible 옵션을 통해 초기 렌더링 시 차트가 나타날지에 대한 여부를 선택할 수 있습니다. 기본 값은 true입니다.
const data = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
series: [
{
name: 'Seoul',
data: [20, 40, 25, 50, 15, 45],
visible: false,
},
],
}버그 수정
- 시리즈가 많아질 경우 렌더링이 되지 않던 버그 수정(#555)
- 시리즈가 많아질 경우 범례 레이아웃 자동으로 조절되도록 수정(#562)
- 차트 컨테이너의 너비와 높이가 지정되지 않은 상태에서
auto옵션을 사용할 경우 높이가 무한으로 늘어나는 버그 수정(#568) - types에 포함된 alias 제거(#561)
- export 메뉴 위치가 제대로 노출되지 않는 버그 수정(#578)
- eventDetectType
grouped옵션을 사용했을 때selectSeries()호출 시 시리즈 정보가 제대로 담기지 않는 버그 수정(#582)
v4.1.1
버그 수정
- 히트맵 시리즈와 카테고리가 일치되지 않는 부분 수정(#586)
v4.1.2
기능 개선
- Radial Bar Data visible 옵션 추가(#588)
버그 수정
v4.1.3
버그 수정
v3.12.0
모노리포 지원
분리되어 있던 모든 리포지토리를 모노리포로 통합하여 관리합니다.
버그 수정
- Direct API 예제 페이지에서 적용되지 않던 필터들 수정 (#388)
- 텍스트 스타일 수정 버튼들 사이의 틈 클릭 시 에러가 발생하는 부분 수정 (#411)
- text changed 이벤트가 발생하지 않던 부분 수정 (#387, #419)
- 크롭 영역을 지정하지 않고 크롭 적용 시 이미지가 사라지던 버그 수정 (#359)
트리 v4.0.6
버그 수정
- select 이벤트 내에서
tree.deselect()가 동작하지 않던 버그 수정 (#78)
👨💻 Next Features
TOAST UI 에디터는 3.0 출시를 목표로 열심히 개발 중이며, 다음과 같은 기능들이 개선되고 강화될 예정입니다.
- ProseMirror로 코어 에디터 모듈을 교체 WYSIWYG의 문서 편집 기능 강화
- 커스텀 신택스를 지원하여 LaTeX 기호와 같은 마크다운이 아닌 문법도 렌더링하고 편집할 수 있도록 제공
- 기본 제공 플러그인 기능 개선
- 디펜던시 제거로 더 가벼운 에디터 제공
더 자세한 내용은 GitHub에 게시된 👉 로드맵 을 통해서 확인해 보세요! 👀
기여를 위한 구체적인 CONTRIBUTING 문서와 날짜 타입 카테고리에 대한 고도화 작업이 이뤄질 예정입니다. 이외에 새로운 종류의 차트 또한 준비 중이니 기대해주세요! 🥳
작업했던 내용들을 볼 수 있고 해당 시점으로 돌아갈 수 있는 히스토리 기능과 캔버스를 확대/축소 할 수 있는 줌 기능이 추가될 예정입니다.
🗞 TOAST UI NEWS
이번 달 Weekly Picks
이번 위클리는 총 4개의 글이 올라왔습니다. ES2021의 새로운 기능들에 대해 설명한 글과 콜백 함수로 설계하지 않은 함수를 콜백으로 사용할 경우의 주의점을 설명하는 글이 작성되었습니다. 또한, 타입 스크립트에서 피해야할 버릇들과 부모 객체에 접근하는 super 키워드에 대해 소개하고 있습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇
- 2020.02.02 간단한 예제로 알아보는 자바스크립트 ES2021 기능
- 2020.02.09 함수를 위해 설계된 경우가 아니라면 함수를 콜백으로 사용하지 마시오
- 2020.02.17 올해 버려야 할 타입스크립트 나쁜 버릇 10가지
- 2020.02.24 슈퍼 빠른 super 속성 접근
사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!