TOAST UI

Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts

TOAST UI Monthly 2020년 2월호

잠잠해지는 줄 알았던 코로나 19가 다시 전국적으로 대유행을 하고 있습니다😢. 얼른 사태가 진정되길 바라며 모두 건강하게 코딩하시길 TOAST UI가 기원하겠습니다.🙏 그럼 이제 이번 달에 TOAST UI에 어떤 업데이트가 있었는지 살펴볼까요?

🚀 Releases

v3.10.0

사용성 개선

  • 차트 애니메이션 길이 조절 옵션 추가 (#203)

차트가 생성 시 발생하는 애니메이션의 길이를 조절할 수 있는 옵션이 추가되었습니다. 좀 더 천천히 나타내고 싶거나 애니메이션 없이 차트를 그리고 싶으실 때 이 옵션을 사용하세요!

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();
  • tooltip 개선 (#252)

툴팁 위에서 마우스 이벤트가 감지되지 않아 부자연스러웠던 부분을 개선했습니다. 또한 툴팁 애니메이션의 시간을 줄이고 마우스를 감지하는 영역은 넓혀 좀 더 자연스럽게 툴팁이 나타나도록 수정되었습니다.

버그 수정

  • rotateLabel 요소가 false일 때 Y축이 움직이는 현상 수정 (#245)

v4.10.0

기능 추가

  • 그리드의 스크롤 위치 기반으로 다음 페이지의 데이터를 동적으로 가져올 수 있는 무한 스크롤 기능이 추가 되었습니다. (#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)
  • 마우스 오버시에 불필요한 셀의 리렌더링 발생 현상을 개선하였습니다. (#913)

v3.8.0

사용성 개선

  • 슬라이더 UI의 INPUT 박스에 직접 숫자를 입력하거나, 위 아래 키 버튼을 사용하여 정교하게 값을 변경할 수 있게 개선되었습니다. (#183)
  • 슬라이더 UI의 drag 동작을 통해 값을 변경할 때 모든 상태가 UNDO 히스토리에 반영되어 사용성이 떨어지는 문제를 개선하여, 드래그하는 동안에는 undoStack에 반영되지 않도록 개선하였습니다. (#310)
  • 이제 비율을 지정하여 자르기 영역을 설정 한 후 크기를 조정할 때, 비율이 유지되며 크기가 조정됩니다. (#124)

버그 수정

  • 자르기 영역 이동시 'objectMoved'이벤트 리스너가 잘못된 포지션 정보를 리턴하던 버그 수정 (#269)
  • 되돌리기(UNDO), 되살리기(REDO) 기능이 오동작하는 문제 수정 (#315, #307)

v1.12.11

버그 수정

  • month, week 관련 초기화 옵션이 적용되지 않는 버그 수정
  • 주말이 없는 월간뷰에서 일정 생성 팝업 포지션 버그 수정 (#480)

👨‍💻 Next Features

🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍🏃‍

TOAST UI Editor는 이번달에도 2.0을 위해서 (진땀나게) 열심히 달려나가고 있습니다. 현재는 에디터의 사용성 개선을 위해 마크다운 파서를 개발하고 jQuery 디펜던시 제거하는 작업을 진행 중입니다.

3월 공개를 위해 조금만 더 기다려 주세요! 😉

커스텀 마크다운 파서로 교체

  • 2.0에서 가장 중요한 변화로, commonmark.js 모듈을 커스텀하여 자체 제작한 마크다운 파서를 사용하게 됩니다. 기존에 사용하던 파서를 대체하여 스크롤 싱크 이슈를 해결하고 부분 렌더링으로 프리뷰 성능이 개선되는 효과를 얻을 수 있습니다.

번들 사이즈 최적화

  • jQuery 의존성이 제거되고 과거 불필요하게 포함되던 익스텐션 및 언어 관련 모듈들이 분리되어 보다 가벼운 용량의 TOAST UI Editor를 사용할 수 있습니다.

모노리포 적용

  • TOAST UI Editor와 관련된 랩퍼(Vue, React) 및 라이브러리(Squire, to-mark) 모듈의 이슈를 공통된 하나의 리포에서 쉽게 확인하고 관리할 수 있습니다.

에디팅 레이어

  • select, checkbox, radio의 편집 창이 레이어 형태의 디자인으로 변경됩니다. UI와 사용성 모두 개선될 것이고, select나 checkbox의 항목이 길어지는 경우 잘리는 현상도 없어질 예정입니다.

누락된 타입 정의 파일 추가

  • index.d.ts에 무한 스크롤 관련 누락된 타입과 리액트 랩퍼의 타입 정의 파일을 추가할 예정입니다.

객체 복사 붙여넣기 기능 추가

  • 캔버스 위에 꾸며진 도형, 아이콘, 텍스트 등의 객체를 ctrl + c, ctrl + v 로 복사하여 붙여넣는 기능을 추가하여 사용성이 더욱 좋아질 예정입니다.

기타 개선 및 버그 수정

  • 객체 회전 이벤트 리스너가 추가될 예정이며, includeUI 옵션을 사용한 인스턴스에서 destroy api 사용시 깨끗이 초기화가 되지 않는 버그 및 addShape api 사용시 에러메세지 표시 등등 많은 버그들이 수정될 예정입니다.

캘린더 v2.0을 가열차게 개발하고 있습니다.(머리가 가열 중이에요) 말도 많고 탈도 많았던 타임존 문제를 잡으려고 @toast-ui/date 라이브러리도 새로 하나 개발했습니다. 서버 사이드 렌더링도 지원될 예정입니다. 기대해 주세요!

사용하는 모든 기술 스택은 위클리 픽에 작성되어 있습니다.

🗞 TOAST UI NEWS

이번 달 Weekly Picks

이번 달은 3개의 번역 글이 올라왔습니다. 리액트 어플리케이션 구조를 아토믹하게 작성했을 때 장단점을 소개하는 글과 자바스크립트의 기본 개념 및 V8 엔진의 메모리 구조를 소개하는 번역글이 작성되었습니다! 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇

그 외 소식

monthly1

🎉🎉TOAST UI Editor 별 10K 달성!🎉🎉

TOAST UI Editor가 2018년 2월 5,000별을 달성한 뒤 2년만에 10,000별을 달성했습니다.🥳 기념으로 에디터 만별🌟떡을 제작해서 기술본부 식구들과 함께 기쁨을 나눴습니다.(너무 귀엽게 생겼죠?) 에디터가 지금까지 발전할 수 있도록 많은 도움을 주신 NHN 사우님들, 전 세계에 있는 컨트리뷰터 분들 모두에게 감사드립니다. 특히 TOAST UI Editor의 영원한 동반자 우주 최강 협업 도구 Dooray 개발팀에게도 무한 감사를 드립니다. (지금 이 글도 Dooray에 있는 TOAST UI Editor로 작성 중이라는 사실, 아시나요? 대세 Dooray! 더 더 흥해라!)

monthly2

여기서 TOAST UI Editor 메인테이너분들의 한마디를 안 들어 볼 수 없겠죠?

김성호(@shiren)

프로젝트를 시작했던 첫 메인테이너로써 감회가 새롭습니다. 눙물이..., 그동안 많은 분의 노력으로 별 100개에서 10,000개가 되었네요. 수고 많으셨습니다! 그리고 많은 피드백을 주셨던 NHN 사우 여러분께도 감사드립니다!

김동우(@dongwoo-kim)

처음 깃헙 스타 천 개가 넘었을 때 박수 치며 좋아하던 기억이 아직도 생생한데, 벌써 만 개라니 믿기지가 않네요. 정말 많은 분들의 노력과 관심으로 여기까지 올 수 있었다고 생각하고, 진심으로 감사드립니다. 이제 얼마 남지 않은 2.0 업데이트를 시작으로, 마크다운과 위지윅을 완벽하게 통합하는 그날까지 꾸준히 발전하는 모습 기대해 주시기 바랍니다!

류선임(@seonim-ryu)

제가 에디터를 만난 지도 어언 6개월이라는 시간이 흘렀습니다. 에디터는 '오픈소스 맛집 FE 개발랩' 타이틀을 알린 시작점이었습니다. 깃헙 스타는 단순한 인기 척도를 넘어서 오픈 소스를 향한애정과 관심이라고 생각합니다. 세계 각국에서 보내준 별들이 모여 10,000이라는 뜻깊은 숫자를 달성하게 되었습니다. 에디터를 함께 만들어온 메인테이너, 컨트리뷰터, 그리고 에디터를 지지해 준 모든 개발자에게 감사의 마음을 전합니다. 🙏🙆‍♀️❤️ (feat. 너는 에디터 메인테이너여서 참 좋겠다~~~)

박정환(@junghwan-park)

개발자가 되어 처음으로 참여한 프로젝트가 이렇게 많은 별을 받게 되니 기분이 매우 좋네요. ㅎㅎ TOAST UI Editor를 애용해주시는 사우 여러분 모두에게 감사 인사를 드립니다.

다시 한번 많은 분들의 관심 감사드리며 3월에 만날 2.0 버전도 많은 기대 부탁드립니다!

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

#monthly
#toastui
한정2020.02.28
Back to list
Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts
© NHN Cloud Corp.