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년 1월호

해피뉴이어!🙌 새해 복 많이 받으세요! 올해부터 매달 TOAST UI Monthly를 배포합니다. 한 달간 있었던 TOAST UI 업데이트와 FE개발랩의 활동을 한 눈에 확인할 수 있습니다. 궁금한 점이나 요청하고 싶은 기능이 있나요? 주저하지 말고 알려주세요. 문은 항상 열려있습니다! 그럼 시작해볼까요~?

🚀 Releases

v4.9.0

기능 추가

  • Datasource 옵션 확장 및 ajax 개선 (#862)

DataSource의 ajax 확장 옵션과 초기 파라미터를 전송하는 옵션이 추가되었습니다. 또한 request body가 존재하는 요청인 경우 content-type: application/json 타입이 추가 지원되며, RESTful URI 를 정식 지원합니다. 요청 데이터를 사용자가 원하는 포맷으로 직렬화할 수 있도록 serializer 옵션이 추가되었고, 이외에도 다양한 옵션들을 확장하여 편리한 서버 통신을 할 수 있습니다. 더 편리해진 DataSource를 만나보세요!

let applicationId = "id";

// ...
const dataSource = {
  api: {
    readData: {
      url: "/readData",
      method: "get",
      initParams: { a: 1 },
    },
    createDta: {
      url: "/createData",
      method: "post",
      contentType: "application/json",
    },
    deleteData: {
      url: () => `/deleteData/${applicationId}`,
      method: "delete",
    },
  },
  // 커스텀 serializer 정의
  serializer: (params) => {
    return QS.stringify(params);
  },
};

const gridOptions = {
  data: dataSource,
  columns,
};
const grid = new Grid(gridOptions);

사용성 개선

  • onGridUpdated life cycle 이벤트 추가 (#867)

새로운 커스텀 이벤트가 추가되었습니다. 🎉 onGridUpdated 이벤트는 그리드의 전체 데이터를 새로운 데이터로 교체하여 렌더링하는 경우에 발생합니다. 렌더링이 모두 완료된 후에 발생하기 때문에 DOM에 접근하고 싶은 경우 해당 이벤트를 정의하여 원하는 동작을 수행할 수 있습니다.

const gridOptions = {
  data,
  columns,
  // Grid 렌더링이 완료된 뒤의 이벤트 정의
  onGridUpdated: (ev) => {
    // write your code
  },
};
const grid = new Grid(gridOptions);
  • clearModifiedData API 추가 (#878)

modified 데이터를 초기화하는 clearModifiedData API가 추가되었습니다 (해당 데이터는 렌더링에 영향을 주지 않으며 수정된 사항을 내부적으로 관리하는 데이터입니다). 서버에 요청하여 적용된 데이터를 초기화하는 경우에 유용하게 사용할 수 있습니다!

// 모든 modified data 초기화
grid.clearModifiedData();

// 특정 modified data 초기화
grid.clearModifiedData("CREATE");
grid.clearModifiedData("UPDATE");
grid.clearModifiedData("DELETE");

버그 수정

  • focus API 호출 시 스크롤이 자동 이동되도록 기본 동작 수정 (#874)

v3.7.3

사용성 개선

  • node.js stable 버전으로 npm 프로젝트 설치가 원활하게 되지 않던 문제를 해결했습니다. 의존 모듈인 fabric.js를 설치하는 방식을 dependencies에 직접 기입하는 방식으로 변경하여 fabric.js가 보다 안정적으로 설치되도록 개선하였습니다!

버그 수정

  • fabric.js의 메이저 버전이 올라가면서 발생했던 주요 버그들 수정 (#297, #221)
  • cropzone 영역의 크기를 설정하거나 가져올때 발생했던 전반적인 버그 수정 (#237, #114, #118)

v1.12.10

버그 수정

  • 두 개 이상의 타임존을 사용할 때, 두 타임존 차이가 1시간 미만 차이가 나면 주간뷰 시간대가 잘못 표시되는 현상 해결 (#488)
  • 캘린더 isReadOnly=true옵션 사용 시(읽기 전용인 경우) 주간뷰에서 일정 종료 시간을 조절할 수 있는 아이콘을 표시하지 않도록 수정 (#470)
  • setOptions()API 사용시 template, timezones, calendar 프로퍼티에 대해 변경 옵션이 적용되지 않는 현상 해결 (#487)

🎊Tree v4.0.0 메이저 업데이트🎊

jQuery가 완전히 제거된 Tree 4.0 버전이 출시되었습니다! Tree 4.0에는 몇 가지 큰 변경사항들이 존재하는데요. 함께 살펴보도록 하겠습니다.

주요 변경사항

  • jQuery 의존이 모두 사라졌습니다! 좀 더 가벼워진 Tree를 만나실 수 있습니다. (#54)🚀🚀
  • Ajax feature 옵션과 이벤트 객체의 프로퍼티가 변경되었습니다. 변경 사항은 이 링크를 참고해주세요!
  • 인스턴스 생성 시 id, jQueryObject를 container로 지정할 수 없게 되었습니다. 변경사항은 이 링크를 참고해주세요!
  • 마이그레이션 가이드 v4.0.0 Migration Guide를 참고해주세요.
  • Bower를 통한 설치를 지원하지 않습니다. 설치는 CDN과 npm, 직접 다운로드로만 가능합니다.

버그 수정

  • Data와 URL을 함수로 지정했을 때 새로 갱신되지 않는 문제 수정 (#39, Thanks to @VasylRishko)

CodeSnippet Ajax Module 추가 (v2.3.0)

XMLHttpRequest기반의 경량화된 Ajax Module가 추가되었습니다. (#44)

  • Promise를 지원하는 브라우저의 경우 Promise를 반환합니다.
  • beforeRequest, success, error, complete 콜백을 이용하여 Ajax 통신 상태에 따라 세세하게 처리할 수 있습니다.
  • 자주 쓰는 설정의 경우 ajax.defaults에 명시하여 같은 설정을 여러 번 반복하는 일을 줄일 수 있습니다.
  • ES6 버전(tui-code-snippet/ajax/index.mjs)과 트랜스파일된 버전(tui-code-snippet/ajax/index.js) 2가지를 제공합니다. 트랜스파일된 버전은 Internet Explorer 8 부터 지원합니다.
  • 자세한 내용은 API 문서를 참고해주세요!
import ajax from "tui-code-snippet/ajax";

ajax({
  url: "https://nhn.github.io/tui-code-snippet/2.3.0/latest",
  method: "POST",
  contentType: "application/json",
  params: {
    version: "v2.3.0",
    author: "NHN. FE Development Lab <dl_javascript@nhn.com>",
  },
  beforeRequest: () => {
    showProgressBar();
  },
  complete: () => {
    hideProgressBar();
  },
})
  .then(({ data }) => {
    console.log(data);
  })
  .catch(({ status, statusText }) => {
    console.error(`${status} - ${statusText}`);
  });

Pagination jQuery 제거를 위한 container 개선 작업 적용 (v3.4.0)

css-selector를 통해 container를 지정하는 것이 가능해졌습니다. 기존에 jQuery를 이용하여 container를 지정하였던 방식은 v4.0 에서 사라지게 됩니다. 이후 메이저 업데이트시 불편함이 없게 미리 새로운 방식으로 변경하는 것을 권장해 드립니다.

const pagination = new Pagination($('#pagination1'), { ... }); // deprecated
👉
const pagination = new Pagination('#pagination1', { ... }); // v3.4.0~

컴퍼넌트에 CodeSnippet v2 적용

external dependency로 처리되던 tui-code-snippet을 번들 파일에 포함되게 수정되었습니다. 이를 통해 의존을 따로 가져가지 않아 설치가 편리해질 뿐만 아니라, 필요한 함수만 import하여 사용하기 때문에 번들 용량에서도 큰 장점을 얻을 수 있게 되었습니다. 가벼워진 TOAST UI 컴포넌트들을 만나보세요!

CodeSnippet 버그 수정 (v2.3.1)

  • IE8에서 xhr.readyState가 1일 때 xhr.status 접근 시 에러가 나는 버그 수정 (#46)

👨‍💻 Next Features

TOAST UI Editor는 현재 3월 첫 주 2.0 배포를 목표로 열심히 개발 하며 달려 나가고 있습니다. 🏃🏃🏃 2.0에서 변경되는 주요 기능들을 미리 만나보면 다음과 같습니다.

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

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

번들 사이즈 최적화

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

모노리포 적용

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

더 멋진 에디터를 만나는 날까지 조금만 더 기다려주세요! 🙏

애니메이션 duration 옵션 추가

  • 이전부터 요청이 많았던 차트 렌더시 존재하는 애니메이션을 조절할 수 있는 옵션을 추가합니다. 애니메이션을 끄거나 duration을 직접 조절할 수 있는 옵션이 생깁니다.

툴팁 사용성 개선

  • 툴팁 개선 또한 이전부터 요청이 많았는데요. 라인 차트 등 여러 차트에서 발생하고 있는 툴팁의 사용성을 개선하여 3.10.0에 포함되어 배포될 예정입니다!

커스텀 필터 기능 추가

  • 사용자가 직접 작성한 필터를 grid 내에서 사용할 수 있는 옵션이 추가됩니다. 기존 필터로는 할 수 없었던 다양한 필터 옵션을 적용할 수 있습니다.

infinite scrolling 기능 추가

  • 페이지네이션 이외에 infinite scrolling 으로 데이터를 로딩하는 옵션이 추가될 예정입니다.

슬라이더 UI 사용성 개선

  • 현재는 슬라이더 UI를 통해서만 이미지 회전, 텍스트 크기 및 도형 선 굵기를 변경할 수 있어 정교한 수정하기 힘들었습니다. 이제 슬라이더의 INPUT 박스에 직접 숫자를 입력하거나, 위 아래 키 버튼을 사용하여 정교하게 값을 변경할 수 있게 수정될 예정입니다.

되돌리기(UNDO), 되살리기(REDO) 기능 버그 수정

  • 현재 UNDO, REDO 기능이 몇몇 부분에서 오동작하는 문제가 있습니다. 또한, 슬라이더 UI의 drag 동작을 통해 값을 변경할 때 모든 상태가 UNDO 히스토리에 반영되어 사용성이 떨어지는 문제가 있었는데요. 이런 UNDO, REDO 기능의 문제들이 전반적으로 수정되어 배포될 예정입니다.

🗞 TOAST UI NEWS

이번 달 Weekly Picks

이번 달 위클리는 총 5개가 공개되었습니다. 3개의 번역 글과 2개의 오리지널글이 올라왔는데요. 이번 위클리 픽은 건강한 개발문화를 만들기 위해 FE개발랩에서 어떤 고민을 했고 풀어나가는지 요약한 코드리뷰로 시작하는 건강한 개발문화부터 TOAST UI가 2019년 수치상으로 얼마나 성장했는지를 나타내는 통계로 살펴보는 2019 TOAST UI 등 여러 흥미로운 이야기가 포함되어 있습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇

그 외 소식

강연

TOAST FORWARD

  • FE개발랩 김동우 책임님이 40여 명의 외부 개발자를 대상으로 '프런트엔드 테스팅 기초부터 실전까지' 교육을 진행했습니다. 수년간 다양한 방식으로 테스트를 작성해 온 경험을 공유하며, 여러 최신 테스트 도구를 사용하는 방식들을 전달했습니다. 해당 교육의 간략한 버전이 궁금하시다면 아래 NHN FORWARD 발표 영상을 참고하시는 걸 추천해 드립니다!

NHN FORWARD 발표 영상 공개

TOAST UI Medium

Improving the Reactivity System (feat. TOAST UI Grid) 번역글이 소개되었습니다.

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

#monthly
#toastui
한정2020.01.31
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.