잠잠해지는 줄 알았던 코로나 19가 다시 전국적으로 대유행을 하고 있습니다😢. 얼른 사태가 진정되길 바라며 모두 건강하게 코딩하시길 TOAST UI가 기원하겠습니다.🙏 그럼 이제 이번 달에 TOAST UI에 어떤 업데이트가 있었는지 살펴볼까요?
사용성 개선
차트가 생성 시 발생하는 애니메이션의 길이를 조절할 수 있는 옵션이 추가되었습니다. 좀 더 천천히 나타내고 싶거나 애니메이션 없이 차트를 그리고 싶으실 때 이 옵션을 사용하세요!
const options = {
series: {
animation: false
}
}
// 혹은
const options = {
series: {
animation: {
duration: 0 // number
}
}
}
var chart = new LineChart({ ..., options });
또한 setData
메서드를 사용할 때에도 애니메이션의 길이를 조절하고 싶다면 매개변수로 duration 설정을 넘겨보세요.
chart.setData(rawData, false); // 애니메이션 끄기
chart.setData(rawData, { duration: 1000 }); // duration 1000
destroy
메서드 추가 (#246)명시적으로 차트 인스턴스를 제거하는 메서드를 추가했습니다. 일일이 이벤트를 해제하거나 DOM을 직접 제거해줘야 하는 불편함을 줄일 수 있습니다.
var chart = new LineChart({ ... });
chart.destroy();
툴팁 위에서 마우스 이벤트가 감지되지 않아 부자연스러웠던 부분을 개선했습니다. 또한 툴팁 애니메이션의 시간을 줄이고 마우스를 감지하는 영역은 넓혀 좀 더 자연스럽게 툴팁이 나타나도록 수정되었습니다.
버그 수정
rotateLabel
요소가 false
일 때 Y축이 움직이는 현상 수정 (#245)기능 추가
그리드의 스크롤 위치 기반으로 다음 페이지의 데이터를 동적으로 가져올 수 있는 무한 스크롤 기능이 추가 되었습니다. (#909)
const grid = new Grid({
data,
columns,
// bodyHeight 옵션은 필수
bodyHeight: 300,
pageOptions: {
// 클라이언트 무한 스크롤 사용 시 반드시 true로 설정
useClient: true,
// 스크롤 시 추가될 데이터의 건수
perPage: 50,
type: "scroll",
},
});
dataSource
를 이용한 무한 스크롤: 데이터소스와 무한 스크롤 기능을 연동하여 동작합니다.const grid = new Grid({
data,
columns,
// bodyHeight 옵션은 필수
bodyHeight: 300,
pageOptions: {
// 스크롤 시 추가될 데이터의 건수
perPage: 50,
type: "scroll",
},
});
scrollEnd
커스텀 이벤트를 이용한 무한 스크롤: 위의 두가지 방법 적용이 어려운 경우, 그리드의 scrollEnd
커스텀 이벤트를 이용하여 직접 무한 스크롤 기능을 구현할 수 있습니다.
const grid = new Grid({
data,
columns,
// bodyHeight 옵션은 필수
bodyHeight: 300,
});
// `scrollEnd`를 이용하여 직접 서버와 통신하여 데이터를 추가
grid.on("scrollEnd", () => {
axios.get("/api/readData").then((response) => {
grid.appendRows(response.data);
});
});
사용성 개선
validatorFn
함수 옵션에 로우 정보와 컬럼명 인자가 추가되었습니다. 로우의 다른 셀과 데이터를 비교하여 검증하고 싶은 경우 유용하게 사용할 수 있습니다. (#911)사용성 개선
버그 수정
버그 수정
month
, week
관련 초기화 옵션이 적용되지 않는 버그 수정🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃🏃
TOAST UI Editor는 이번달에도 2.0을 위해서 (진땀나게) 열심히 달려나가고 있습니다. 현재는 에디터의 사용성 개선을 위해 마크다운 파서를 개발하고 jQuery 디펜던시 제거하는 작업을 진행 중입니다.
3월 공개를 위해 조금만 더 기다려 주세요! 😉
커스텀 마크다운 파서로 교체
번들 사이즈 최적화
모노리포 적용
에디팅 레이어
select
, checkbox
, radio
의 편집 창이 레이어 형태의 디자인으로 변경됩니다. UI와 사용성 모두 개선될 것이고, select
나 checkbox
의 항목이 길어지는 경우 잘리는 현상도 없어질 예정입니다.누락된 타입 정의 파일 추가
index.d.ts
에 무한 스크롤 관련 누락된 타입과 리액트 랩퍼의 타입 정의 파일을 추가할 예정입니다.객체 복사 붙여넣기 기능 추가
ctrl + c
, ctrl + v
로 복사하여 붙여넣는 기능을 추가하여 사용성이 더욱 좋아질 예정입니다.기타 개선 및 버그 수정
includeUI
옵션을 사용한 인스턴스에서 destroy
api 사용시 깨끗이 초기화가 되지 않는 버그 및 addShape
api 사용시 에러메세지 표시 등등 많은 버그들이 수정될 예정입니다.캘린더 v2.0을 가열차게 개발하고 있습니다.(머리가 가열 중이에요) 말도 많고 탈도 많았던 타임존 문제를 잡으려고 @toast-ui/date 라이브러리도 새로 하나 개발했습니다. 서버 사이드 렌더링도 지원될 예정입니다. 기대해 주세요!
사용하는 모든 기술 스택은 위클리 픽에 작성되어 있습니다.
이번 달은 3개의 번역 글이 올라왔습니다. 리액트 어플리케이션 구조를 아토믹하게 작성했을 때 장단점을 소개하는 글과 자바스크립트의 기본 개념 및 V8 엔진의 메모리 구조를 소개하는 번역글이 작성되었습니다! 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇
TOAST UI Editor가 2018년 2월 5,000별을 달성한 뒤 2년만에 10,000별을 달성했습니다.🥳 기념으로 에디터 만별🌟떡을 제작해서 기술본부 식구들과 함께 기쁨을 나눴습니다.(너무 귀엽게 생겼죠?) 에디터가 지금까지 발전할 수 있도록 많은 도움을 주신 NHN 사우님들, 전 세계에 있는 컨트리뷰터 분들 모두에게 감사드립니다. 특히 TOAST UI Editor의 영원한 동반자 우주 최강 협업 도구 Dooray 개발팀에게도 무한 감사를 드립니다. (지금 이 글도 Dooray에 있는 TOAST UI Editor로 작성 중이라는 사실, 아시나요? 대세 Dooray! 더 더 흥해라!)
여기서 TOAST UI Editor 메인테이너분들의 한마디를 안 들어 볼 수 없겠죠?
프로젝트를 시작했던 첫 메인테이너로써 감회가 새롭습니다. 눙물이..., 그동안 많은 분의 노력으로 별 100개에서 10,000개가 되었네요. 수고 많으셨습니다! 그리고 많은 피드백을 주셨던 NHN 사우 여러분께도 감사드립니다!
처음 깃헙 스타 천 개가 넘었을 때 박수 치며 좋아하던 기억이 아직도 생생한데, 벌써 만 개라니 믿기지가 않네요. 정말 많은 분들의 노력과 관심으로 여기까지 올 수 있었다고 생각하고, 진심으로 감사드립니다. 이제 얼마 남지 않은 2.0 업데이트를 시작으로, 마크다운과 위지윅을 완벽하게 통합하는 그날까지 꾸준히 발전하는 모습 기대해 주시기 바랍니다!
제가 에디터를 만난 지도 어언 6개월이라는 시간이 흘렀습니다. 에디터는 '오픈소스 맛집 FE 개발랩' 타이틀을 알린 시작점이었습니다. 깃헙 스타는 단순한 인기 척도를 넘어서 오픈 소스를 향한애정과 관심이라고 생각합니다. 세계 각국에서 보내준 별들이 모여 10,000이라는 뜻깊은 숫자를 달성하게 되었습니다. 에디터를 함께 만들어온 메인테이너, 컨트리뷰터, 그리고 에디터를 지지해 준 모든 개발자에게 감사의 마음을 전합니다. 🙏🙆♀️❤️ (feat. 너는 에디터 메인테이너여서 참 좋겠다~~~)
개발자가 되어 처음으로 참여한 프로젝트가 이렇게 많은 별을 받게 되니 기분이 매우 좋네요. ㅎㅎ TOAST UI Editor를 애용해주시는 사우 여러분 모두에게 감사 인사를 드립니다.
다시 한번 많은 분들의 관심 감사드리며 3월에 만날 2.0 버전도 많은 기대 부탁드립니다!
사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!