토스트(toast) UI는 웹 애플리케이션에서 사용자에게 메시지를 간편하고 효과적으로 전달하는 데 사용되는 인기 있는 라이브러리입니다.
그러면 왜 써야하나??
1. user들의 경험 향상
2. 시각적 피드백 제공
3. 다양한 디자인 옵션
4. 쉬운 사용성
등등이 있다.
저는 toast ui숙련도를 높이기 위해 codepen이라는 사이트에서 연습해보았습니다. 참고로 codepen은 유용한 프론트엔드 학습 툴입니다!
https://ui.toast.com/tui-editor => 토스트 UI에디터
https://github.com/nhn/tui.editor/blob/master/docs/ko/README.md => 토스트 에디터 문서(한국어 버전!)
제가 했던 사용법을 따라해보시죠!
1.에디터 사용법 HTML부터 CDN코드들 넣기
많은 코드들중에 CDN코드를 쓰는 이유는 맨아래에 기재해놓도록 하겠습니다!
2. 컨테이너 요소 추가하기
3. JS부분에 Editor namespace사용하기
4. css파일추가 CDN코드 넣기
5. 컨테이너 요소에 맞는 인스턴스 추가하기
파란 부분을 바꿔서 2번에 id= "파란 밑줄친 부분"으로 수정해주면 된답니다!
(참고로 css 부분은 제가 따로 여백이 있어서 추가적으로 적어놓은 거니 여러분들도 맘에 들지 않는다면 기본 세팅을 저렇게 하셔도 됩니다.
그리고 JS 부분에 heigth: "100vh"라고 되어있는데 이 말의 의미는 vertical heigth 즉 수직 길이의 100%라는 의미로 50vh라고 하면 수직 길이로 50%만 나오게 디자인됩니다)
codepen에서 CDN쓰는 이유?
CodePen은 외부 라이브러리를 로드하는 기능을 제공하지만, 일부 라이브러리는 외부에서 호스팅되지 않는 경우에는 작동하지 않을 수 있습니다. 이 경우 CDN에 있는 코드를 사용해야 합니다.Toast UI는 JavaScript 라이브러리로, CodePen에서 Toast UI를 사용하려면 해당 라이브러리와 의존 라이브러리를 로드해야 합니다.
CodePen에서는 "Settings" 메뉴에서 "JavaScript" 탭을 선택하여 외부 라이브러리를 로드할 수 있습니다. 이 탭에서 "Add External Scripts/Pens" 버튼을 클릭하고, Toast UI 라이브러리의 CDN 주소를 입력하면 CodePen에서 해당 라이브러리를 사용할 수 있습니다.(=의존 라이브러리를 많이 로드 해야 한다 = 의존성이 많다 = 복잡하다)
따라서 Toast UI의 경우, CDN에 있는 Toast UI CDN 주소와 함께 모든 의존 라이브러리를 로드하는 코드가 있습니다. 이 코드를 사용하면 CodePen에서 Toast UI를 쉽게 사용할 수 있습니다.
더 쉽게 이야기해서 다운로드하지 않고 바로 사용하고 싶을 때 CDN 코드를 쓴다고 이해하자!
