TOAST UI Monthly 2020년 5월호

코로나 때문에 미처 봄을 즐기지 못했는데, 벌써 여름이 바로 앞에 다가왔습니다. 생활 속 거리 두기로 전환되었지만, 아직 코로나가 끝나지 않은 만큼 조심하고 안전하게 지내시길 바랍니다. 🙌🙌 이번 달에도 TOAST UI와 함께 즐겁고 행복한 코딩 하세요! 🧑🏻‍💻

🚀 Releases

v2.1.1 ~ v2.1.2

버그 수정

• 위지윅 : 에디터의 부모 컨테이너 엘리먼트가 리스트(li)일 때 리스트가 사라짐 (#972)
• 위지윅 : 테이블에 다른 테이블을 복사해서 붙여넣기 했을 때 스크립트 에러가 발생함 (#980)

v4.11.0 ~ v4.13.0

기능 추가

• 포맷팅 된 셀의 값을 얻어올 수 있는 getFormattedValue API 추가 (#1013)

const formattedValue = grid.getFormattedValue("rowKey", "columnName");

• resetData API 옵션 추가 (#1046, #1047, #1063)

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();
});

사용성 개선

• 데이터 정렬 기능 성능 개선(#1037)

버그 수정

• 트리셀이 편집되지 않는 현상 수정 (#995)
• setColumnValues API 호출시 스크립트 에러 발생 현상 수정 (#997)
• 누락된 tui-grid-cell-current-row css 추가 (#1000)
• translate 속성 적용시 에디팅 레이어 위치가 잘못 계산되는 현상 수정 (#1010)
• hidden 컬럼에 대해 setValue API가 적용되지 않는 현상 수정 (#1011)
• 동적으로 추가된 컬럼에 대해 써머리 계산이 올바르게 되지 않는 현상 수정 (#1027)
• vertical border 테마 적용 안되는 현상 수정 (#1029)
• 빈 로우 추가시 트리 셀 편집내용이 적용 안되는 현상 수정 (#1034)
• removeCheckedRows API 호출시 스크립트 에러 발생 현상 수정 (#1052)
• CellValue 타입 정의에 object 타입 추가 (#1054)

DatePicker v4.1.0

사용성 개선

• 타입 정의 파일 추가(#60, #62)

👨‍💻 Next Features

다음 버전에서는 에디터에서 몇 가지 경우에 노출되었던 XSS 취약점을 해결하고 보안을 강화하기 위해 에디터에서 기본적으로 제공하는 HTML 새니타이저 기능이 고도화 될 예정입니다. 또한 셀 병합 테이블 플러그인에서 Toastmark를 사용하여 서버 환경에서도 셀 병합 테이블 데이터를 컨트롤 할 수 있도록 개선됩니다.

TOAST UI Chart 4.0 버전의 개발이 열심히 진행되고 있습니다. 🔥 기존에 제공되던 옵션들뿐만 아니라 새로운 기능들이 추가되고 있고 좀 더 직관적으로 사용할 수 있게 개선되고 있습니다. 또한, 여러 가지 테마를 커스터마이징 할 수 있게 개발되고 있습니다. 조금만 더 기다려주세요!

컬럼 내에서 동일한 값을 가지고 있는지 검증해줄 수 있는 unique validation 옵션이 추가될 예정입니다. 또한 검증 결과에 대한 메세지 처리를 간편하게 할 수 있도록, custom validation 함수의 사용성이 개선될 예정입니다.

🗞 TOAST UI NEWS

이번 달 Weekly Picks

이번 달은 한 개의 오리지널글과 두 개의 번역 글이 올라왔습니다. 오리지널 글로는 라이트하우스 6.0에서 새롭게 추가된 성능 지표를 알기 쉽게 풀이한 글이 작성되었습니다. 또한, Gatsby를 기반으로 현재의 정적 사이트가 할 수 있는 일에 대해 정리한 글부터, 웹 어셈블리 메모리 사용량을 증가시키는 개발 내용에 대해 소개하는 글이 번역되었습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇

• 2020.05.08 정적인 미래 (A Static Future) #256
• 2020.05.22 WebAssembly에서 메모리 최대 4GB 까지 사용하기 #258
• 2020.05.28 라이트하우스 6.0에서 바뀐 성능 지표변화 #259

사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!