코로나 때문에 미처 봄을 즐기지 못했는데, 벌써 여름이 바로 앞에 다가왔습니다. 생활 속 거리 두기로 전환되었지만, 아직 코로나가 끝나지 않은 만큼 조심하고 안전하게 지내시길 바랍니다. 🙌🙌 이번 달에도 TOAST UI와 함께 즐겁고 행복한 코딩 하세요! 🧑🏻💻
버그 수정
기능 추가
const formattedValue = grid.getFormattedValue("rowKey", "columnName");
resetData
API로 그리드의 데이터 변경 시 정렬, 필터, 페이지네이션 상태를 원하는 상태로 함께 변경할 수 있는 옵션이 추가되었습니다. 특히 서버와의 데이터 연동을 하는 경우 아래에서 설명할 커스텀 이벤트들과 같이 사용하면 유용합니다.
// 특정 페이징 상태 유지
const pageState = { page: 2, totalCount: 20, perPage: 5 };
grid.resetData(data, { pageState });
// 특정 정렬 상태 유지
const sortState = { columnName: "alphabetA", ascending: true };
grid.resetData(data, { sortState });
beforeSort
, afterSort
, beforeUnsort
, afterUnsort
) 추가 (#1046)그리드의 기본 정렬 기능을 사용하지 않고 서버와 통신하여 가져온 데이터를 기준으로 정렬 기능을 사용하고 싶은 경우 위의 이벤트들을 사용할 수 있습니다.
grid.on(`beforeSort`, (ev) => {
axios.get("/get/sorted").then((res) => {
const sortState = {
columnName: ev.columnName,
ascending: ev.ascending,
multiple: ev.multiple,
};
grid.resetData(res.data, { sortState });
});
ev.stop();
});
beforeFilter
, afterFilter
, beforeUnfilter
, afterUnfilter
) 추가 (#1047)그리드의 기본 필터 기능을 사용하지 않고 서버와 통신하여 가져온 데이터를 기준으로 필터 기능을 사용하고 싶은 경우 위의 이벤트들을 사용할 수 있습니다.
grid.on(`beforeFilter`, (ev) => {
axios.get("/get/filtered").then((res) => {
const filterState = {
columnName: ev.columnName,
columnFilterState: ev.columnFilterState,
};
grid.resetData(res.data, { filterState });
});
ev.stop();
});
beforePageMove
, afterPageMove
) 추가.(#1063)페이지 이동 시 특정 데이터, 페이지네이션 상태를 그리드에 적용하고 싶은 경우 위의 이벤트들을 사용할 수 있습니다.
grid.on(`beforePageMove`, (ev) => {
axios.get("/get/data").then((res) => {
const pageState = { page: ev.page, totalCount: res.data.length };
grid.resetData(res.data, { pageState });
});
ev.stop();
});
사용성 개선
버그 수정
tui-grid-cell-current-row
css 추가 (#1000)CellValue
타입 정의에 object
타입 추가 (#1054)사용성 개선
다음 버전에서는 에디터에서 몇 가지 경우에 노출되었던 XSS 취약점을 해결하고 보안을 강화하기 위해 에디터에서 기본적으로 제공하는 HTML 새니타이저 기능이 고도화 될 예정입니다. 또한 셀 병합 테이블 플러그인에서 Toastmark를 사용하여 서버 환경에서도 셀 병합 테이블 데이터를 컨트롤 할 수 있도록 개선됩니다.
TOAST UI Chart 4.0 버전의 개발이 열심히 진행되고 있습니다. 🔥 기존에 제공되던 옵션들뿐만 아니라 새로운 기능들이 추가되고 있고 좀 더 직관적으로 사용할 수 있게 개선되고 있습니다. 또한, 여러 가지 테마를 커스터마이징 할 수 있게 개발되고 있습니다. 조금만 더 기다려주세요!
컬럼 내에서 동일한 값을 가지고 있는지 검증해줄 수 있는 unique
validation 옵션이 추가될 예정입니다. 또한 검증 결과에 대한 메세지 처리를 간편하게 할 수 있도록, custom validation 함수의 사용성이 개선될 예정입니다.
이번 달은 한 개의 오리지널글과 두 개의 번역 글이 올라왔습니다. 오리지널 글로는 라이트하우스 6.0에서 새롭게 추가된 성능 지표를 알기 쉽게 풀이한 글이 작성되었습니다. 또한, Gatsby를 기반으로 현재의 정적 사이트가 할 수 있는 일에 대해 정리한 글부터, 웹 어셈블리 메모리 사용량을 증가시키는 개발 내용에 대해 소개하는 글이 번역되었습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇
사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!