[tui.editor] 설치하기(feat.CDN)

CDN(Contents Delivery Network)으로 설치하기!

CDN ?

CDN(Contents Delivery Network)은 지리적, 물리적으로 떨어져 있는 사용자에게 컨텐츠를 더 빠르게 제공할 수 있는 기술입니다.

- 느린 응답속도/다운로딩 타임을 극복

기본적으로 CDN은 웹, 애플리케이션, 스트리밍 미디어를 비롯한 콘텐츠를 전송하도록 최적화된 전세계적으로 촘촘히 분산된 서버로 이루어진 플랫폼입니다.

그래서 사용자가 원격지에 있는 서버로부터 Content(예. Web Object, Video, Music, Image 등)를 다운로드 받을 때 가까이 있는 서버에서 받는 것보다 시간이 오래 걸리므로, 사용자와 가까운 곳에 위치한 Cache Server에 해당 Content를 저장(캐싱)하고 Content 요청시에 Cache Server가 응답을 주는 기술입니다.

- 장점

CDN은 오리진(origin)이라고도 불리는 컨텐츠 서버와 엔드유저(Client) 사이에서 컨텐츠를 전달하는 역할을 합니다.

CDN을 이용하지 않으면 다음과 같은 단점이 발생합니다.

• 오리진 서버가 모든 엔드유저의 요청에 일일이 응답
• 트래픽 증가 및 서버 과부화에 따른 장애 발생확률 증가

그래서 CDN은 오리진 서버를 대신하여 엔드유저와 가까운 물리적 위치 및 네트워크에서 요처에 응답함으로써 트래픽 부하를 줄이고, 유저의 웹 경험을 개선합니다.

- 작동원리 및 캐싱 종류

현재 목적은 CDN을 이용하여 tui-editor를 사용해보기 전 CDN이 무엇인지 간단하게 알아보는 것이기 때문에 더 자세한 내용은 cdn이란 무엇인가요?를 통해 알아보도록 합니다!

TOAST UI Editor

설치

TOAST UI products는 TOAST Cloud를 통한 CDN으로 이용가능합니다.

Html에서 다음과 같은 코드로 CDN을 사용할 수 있습니다.

<!-- Styles -->
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor.css"></link>
<link rel="stylesheet" href="https://uicdn.toast.com/tui-editor/latest/tui-editor-contents.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.48.4/codemirror.css"></link>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"></link>
<!-- Scripts -->
<script src="https://uicdn.toast.com/tui-editor/latest/tui-editor-Editor-full.js"></script>

CDN 디렉토리는 아래와 같은 구조로 되어있습니다. 최신 버전이 아닌 구체적인 버전을 사용하고 싶다면, url의 path 안에 /latest/ 대신에 /v1.1.0/과 같은 버전을 입력하면 됩니다.

tui-editor/
├─ latest/
│  ├─ tui-editor-Editor.js
│  ├─ tui-editor-Editor.min.js
│  └─ ...
├─ v1.1.0/
│  ├─ ...

참고

CDN(Contents Delivery Network) 이란? - 갓대희의 작은공간 CDN이란 무엇인가요? - 아카마이 인텔리전트 플랫폼