개발자는 언제나 맑은 뒤 흐림

jsTree는 tree구조 표현이 간단한 api이다.다양한 사용법은 jsTree 참조 https://www.jstree.com/ 1. json 데이터로 세팅하기 백엔드나 프론트엔드 개발을 하려면 json 데이터로 세팅하는 경우가 제일 많으니까 이 부분만 공부했다. 전체 소스 코드 let jsonData = [{ "parent": "#", "menuOrder": "2", "menuDepth": "2", "id": "3002", "text": "갈수있어" ..

왜 때문에 캐시는 나를 힘들게 하는걸까? 참자... css 파일을 가져오는 부분에 알 수 없는 파라미터를 달아서 해결 미워, 미워

특수문자를 정규식을 사용해서 막기 onkeyup 과 ononkeydown 에서 현재 입력창의 값을 받아서 처리 한다. function check(obj){ //정규식으로 특수문자 판별 var regExp = /[ \{\}\[\]\/?.,;:|\)*~`!^\-_+┼@\#$%&\'\"\\\(\=]/gi; //배열에서 하나씩 값을 비교 if( regExp.test(obj.value) ){ //값이 일치하면 문자를 삭제 obj.value = obj.value.substring( 0 , obj.value.length - 1 ); } }

시작일자를 선택해주세요 //Date range picker $('#start_date').datepicker({ controlType:'select', oneLine:true, dateFormat: 'yy-mm-dd', prevText: '이전 달', nextText: '다음 달', monthNames: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], monthNamesShort: ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'], dayNames: ['일', '월', '화', '수', '목', '금', '토'], dayNamesS..

많은 크롬 클립보드 복사 방법이 있지만... 나는 안되더라. 그래서 찾은 제타위키 설명글! 정말 나의 바이블이다. JavaScript 클립보드로 복사하기 - 제타위키 다음 문자열 포함... zetawiki.com function copyToClipboard(val) { var t = document.createElement("textarea"); document.body.appendChild(t); t.value = val; t.select(); document.execCommand('copy'); document.body.removeChild(t); }

Gem : https://github.com/joshuajansen/magnific-popup-rails : gem 'magnific-popup-rails', '~> 1.1.0’ Git : https://github.com/dimsemenov/Magnific-Popup Demo : http://dimsemenov.com/plugins/magnific-popup/ Codepen demo : https://codepen.io/collection/nLcqo/ closeBtnInside 1 2 3 4 5 6 7 8 9 10 11 12 13 14 // Example 1: From an element in DOM $('.open-popup-link').magnificPopup({ type:'inline', midC..

설치 로컬에서 설치 $ gem install mustache Gem 파일에서 선언 gem "mustache", "~> 1.0" {{ }} : http://mustache.github.io/ 자바스크립트 : https://github.com/janl/mustache.js Gem : https://github.com/mustache/mustache.github.com 사용법 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Loading... Hello {{ name }}! function loadUser() { var template = $('#template').html(); Mustache.parse(template); // optional, speeds up ..

JavaScript가 프로토타입 기반의 OOP 인 줄은 사실 잘 몰랐다. 위키백과 : 자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 이런 부분에서 js를 많이 배워두면 좋을 것 같다. 이제 기본 문법만 쓰다가 드디어 최신 문법을 적용하겠다면 꼭 배워두고 가야하는 것들이 있다. Class 기술문서 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes class를 사용할 때 function을 사용하지 않아도 된다. class Polygon { constructor(height,..

스크롤로 이동하여 이미지 화면이 다가오면 이미지를 슬라이드로 나타낸다. (https://github.com/KIMSG/javascript30/blob/master/day13/index.html) debouce 함수는 이미지를 나타내게 해주는 함수이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 function checkSlide(e) { sliderImages.forEach(sliderImage => { const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown ..