html

contenteditable 👍 contenteditable 사용자가 요소를 편집할 수 있게 하는 옵션이다. HTML 태그를 입력하더라도 vue의 v-html과는 달리 문자열 그대로 표시한다. https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/contenteditable true: 편집 가능 / false: 편집 불가능 ex) textarea 의 값만 표기하고, 변경 불가능하게 할 경우 contenteditable = false disabled 예) textarea 에 입력한 값을 div 에 표시 (vuejs) {{ contents }} contenteditable에 css 속성 적용 // .scss div[contenteditable] ..

v-html 👍 v-html vue에서 html 그대로 적용시킬 경우, v-html 옵션을 이용해서 적용 가능하다. ex) TextEditor(quill)에서 입력한 내용을 표시할 때, 값을 html 로 반환하기 때문에 html을 그대로 표시하기 위해서는 v-html을 이용한다. vue에서 v-html사용 시 XSS 공격 예방을 위해 eslint 에서 경고(warning)를 발생한다. 경고를 없애기 위해서는 코드 최상단에 아래 코드를 추가해주면 된다. 참고: https://github.com/vuejs/eslint-plugin-vue/issues/260

[Javascript] Javascript HTML5 Canvas Libraries HTML5 canvas를 쉽게 다룰 수 있게 해주는 다양한 라이브러리들. fabric.js : http://fabricjs.com/ TMI NHN Toast ui 의 Image editor도 이 라이브러리를 쓴다. (https://ui.toast.com/tui-image-editor) 장점 다양한 예제(Demo)가 있다. 사용하는 사람, 이걸 사용해서 개발된 프로젝트가 많다. 단점 Free Drawing(Pen)으로 그린 그림을 지우는 방법이 딱히 없다. issue에 방법이 하나 있긴 함 => https://github.com/fabricjs/fabric.js/issues/1225 하지만 위 방법을 사용하면 배경이 지워지..

[Django] static 파일 불러오기 static폴더 : css, image, js 파일을 포함하는 폴더이다. 먼저 settings.py에서 static 폴더 위치를 설정해 준다. Django예제에서와 같이 앱들과 동등한 위치에 static폴더를 만들 경우 아래와 같이 staticfiles_dirs에 경로를 추가해 주면된다. // settings.py STATIC_DIR = os.path.join(BASE_DIR, "static") STATIC_URL = '/static/' STATICFILES_DIRS = [ STATIC_DIR, ] s 만약, static폴더를 다른 곳에 만들고 싶다면 어떻게 해야할까? 예를 들어, myapp 이라는 앱 폴더 내에 존재할 경우, 똑같이 경로를 staticfiles..

[JavaScript] image refresh 오류 웹에서 같은 url(src)를 갖는 이미지를 재로드 하면 변경된 이미지가 아닌 변경 전 즉, 이전 이미지를 불러온다. 예를들어, A라는 이미지를 웹에서 불러온 후, A 이미지를 바꿀 경우. 전체 페이지를 새로고침하거나 웹을 재시작하지 않고, 이미지만 부분 새로고침 할 경우 A 이미지는 변경된 이미지가 아닌 이전 이미지가 보여진다. 아마 캐시에 쌓아둔 듯 하다. 처음엔 Electron 언어 자체의 문제인줄 알고, 아래와 같이 cache를 삭제해 보았지만 효과가 없었고, console로 cache를 확인해 보니 캐시는 항상 비워져 있었다. var remote = require('remote'); var win = remote.getCurrentWindow..

[JavaScript] textarea 줄 수 제한 (Limit number of lines in textarea) textarea의 keypress이벤트에 현재 입력된 값의 줄 수와 textarea에 선언한 rows 를 비교해서 엔터(keycode 13)가 입력되었을 때, 현재 textrea의 줄 수와 rows가 같은 경우 false를 리턴해주면 된다. HTML javascript // textarea 줄 수 제한 function limitLines(obj, e) { // 현재 textarea에 입력된 줄 수 let numberOfLines = (obj.value.match(/\n/g) || []).length + 1; // textarea에 선언된 rows 수 let maxRows = obj.rows..