해피뉴이어!🙌 새해 복 많이 받으세요!
올해부터 매달 TOAST UI Monthly
를 배포합니다. 한 달간 있었던 TOAST UI 업데이트와 FE개발랩의 활동을 한 눈에 확인할 수 있습니다. 궁금한 점이나 요청하고 싶은 기능이 있나요? 주저하지 말고 알려주세요. 문은 항상 열려있습니다! 그럼 시작해볼까요~?
기능 추가
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)사용성 개선
fabric.js
를 설치하는 방식을 dependencies에 직접 기입하는 방식으로 변경하여 fabric.js
가 보다 안정적으로 설치되도록 개선하였습니다!버그 수정
fabric.js
의 메이저 버전이 올라가면서 발생했던 주요 버그들 수정 (#297, #221)버그 수정
isReadOnly=true
옵션 사용 시(읽기 전용인 경우) 주간뷰에서 일정 종료 시간을 조절할 수 있는 아이콘을 표시하지 않도록 수정 (#470)setOptions()
API 사용시 template
, timezones
, calendar
프로퍼티에 대해 변경 옵션이 적용되지 않는 현상 해결 (#487)jQuery가 완전히 제거된 Tree 4.0 버전이 출시되었습니다! Tree 4.0에는 몇 가지 큰 변경사항들이 존재하는데요. 함께 살펴보도록 하겠습니다.
주요 변경사항
id
, jQueryObject
를 container로 지정할 수 없게 되었습니다. 변경사항은 이 링크를 참고해주세요!Bower
를 통한 설치를 지원하지 않습니다. 설치는 CDN과 npm, 직접 다운로드로만 가능합니다.버그 수정
XMLHttpRequest
기반의 경량화된 Ajax Module가 추가되었습니다. (#44)
Promise
를 지원하는 브라우저의 경우 Promise를 반환합니다.beforeRequest
, success
, error
, complete
콜백을 이용하여 Ajax 통신 상태에 따라 세세하게 처리할 수 있습니다.ajax.defaults
에 명시하여 같은 설정을 여러 번 반복하는 일을 줄일 수 있습니다.tui-code-snippet/ajax/index.mjs
)과 트랜스파일된 버전(tui-code-snippet/ajax/index.js
) 2가지를 제공합니다. 트랜스파일된 버전은 Internet Explorer 8 부터 지원합니다.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}`);
});
css-selector
를 통해 container를 지정하는 것이 가능해졌습니다. 기존에 jQuery를 이용하여 container를 지정하였던 방식은 v4.0 에서 사라지게 됩니다. 이후 메이저 업데이트시 불편함이 없게 미리 새로운 방식으로 변경하는 것을 권장해 드립니다.
const pagination = new Pagination($('#pagination1'), { ... }); // deprecated
👉
const pagination = new Pagination('#pagination1', { ... }); // v3.4.0~
external dependency로 처리되던 tui-code-snippet
을 번들 파일에 포함되게 수정되었습니다. 이를 통해 의존을 따로 가져가지 않아 설치가 편리해질 뿐만 아니라, 필요한 함수만 import하여 사용하기 때문에 번들 용량에서도 큰 장점을 얻을 수 있게 되었습니다. 가벼워진 TOAST UI 컴포넌트들을 만나보세요!
xhr.readyState
가 1일 때 xhr.status
접근 시 에러가 나는 버그 수정 (#46)TOAST UI Editor는 현재 3월 첫 주 2.0 배포를 목표로 열심히 개발 하며 달려 나가고 있습니다. 🏃🏃🏃 2.0에서 변경되는 주요 기능들을 미리 만나보면 다음과 같습니다.
커스텀 마크다운 파서로 교체
번들 사이즈 최적화
모노리포 적용
더 멋진 에디터를 만나는 날까지 조금만 더 기다려주세요! 🙏
애니메이션 duration 옵션 추가
툴팁 사용성 개선
커스텀 필터 기능 추가
infinite scrolling 기능 추가
슬라이더 UI 사용성 개선
되돌리기(UNDO), 되살리기(REDO) 기능 버그 수정
이번 달 위클리는 총 5개가 공개되었습니다. 3개의 번역 글과 2개의 오리지널글이 올라왔는데요. 이번 위클리 픽은 건강한 개발문화를 만들기 위해 FE개발랩에서 어떤 고민을 했고 풀어나가는지 요약한 코드리뷰로 시작하는 건강한 개발문화
부터 TOAST UI가 2019년 수치상으로 얼마나 성장했는지를 나타내는 통계로 살펴보는 2019 TOAST UI
등 여러 흥미로운 이야기가 포함되어 있습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇
TOAST FORWARD
NHN FORWARD 발표 영상 공개
실용적인 프런트엔드 테스트 전략(김동우 책임)
점진적으로 프런트엔드 프레임워크 교체하기(유동식 책임)
Improving the Reactivity System (feat. TOAST UI Grid) 번역글이 소개되었습니다.
사용 문의, 기능 추가/수정 요청 및 버그 신고는 각 제품의 GitHub 저장소 이슈를 이용해주세요!