<div id="readability-page-1" class="page"><div><h2 id="toast-ui-monthly-2021년-6월호"><a href="#toast-ui-monthly-2021%EB%85%84-6%EC%9B%94%ED%98%B8" aria-label="toast ui monthly 2021년 6월호 permalink"></a>TOAST UI Monthly 2021년 6월호</h2><hr>
<p>어느덧 2021년도 절반이 지나가고 있습니다. 호국보훈의 달인 6월을 맞아 나라를 위해 헌신하신 순국선열들을 기리는 시간을 잠시 가져보는건 어떨까요?😔 더운 여름 컨디션 관리하시면서 남은 반년도 TOAST UI와 함께 즐거운 코딩 하세요~!&nbsp;💪</p>
<h2 id="-releases"><a href="#-releases" aria-label=" releases permalink"></a>🚀 Releases</h2>
<h3 id="img-srchttpsuser-imagesgithubusercontentcom3537166073243160-4096d180-41ea-11ea-9d36-607ba9865253png-classmonthly-title-img"><a href="#img-srchttpsuser-imagesgithubusercontentcom3537166073243160-4096d180-41ea-11ea-9d36-607ba9865253png-classmonthly-title-img" aria-label="img srchttpsuser imagesgithubusercontentcom3537166073243160 4096d180 41ea 11ea 9d36 607ba9865253png classmonthly title img permalink"></a><img src="https://user-images.githubusercontent.com/35371660/73243160-4096d180-41ea-11ea-9d36-607ba9865253.png"></h3>
<h3 id="v300"><a href="#v300" aria-label="v300 permalink"></a><a href="https://github.com/nhn/tui.editor/releases/tag/v3.0.0">v3.0.0</a></h3>
<h3 id="-release-news-toast-ui-editor-30-출시-"><a href="#-release-news-toast-ui-editor-30-%EC%B6%9C%EC%8B%9C-" aria-label=" release news toast ui editor 30 출시  permalink"></a><strong>🎊 [Release News] TOAST UI Editor 3.0 출시 🎊</strong></h3>
<p>TOASTUI Editor 3.0이 완전히 새롭게 개편되어 출시되었습니다. <strong>마크다운 커스텀 문법 지원</strong>, <strong>위젯 노드 삽입</strong>, <strong>플러그인 시스템 개선</strong>처럼 사용자가 에디터의 기능을 쉽게 확장할 수 있는 방법들이 추가되었고, <strong>디자인도 세련되고 이쁘게 개편</strong>되었습니다. 🙌</p>
<h3 id="코어-모듈-교체-➔-더-가벼운-에디터"><a href="#%EC%BD%94%EC%96%B4-%EB%AA%A8%EB%93%88-%EA%B5%90%EC%B2%B4-%E2%9E%94-%EB%8D%94-%EA%B0%80%EB%B2%BC%EC%9A%B4-%EC%97%90%EB%94%94%ED%84%B0" aria-label="코어 모듈 교체 ➔ 더 가벼운 에디터 permalink"></a>코어 모듈 교체 ➔ 더 가벼운 에디터</h3>
<p>기존의 의존성을 모두 제거하고 <a href="https://prosemirror.net/">Prosemirror</a>를 사용하여 코어 모듈을 변경하였습니다. 그 덕에 내부 구조와 API를 통일할 수 있었고, 전체 번들 파일의 용량도 602.1KB에서 495.6KB로 <strong>약 30% 정도 경량화</strong>할 수 있었습니다.</p>
<p><img src="https://user-images.githubusercontent.com/37766175/122364086-6fa31400-cf94-11eb-83d5-40b0df26ae99.png" alt="image"></p>
<h3 id="마크다운-커스텀-문법-지원"><a href="#%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4-%EC%BB%A4%EC%8A%A4%ED%85%80-%EB%AC%B8%EB%B2%95-%EC%A7%80%EC%9B%90" aria-label="마크다운 커스텀 문법 지원 permalink"></a>마크다운 커스텀 문법 지원</h3>
<p>TOAST UI Editor 3.0에서는 사용자만의 커스텀 문법을 정의할 수 있는 옵션을 제공합니다. 커스텀 문법을 사용하면 다음 예시처럼 <a href="https://katex.org/">KaTeX</a>와 같은 문법을 사용하여 수식을 표현할 수 있습니다.</p>
<p><strong>마크다운</strong></p>
<p><img src="https://user-images.githubusercontent.com/37766175/120983159-65bf2b00-c7b4-11eb-84af-30c38e832585.png" alt="image"></p>
<p><strong>위지윅</strong></p>
<p><img src="https://user-images.githubusercontent.com/37766175/120984395-96539480-c7b5-11eb-8e57-2f43082f345f.gif" alt="image"></p>
<h3 id="위젯-노드"><a href="#%EC%9C%84%EC%A0%AF-%EB%85%B8%EB%93%9C" aria-label="위젯 노드 permalink"></a>위젯 노드</h3>
<p>일반 텍스트를 특정한 위젯 노드로 보여줄 수 있는 widgetRules 옵션이 추가되었습니다. 이 옵션을 사용하면 링크 텍스트를 멘션 노드로 보여주거나 텍스트를 원하는 형태의 DOM 노드로 보여줄 수 있습니다.</p>
<p><img src="https://user-images.githubusercontent.com/37766175/120621226-a6f3ca00-c498-11eb-9355-0275fd3bdbdb.gif" alt="image"></p>
<p>또한 아래 이미지처럼 팝업 위젯과 연동하여 위젯 노드를 삽입할 수도 있습니다.</p>
<p><img src="https://user-images.githubusercontent.com/37766175/120624280-81b48b00-c49b-11eb-9896-432120c27389.gif" alt="image"></p>
<h3 id="디자인"><a href="#%EB%94%94%EC%9E%90%EC%9D%B8" aria-label="디자인 permalink"></a>디자인</h3>
<p>TOAST UI Editor 3.0에서는 디자인도 완전히 변경되었습니다. 툴바나 탭과 같은 전반적인 UI 요소의 크기가 커져 가독성이 좋아졌고, 외곽을 굴곡지게 처리하여 더 부드러운 느낌을 주었습니다.</p>
<p><img src="https://user-images.githubusercontent.com/37766175/121464762-71e2fc80-c9ef-11eb-9a0a-7b06e08d3ccb.png" alt="image"></p>
<p>또한 다크 테마가 추가되었습니다.</p>
<p><img src="https://user-images.githubusercontent.com/37766175/121808649-8136a400-cc94-11eb-8674-812e170ccab5.png" alt="image"></p>
<h3 id="마이그레이션-가이드"><a href="#%EB%A7%88%EC%9D%B4%EA%B7%B8%EB%A0%88%EC%9D%B4%EC%85%98-%EA%B0%80%EC%9D%B4%EB%93%9C" aria-label="마이그레이션 가이드 permalink"></a>마이그레이션 가이드</h3>
<p>TOAST UI Editor 3.0에서는 위에서 언급한 기능외에도 대대적인 변화가 있었습니다. 그만큼 사용 방법에도 큰 변화가 생겼기 때문에, 마이그레이션 가이드를 준비했습니다.</p>
<ul>
<li>영어(🇺🇸): <a href="https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md">https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide.md</a></li>
<li>한국어(🇰🇷): <a href="https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide-ko.md">https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide-ko.md</a></li>
</ul>
<p>또한 위에서 언급한 기능들은 아래 가이드에서 자세한 내용을 볼 수 있습니다.</p>
<ul>
<li>커스텀 문법: <a href="https://github.com/nhn/tui.editor/tree/master/docs/ko/custom-block.md">https://github.com/nhn/tui.editor/tree/master/docs/ko/custom-block.md</a></li>
<li>위젯 노드: <a href="https://github.com/nhn/tui.editor/tree/master/docs/ko/widget.md">https://github.com/nhn/tui.editor/tree/master/docs/ko/widget.md</a></li>
<li>플러그인: <a href="https://github.com/nhn/tui.editor/tree/master/docs/ko/plugin.md">https://github.com/nhn/tui.editor/tree/master/docs/ko/plugin.md</a></li>
</ul>
<h3 id="img-srchttpsuser-imagesgithubusercontentcom3537166073243134-3248b580-41ea-11ea-8e9f-b275f29d1fb8png-classmonthly-title-img"><a href="#img-srchttpsuser-imagesgithubusercontentcom3537166073243134-3248b580-41ea-11ea-8e9f-b275f29d1fb8png-classmonthly-title-img" aria-label="img srchttpsuser imagesgithubusercontentcom3537166073243134 3248b580 41ea 11ea 8e9f b275f29d1fb8png classmonthly title img permalink"></a><img src="https://user-images.githubusercontent.com/35371660/73243134-3248b580-41ea-11ea-8e9f-b275f29d1fb8.png"></h3>
<h3 id="v435"><a href="#v435" aria-label="v435 permalink"></a><a href="https://github.com/nhn/tui.chart/releases/tag/v4.3.5">v4.3.5</a></h3>
<p><strong>버그 수정</strong></p>
<ul>
<li>Export to 레이아웃 타이틀 클릭 시 에러 발생 (<a href="https://github.com/nhn/tui.chart/pull/683">#683</a>)</li>
</ul>
<h3 id="img-srchttpsuser-imagesgithubusercontentcom3537166073243222-691ecb80-41ea-11ea-8d35-04f90c9c4d0fpng-classmonthly-title-img-descender"><a href="#img-srchttpsuser-imagesgithubusercontentcom3537166073243222-691ecb80-41ea-11ea-8d35-04f90c9c4d0fpng-classmonthly-title-img-descender" aria-label="img srchttpsuser imagesgithubusercontentcom3537166073243222 691ecb80 41ea 11ea 8d35 04f90c9c4d0fpng classmonthly title img descender permalink"></a><img src="https://user-images.githubusercontent.com/35371660/73243222-691ecb80-41ea-11ea-8d35-04f90c9c4d0f.png"></h3>
<h3 id="apploader-v216"><a href="#apploader-v216" aria-label="apploader v216 permalink"></a>AppLoader <a href="https://github.com/nhn/tui.app-loader/releases/tag/v2.1.6">v2.1.6</a></h3>
<p><strong>개선 사항</strong></p>
<ul>
<li>tui-note 설정 추가</li>
</ul>
<h3 id="autocomplete-v216"><a href="#autocomplete-v216" aria-label="autocomplete v216 permalink"></a>AutoComplete <a href="https://github.com/nhn/tui.auto-complete/releases/tag/v2.1.6">v2.1.6</a></h3>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="colorpicker-v227"><a href="#colorpicker-v227" aria-label="colorpicker v227 permalink"></a>ColorPicker <a href="https://github.com/nhn/tui.color-picker/releases/tag/v2.2.7">v2.2.7</a></h3>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="contextmenu-v219"><a href="#contextmenu-v219" aria-label="contextmenu v219 permalink"></a>ContextMenu <a href="https://github.com/nhn/tui.context-menu/releases/tag/v2.1.9">v2.1.9</a></h3>
<p><strong>버그 수정</strong></p>
<ul>
<li>스크롤 시 컨텍스트 메뉴가 잘못된 위치에 나타나는 버그 수정(<a href="https://github.com/nhn/tui.context-menu/pull/44">#44</a>)</li>
</ul>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="datepicker-v421"><a href="#datepicker-v421" aria-label="datepicker v421 permalink"></a>DatePicker <a href="https://github.com/nhn/tui.date-picker/releases/tag/v4.2.1">v4.2.1</a></h3>
<p><strong>버그 수정</strong></p>
<ul>
<li>DateRangePicker가 시간 범위를 고려하지 않는 버그 수정(<a href="https://github.com/nhn/tui.date-picker/issues/51">#51</a>)</li>
</ul>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="pagination-v341"><a href="#pagination-v341" aria-label="pagination v341 permalink"></a>Pagination <a href="https://github.com/nhn/tui.pagination/releases/tag/v3.4.1">v3.4.1</a></h3>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="rolling-v225"><a href="#rolling-v225" aria-label="rolling v225 permalink"></a>Rolling <a href="https://github.com/nhn/tui.rolling/releases/tag/v2.2.5">v2.2.5</a></h3>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="selectbox-v110"><a href="#selectbox-v110" aria-label="selectbox v110 permalink"></a>SelectBox <a href="https://github.com/nhn/toast-ui.select-box/releases/tag/v1.1.0">v1.1.0</a></h3>
<p><strong>기능 추가</strong></p>
<ul>
<li>포커스 API 추가(<a href="https://nhn.github.io/toast-ui.select-box/latest/SelectBox#focus">API Doc</a>)</li>
</ul>
<p><strong>버그 수정</strong></p>
<ul>
<li>마우스 클릭 시 포커스가 유지되지 않던 버그 수정(<a href="https://github.com/nhn/toast-ui.select-box/pull/7">#7</a>)</li>
</ul>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="timepicker-v210"><a href="#timepicker-v210" aria-label="timepicker v210 permalink"></a>TimePicker <a href="https://github.com/nhn/tui.time-picker/releases/tag/v2.1.0">v2.1.0</a></h3>
<p><strong>기능 추가</strong></p>
<ul>
<li>선택 가능 범위 설정 기능 추가(<a href="https://nhn.github.io/tui.time-picker/latest/TimePicker#setRange">API Doc</a>)</li>
</ul>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="timepicker-v211"><a href="#timepicker-v211" aria-label="timepicker v211 permalink"></a>TimePicker <a href="https://github.com/nhn/tui.time-picker/releases/tag/v2.1.1">v2.1.1</a></h3>
<p><strong>버그 수정</strong></p>
<ul>
<li>선택 가능한 범위의 끝 지점을 지정하지 않은 경우 오류가 발생하던 버그 수정(<a href="https://github.com/nhn/tui.time-picker/pull/63">#63</a>)</li>
</ul>
<h3 id="tree-v408"><a href="#tree-v408" aria-label="tree v408 permalink"></a>Tree <a href="https://github.com/nhn/tui.tree/releases/tag/v4.0.8">v4.0.8</a></h3>
<p><strong>버그 수정</strong></p>
<ul>
<li>컨텍스트 메뉴가 올바른 위치에 표시되지 않던 버그 수정(<a href="https://github.com/nhn/tui.tree/issues/81">#81</a>)</li>
</ul>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h3 id="codesnippet-v233"><a href="#codesnippet-v233" aria-label="codesnippet v233 permalink"></a>CodeSnippet <a href="https://github.com/nhn/tui.code-snippet/releases/tag/v2.3.3">v2.3.3</a></h3>
<p><strong>개선 사항</strong></p>
<ul>
<li>테스트 프레임워크를 JEST로 변경</li>
</ul>
<h2 id="-toast-ui-news"><a href="#-toast-ui-news" aria-label=" toast ui news permalink"></a>🗞 TOAST UI NEWS</h2>
<h3 id="이번-달-weekly-picks"><a href="#%EC%9D%B4%EB%B2%88-%EB%8B%AC-weekly-picks" aria-label="이번 달 weekly picks permalink"></a>이번 달 Weekly Picks</h3>
<p>이번 위클리는 if/else 대신 사용할 수 있는 switch (true) 패턴과 자바스크립트에서의 메모리 누수에 관한 글과 약한 참조와 Finalizer에 대한 글, 그리고 React Testing Library를 이용한 테스트에 관한 글이 번역되었습니다. 아직 읽어보시지 않았다면 아래 링크를 클릭하세요! 👇👇</p>
<ul>
<li><strong>2020.06.03</strong> <a href="https://ui.toast.com/weekly-pick/ko_20210603">자바스크립트에서 switch (true) 패턴 사용하기 #310</a></li>
<li><strong>2020.06.11</strong> <a href="https://ui.toast.com/weekly-pick/ko_20210611">당신이 모르는 자바스크립트의 메모리 누수의 비밀 #311</a></li>
<li><strong>2020.06.24</strong> <a href="https://ui.toast.com/weekly-pick/ko_20210624">약한 참조와 Finalizer #312</a></li>
<li><strong>2020.06.30</strong> <a href="https://ui.toast.com/weekly-pick/ko_20210630">React Testing Library를 이용한 선언적이고 확장 가능한 테스트 #312</a></li>
</ul>
<hr>
<div data-language="text"><pre><code>사용 문의, 기능 추가/수정 요청 및 버그 신고는 GitHub 저장소의 이슈 게시판을 이용해주세요.</code></pre></div></div></div>

Weekly Pick RSS Feed

어느덧 2021년도 절반이 지나가고 있습니다. 호국보훈의 달인 6월을 맞아 나라를 위해 헌신하신 순국선열들을 기리는 시간을 잠시 가져보는건 어떨까요?😔

TOAST UI Monthly 2021년 6월호

댓글