자바스크립트 (11) 썸네일형 리스트형 How to avoid repeating addEventListener? 3개의 버튼이 존재하고 버튼을 클릭했을 때 각 버튼은 내용이 다른 모달이 열릴 수 있도록 코드를 작성하려고했다. 그런데 addEventListener가 한번 정의되지 않고 여러 번 정의가 되서 버튼을 클릭했을 때 여러번 작동되는 문제가 발생했다. 문제를 분석해 보니 이벤트 리스너는 이벤트에 대해 등록될 때마다 새로운 객체로 생성됐다. 즉, n번 등록된 리스너의 래퍼런스는 모두 다 달라 중복 처리가 안되고 있었다. 시도1 addEventListener 중복을 피하는 핵심은 추가하기 전에 removeEventListener에 의해 추가된 처리 기능을 제거하는 것이다. const $btn = document.getElementById('btn'); function clickHandler() { console... Function.prototype.bind() 함수 메소드 call, apply, bind는 첫번째 매개 변수로 this 값을 명시적으로 지정할 수 있다는 공통점이 있다. 단, bind는 call, apply와 달리 새로운 함수를 반환한다는 특징이 있다. 변수 할당 후 재호출, setTimeout 적용하여 사용할 수 있다. 사라진 'this' let user = { firstName: "Irene", sayHi() { alert(`Hello ${this.firstName}`); } } setTimeout(user.sayHi, 1000); // Hello undefined setTimeout 메서드는 인수로 전달받은 함수를 호출할 때 this에 window를 할당한다. 따라서 위 예시의 this.firstName은 window.firstName이 되는.. Jquery UI draggable creates a whitespace 팝업을 오른쪽으로 드래그하면 흰색 공간이 생성되는 버그를 발견했다. 원인을 분석해보니 팝업이 overflow가 되기때문에 CSS issue 라는 것으로 이해했다. modal popup 구현 순수 자바스크립트로 modal popup을 구현해보려고 합니다. 기능 요구사항 1. "open modal" 버튼을 누르면 팝업이 뜬다. 2. "X" 버튼을 누르면 팝업이 닫힌다. 3. 팝업 이외 부분을 누르면 닫힌다. 4. 팝업 안을 눌렀을 때 닫히면 안된다. index.html open modal 팝업 제목 팝업 내용 123 팝업 내용 123 팝업 내용 123 팝업 내용 123 팝업 내용 123 .body-blackout은 모달 바탕화면이고, modal보다 z-index가 낮게 만들 예정이다. 즉, .body-blackout 위로 modal을 띄운다. style.css html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit.. script 태그의 async와 defer 속성 defer script는 다운로드와 실행이 순차적으로 진행되는 것과 달리 브라우저가 defer 속성을 가진 script를 만났을 때 다운로드를 시작하고 html 파싱을 막지 않는다. 을 만났을 때 실행된다. 의 맨 마지막 줄에 작성하는 것과 같이 스크립트가 DOM을 조작하는 내용을 포함하는 것이 좋다. 참고: https://caniuse.com/?search=defer "defer" | Can I use... Support tables for HTML5, CSS3, etc IntersectionObserver API that can be used to understand the visibility and position of DOM elements relative to a containing elemen.. Javascript’s __proto__ vs prototype 1. __proto__란? person 이라는 객체는 아래와 같이 name, age 그리고 gender 속성을 가지고 있습니다. let person = { name: "Nil", age: 18, gender: "male" } console.dir을 이용해서 person 객체를 호출하면 __protp__ 속성을 확인 할 수 있습니다. __proto__ 속성은 디폴트 속성으로 객체마다 다 생성됩니다. 이 __proto__속성은 prototype 객체를 향해 가르키고 있습니다. 그러므로 person객체의__proto__ 속성은 Object.prototype 방향으로 가르키고있습니다. person.__proto__ === Object.prototype >> true teacher이라는 객체를 생성합니다. 앞서 .. 생성자 함수의 객체 생성 객체를 생성하는 여러 방법 중에 객체 리터럴 사용하면 직관적이고 사용하기에 간편하지만 단 하나의 객체 생성만 가능하다는 단점이 있기에 ( 동일한 프로퍼티를 사용하는 여러 객체를 만들 경우 비효율적이다. ) 생성자 함수를 통해서 이러한 단점을 극복할 수 있다. new 연산자와 생성자 함수를 호출하면 자바스크립트 엔진은 암묵적으로 빈 객체를 생성하고 이렇게 생성된 객체를 인스턴스라고 한다. function Circle(radius) { this.radius = radius; this.getDiameter = function() { return 2*this.radius; }; } const circle1 = new Circle(5); const circle2 = new Circle(10); console.lo.. 함수 객체의 프로퍼티 함수는 객체다. 그러므로 함수는 프로퍼티를 가질 수 있다. 브라우저 콘솔에서 console.dir 메서드를 사용하여 함수 객체의 내부를 들여다 볼 수 있다. 함수 객체의 name 프로퍼티는 ES5 와 ES6에서 동작을 달리한다. ES5에서는 익명함수인 경우 빈 문자열을 값으로 갖는다. 하지만 ES6에서는 함수 객체를 가르키는 식별자를 값으로 갖는다. 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다. 자바스크립트는 함수의 매개변수와 인수의 개수가 일치하는지 확인하지 않는다. 함수가 호출되면 함수 몸체 내에서 암묵적으로 매개변수가 선언되고 undefined로 초기화 된 이후 인수가 할당된다. 함수의 매개변수보다 인수의 개수가 적은.. 이전 1 2 다음
