btoa 혹은 atob 사용해 BASE64 <-> UTF-8 인코딩 할때 한글 깨짐 해결

Intro Github에서 저장소의 readme 파일을 불러와 화면에 렌더링 해 주는 기능을 구현 하고 있는 중, 한글이 깨져버리는 현상이 발생했습니다. 위에서 보이듯, github 에서는 readme 파일을 base64 로 인코딩 해서 보내주는데요, java let decoded = atob(res.content);Copy 이렇게 해서 출력 했더니 한글이 깨지는 현상이 발생 했습니다. https://github.com/dankogai/js-base64 dankogai/js-base64 Base64 implementation for JavaScript. Contribute to dankogai/js-base64 development by creating an account on GitHub. github..

Programming/javascrlpt 2021.06.11
jQuery contextMenu를 활용해 우클릭 메뉴 만들기

위에 보이는 css 와 js 들이 필요합니다. 우클릭 할 영역을 만들어 줍니다. right click meCopy 영역에 초기 설정 코드를 넣어줍니다. $(function(){ $.contextMenu({ selector: &#39;.context-menu-one&#39;, items: { // name: { name: "Text", type: &#39;text&#39;, value: "Hello World", events: { keyup: function(e) { // add some fancy key handling here? window.console && console.log(&#39;key: &#39;+ e.keyCode); } } }, sep1: "---------", // yesno: { n..

Programming/javascrlpt 2021.06.05
이제 alert 대신 toastr 사용하자 ! Toastr 사용 하기

https://github.com/CodeSeven/toastr toastr is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. toastr 이란 ? toastr 은 non-blocking 알람을 띄우는 Javasript 라이브러리 입니다. jQuery 가 필요합니다 여러가지 다양한 옵션을 줄 수 있지만 간단하게 사용 할 수 있도록 쉽게 설명을 해 드리겠습니다. 테스트 먼저 위의 기본적인 html 코드를 실행해보면 정말 기본적으로, &#39;테스트&#39; 버튼을 눌렀을때 hi ..

Programming/javascrlpt 2021.06.04
TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor)

TOAST UI Editor 사용법 ( 마크다운 에디터 Markdown Editor) cdns에 2.0.0 버전 지원이 끊겼고, 사용법도 조금 달라져 2021년 7월 23일에 최신 버전 기준으로 글을 업데이트 했습니다! https://ui.toast.com/ TOAST UI :: Make Your Web Delicious! | TOAST UI :: Make Your Web Delicious! Calendar provides monthly, weekly, multi-weekly, daily views, and more, as well as a basic pop-up UI you can use to add/edit/delete your schedules. You can manage your schedule ..

Programming/javascrlpt 2021.06.01
JavaScript 드래그 할 수 있는 HTML 요소 만들기

종종 HTML 요소의 드래그가 필요한 때가 있습니다. 드래그를 통해 상태값을 변경하거나, 간단하게 설정을 적용시킬 수 있을때 특히 유용합니다. 저희가 준비중인 프로젝트에서는 칸반 보드가 들어갈 예정인데 이를 위해 꼭 필요한 기술입니다. 일단 칸반 카드로 쓸 div를 만들어 줬습니다. .kanbanCard { cursor: move; position: absolute; background-color: #2196F3; color : white; border: 1px solid #d3d3d3; text-align: center; } cursor:move로 마우스를 올렸을때 십자표시로 커서가 바뀌도록 css를 적용해줍니다. 이제 위의 자바스크립트 코드가 필요합니다. 코드 전문을 먼저 보여드리고 나서, 함수를 한..

Programming/javascrlpt 2021.05.23