TOAST UI Monthly 2021년 9월호
올 9월은 민족의 명절 한가위🌕와 함께 눈 깜짝할 새 지나가버렸네요. 맛있는 음식 많이 드시고, 가까이 혹은 멀리 있는 가족분들과 안전하게 좋은 시간을 보내셨길 바랍니다.
FE개발팀도 연휴를 만끽하고 왔지만, 연휴 외에는 TOAST UI 개발도 열심히 진행하며 한 달을 보냈습니다. 이번 달은 어떤 일이 있었는지 살펴보시죠 🙂
🚀 Releases
v3.1.0
기능 추가
- 에디터에 자동 포커싱 활성화 방지를 위한
autofocus옵션이 추가되었습니다.(#1772)
const editor = new Editor({
el: document.querySelector('#editor'),
autofocus: false,
// ...
});옵션의 기본값은 true이며, 자동으로 에디터에 포커스가 활성화됩니다.
버그 수정
- 테이블 내에 잘못된 HTML이 있을 경우 컨버팅 시 데이터가 사라지는 현상 수정.(#1780)
- 노드의 속성 값이 빈 문자열일 경우 적용되지 않는 현상 수정.(#1781)
$$문자 삽입 시 에러나는 현상 수정.(#1791)- 리스트에 중첩된 블록 노드들이 있을 경우 컨버팅이 실패하는 현상 수정.(#1792)
v4.4.0
Bar계열 시리즈에 colorByCategories 옵션이 추가되었습니다. 👏👏
series 가 아닌 categories 에 따라 Bar의 색을 바꿔줍니다.
const data = {
categories: ['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
series: [
{
name: 'Budget',
data: [5000, 3000, 5000, 7000, 6000, 4000, 1000],
colorByCategories: true
}
]
}
이 옵션은 LineColumn 차트에도 적용할 수 있습니다.
const data = {
categories: ['Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
series: {
column: [
{
name: 'Seoul',
data: [11.3, 17.0, 21.0, 24.4, 25.2, 20.4, 13.9],
colorByCategories: true,
},
],
line: [
{
name: 'Average',
data: [11, 15.1, 17.8, 19.7, 19.5, 16.5, 12.3],
},
],
},
}
v4.19.0
기능 추가
Excel/CSV export 기능이 추가되었습니다! 🎉
많은 분들이 기다리시던 Excel/CSV export 기능이 추가되었습니다.
export API와 includeHeader, includeHiddenColumns, columnNames 등의 옵션을 사용해 원하는 데이터를 내보낼 수 있습니다.
const options = {
includeHiddenColumns: true,
onlySelected: true,
fileName: 'myExport',
};
// export(format: 'csv' | 'xlsx', exportOpt?: ExportOpt)
grid.export('csv');
grid.export('xlsx');
grid.export('xlsx', options);| 프로퍼티 | 타입 | 기본값 | 설명 |
|---|---|---|---|
includeHeader |
boolean |
true |
파일을 내보낼 때 헤더 포함 여부를 결정합니다. CSV export의 경우 복합 컬럼을 사용 중이면 옵션 값과 상관없이 헤더를 내보내지 않습니다. |
includeHiddenColumns |
boolean |
false |
내보내는 파일의 숨겨진 컬럼의 포함 여부를 결정합니다. |
columnNames |
string[] |
[...보이는 모든 컬럼명] |
내보내려는 컬럼을 선택할 수 있습니다. 배열에 요소가 1개 이상 전달되면 includeHiddenColumns 옵션 값과 상관없이 전달 받은 컬럼을 내보냅니다. |
onlySelected |
boolean |
false |
선택한 영역의 데이터만 내보낼지 여부를 결정합니다. 값이 참이면 includeHiddenColumns 옵션과 columnNames 옵션의 값과 상관 없이 현재 선택한 영역만 내보냅니다.선택 영역이 없다면 옵션 값과 상관 없이 지정한 컬럼의 데이터 또는 숨겨진 컬럼을 포함한 모든 컬럼의 데이터 또는 보이는 컬럼의 데이터를 내보냅니다. |
onlyFiltered |
boolean |
true |
필터링된 데이터만 내보낼지 여부를 결정합니다. |
delimiter |
','\|';'\|'\t'\|'\|' |
',' |
CSV 내보내기 시 구분자를 정의합니다. |
fileName |
string |
'grid-export' |
내보낼 파일의 이름을 정의합니다. |
컨텍스트 메뉴
기본 컨텍스트 메뉴에 export와 하위의 CSV Export, Excel Export 메뉴가 추가되었습니다.
이 두 메뉴는 옵션들의 기본값을 사용해 내보내기를 수행합니다.
커스텀 컨텍스트 메뉴 설정을 통해 원하는 옵션을 이용한 내보내기 메뉴를 추가할 수 있습니다.
const grid = new tui.Grid({
// ...
contextMenu: ({ rowKey, columnName }) => (
[
[
{
name: 'export',
label: 'Export',
subMenu: [
{
name: 'includeHeader',
label: 'includeHeader: false',
subMenu: [
{
name: 'csvExport',
label: 'CSV export',
action: () => {
grid.export('csv', { includeHeader: false });
}
},
{
name: 'excelExport',
label: 'Excel export',
action: () => {
grid.export('xlsx', { includeHeader: false });
}
},
]
},
{
name: 'onlySelected',
label: 'onlySelected: true',
subMenu: [
{
name: 'csvExport',
label: 'CSV export',
action: () => {
grid.export('csv', { onlySelected: true });
}
},
{
name: 'excelExport',
label: 'Excel export',
action: () => {
grid.export('xlsx', { onlySelected: true });
}
},
]
},
],
}
],
]
),
//...
});
커스텀 이벤트
내보내기 전, 후에 발생하는 커스텀 이벤트 beforeExport와 afterExport 가 추가되었습니다.
커스텀 이벤트를 사용하면 기본 내보내기 동작을 취소하고 서버에서 데이터를 추가해서 내보내는 등의 작업을 수행할 수 있습니다.
grid.on('beforeExport', ev => {
console.log(ev);
// ev.exportFormat - Export format (csv or xlsx)
// ev.exportOptions - Used export options
// ev.data - Data to be finally exported (string[][])
// ev.exportFn - Export function by data
});
grid.on('afterExport', ev => {
console.log(ev);
// ev.exportFormat - Export format (csv or xlsx)
// ev.exportOptions - Used export options
// ev.data - Data to be finally exported (string[][])
});Excel 내보내기 TOAST UI Grid의 export 기능은 SheetJS(v.0.17.1)을 사용하므로 이를 사용하려면 SheetJS를 추가해야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.1/xlsx.full.min.js"></script>Excel/CSV export 기능의 더 자세한 내용은 💾 내보내기 가이드 문서를 확인해 주세요.
v4.19.1
버그 수정
- 잘못된 외부 의존성 모듈(SheetJS)명 수정 (#1467)
TimePicker v4.3.1
버그 수정
- SpinBox 타입의 TimePicker 사용 시 오전/오후 라디오 버튼이 클릭되지 않는 문제 수정 (#90)
- 모바일 장치에서 Today 버튼 터치 시 아래 요소가 같이 클릭되는 문제 해결 (#91)
🗞 TOAST UI NEWS
이번 달 Weekly Picks
이번 달은 WeakMap 을 알아보는 오리지널 글과 함께, V8 엔진의 성능 최적화를 다루는 글, 자바스크립트 외의 리소스를 번들링할 때 알아두면 도움이 되는 글을 다루었습니다.
- 2021.09.01 WeakMap이 알고 싶다
- 2021.09.09 자바스크립트 성능의 비밀 (V8과 히든 클래스)
- 2021.09.14 자바스크립트가 아닌 리소스 번들링 하기
그 외 소식
또한 지난 7월에 배포되었던 Chromium이 발표한 RenderingNG란 무엇인가? 글을 영문으로 번역하여 배포하기도 했습니다.
사용 문의, 기능 추가/수정 요청 및 버그 신고는 GitHub 저장소의 이슈 게시판을 이용해주세요.