일안하고블로그

제이쿼리(Jquery) .on()제이쿼리를 사용하다보면 동적으로 생성된 함수에 Function을 걸어야 하는 경우가 발생합니다. 그럴경우 동적 DOM과 정적 DOM모두에 Function을 걸어야하는데 저는 .on()을 사용합니다. 종종사용하고 암기가 어려워 예제를 만들었습니다. $(document).ready(function(){ /* 소스 */ }); 상단의 ready는 해당 문서를 다읽고 실행되는 Function입니다. 따라서 문서의 내용이 변화하면 감지를 하지못합니다. 하지만 on()은 바뀐 시점에서 전체 내용을 읽기 때문에 내용변경 후에도 이벤트가 가능해집니다. $(document).on("click",".menu div", function(event){}); See the Pen 제이쿼리 정적테..

자바스크립트 스프레드 연산자를 접하고 사용한지 별로 안되었고 , 사실 굳이 왜사용해야하는지 잘 몰랐습니다. 가장 중요한 이유는 ES6를 사용하지만 너무 이해하기 어렵고, 꼭필요한 함수는 아니라고 생각했기 때문입니다. 사실, 아직도 100퍼센트 활용하진 못하고, "이렇게 사용하면 편하니까" 라는 생각 가지고 쓰고있습니다. 스프레드 연산자를 다른 연산자와 비교하면서 풀어나가 보도록 하겠습니다. 1. Array사용시 스프레드 연산자 - 배열 결합. concat사용 See the Pen 배열,배열 합치기 by 최대한 (@sheldhe) on CodePen. 배열을 결합하는 방법은 위에있는 것 말고 많은 예제가 있습니다. 여기를 참조하세요. - ES6 배열 결합. See the Pen ES6 -스프레드함수 Arr..

자바스크립트 모듈패턴 자바스크립트 모듈패턴에 대해서 많이 들어보셨을 거에요. 자바스크립트에서 수 많은 디자인패턴이 있습니다. 그중에서 가장 많이 사용 되어오고 있는 패턴이 모듈 패턴입니다. 앞으로 자주쓰는 모듈패턴부터 옵저버패턴, 등 많은 디자인패턴들을 정리해서 올릴예정입니다. 이번 페이지의 목표는 모듈패턴을 사용하는 이유와 모듈패턴의 예시, 마지막으로 모듈패턴의 사용방법에 대해서 정리해 보겠습니다. 모듈패턴의 키워드는 두개입니다. 독립된함수자체적인 변수와 함수(비공개 변수)모듈패턴의 사용이유와 예시 모듈(module)은 전체 어플리케이션의 일부를 독립된 코드로 분리해 놓은 것입니다. 자바스크립트를 사용하다보면 수많은 전역변수를 사용합니다. 사용을 하다보면, 전역 유효범위가 어지럽게 되는 문제가 발생 할..

See the Pen 제이쿼리 - Show by 최대한 (@sheldhe) on CodePen. 제이쿼리의 장점중 하나는 애니메이션을 구현하기 쉽고 , 많은 오픈소스가 있는 것 같습니다. 평소에도 제이쿼리를 많이 쓰지않을려고 노력하지만, 종종 쓸 수 밖에없는 환경에 놓여 사용합니다. 이번에도 종종 사용하지만 정리가 안되어있는 제이쿼리 show에 대한 기능을 정리 하겠습니다. 사용 하기 위해서 제이쿼리 ui라이브러리가 필요하여 CDN으로 사용하였습니다. https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js 코드펜 사용법을 모르거나 자세히 배우고 싶으시면 아래 링크를 확인해주세요. 2018/07/18 - [Site & Program ..

평소 개발을 할때 ES6를 사용 할 수 있는 환경이 되어서 ES6 문법을 더 효율적으로 사용을 하려고 하지만, 습관이 되어 버린 문법 습관과 제이쿼리를 사용하는 환경으로 많이 사용 하지 않게 됩니다. 그래서 조금더 왜 더 ES6가 효율적이고 편한지 알기 위해서 정리를 해보려고 합니다. 가장먼저, 변수선언에 대해서 정리를 해보겠습니다. 기존 자바스크립트와 다른 ES6의 Keyword는 varconstletscopeHoisting첫번째 var은 자바스크립트에서 쓰는 변수 선언 방법입니다. 그리고 const와 let은 ES6에서 사용하는 변수 선언 입니다. 각각의 변수선언은 차이가 있는데 차이점과 예시를 통해서 설명을 하겠습니다. var예제 See the Pen var 변수선언예제 by 최대한 (@sheldh..