Web/Javascript20 [javaScript] 반응성 (Reactivity) 자바스크립트의 반응성(reactivity) 에 대해 알아보자. 기본적으로 변수의 동작은 접근과 할당으로 되어있음 var a = 1; //값 할당 a; // 접근 a = 2; //값 재할당 이 개념으로 Object.defineProperty () 를 사용해보자. Object.defineProperty () 는 객체의 속성을 재정의 (접근과 할당시 동작을 정의) 해주는 자바스크립트 내장 객체이다. Object.defineProperty(대상 객체, 객체의 속성, { //정의할 내용 }); 간단하게 콘솔창에서 테스트 해보자 var a = {}; Object.defineProperty(a, 'str', { // getter 역할을 한다. 속성에 접근했을 때 동작하는 코드를 구현 get: function(){ c.. 2020. 6. 11. [javascript]이벤트 위임(event delegation) JS 이벤트 위임 left right 위와 같은 DOM구조에서 각 버튼 클릭시 이벤트가 발생하길 원할 때 const btns = document.querySelectorAll('.btn'); function btnClick(){ console.log(this); } for(let i = 0; i < btns.length; i++){ btns[i].addEventListener("click", btnClick); } //for문이 싫다면 btns[0].addEventListener("click", btnClick); btns[1].addEventListener("click", btnClick); ... 위 코드처럼 각 버튼에 이벤트리스너를 달아주면 된다. 하지만 위 처럼 버튼이 조금밖에 없는.. 2020. 6. 11. [JS - Plugin] Scroll Masic 라이센스 : [MIT] License 공식문서 : http://scrollmagic.io/docs ScrollMagic Documentation Quicklinks: About | Download | Installation | Usage | Help | Compatibility | Author | License | Thanks ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll scrollmagic.io 한눈에 보는 Cheat Sheet 스크롤매직을 제대로 활용하려면 doc문서를 참고.. 2019. 12. 13. [javascript] 이벤트 핸들러 1번만 적용하고 제거하기 기본적인 이벤트 핸들러의 선언 및 제거방법 //실행 될 이벤트 function test(){} 이벤트 핸들러 선언 element.addEventListener("click", test); 이벤트 핸들러 제거 element.removeEventListener("click", test); 익명함수를 콜백으로 쓰게 될 경우엔 element.addEventListener("click", function(){ test(); // 선언한 클릭이벤트가 전부 제거 되어버림 this.removeEventListener("click"); // arguments.callee 를 사용하면 원하는 이벤트만 제거 this.removeEventListener("click",arguments.callee); }); 활용 예) 비디오.. 2019. 12. 12. [javascript] 브라우저 IE 감지 ie 브라우저로 접속 시에만 결과값이 보인다. 크로스브라우징 이슈가 있을 경우 브라우저 판단 후 body태그에 class를 추가해주면 css 작업시 편해진다. See the Pen IE 감지 by juein (@juein) on CodePen. 2019. 12. 12. [javascript] 자주 사용하는 정규식 메모 자주 쓰는 정규식 //숫자 3단위마다 콤마 찍기 var numberWithCommas= function(num){ return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } // 아이디 체크 정규식 const regExpId = /^[a-z0-9_-]\w{5,20}$/; // 비밀번호 길이 체크 정규식 const regExpPassword = /^\w[6,16]$/; // 비밀번호 조합(영문, 숫자) 및 길이 체크 정규식 const regExpPassword = /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,16}$/; // 이메일 체크 정규식 const regExpEmail=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.).. 2019. 10. 7. 이전 1 2 3 4 다음
