JavaScript

JS 이벤트 위임

이벤트 리스너를 지정하는 요소가 많으면 많을수록 페이지의 실행 속도는 느려집니다. 그래서 효율적으로 이벤트를 관리하기 위해서 이벤트의 흐름을 이용합니다. 이벤트는 이벤트가 발생한 엘리먼트를 포함하고 있는 부모 요소에도 영향을 미치기 때문에 자식 요소를 포함할 수 있는 요소에 이벤트 핸들러를 지정하고 이벤트의 흐름을 이용해 다룰 수 있습니다. 즉, 이벤트 리스너가 실행할 작업을 요소의 부모 요소에게 위임(Delegation)할 수 있다는 것입니다. 이벤트 위임의 장점들 동적으로 추가되는 요소들에도 동작한다. DOM트리에 새로운 요소를 추가하더라도 이벤트에 대한 처리는 부모 요소에게 위임되었기 때문에 새로운 요소에 이벤트 핸들러를 다시 지정할 필요가 없다. 코드의 간결 이 기법을 이용하면 함수를 많이 작성할..

꼭! 알아야하는 JavaScript 최신문법 (ES6, ES11) 사용법 정리 (2)

이번 포스팅에서는 자주 쓰이는 ES11 최신 문법 사용법에 대해 알아보겠습니다. 이전 포스트 자주쓰는 ES6 문법 사용법 정리(1) ES11 2020 Optional chainning Nullish coalescing operator 들어가기에 앞서 ES6 이후부터 추가된 많은 문법들이 익스플로러에서는 지원되지 않기 때문에 Babel을 이용해야 합니다. 1. Optional chainning const person1 = { name: 'dan', job: { title: 'Engineer', manager: { name: 'Bob', }, }, }; const person2 = { name: 'Bob' } // 💩💩💩💩 { function printManager(person) { console.log(p..

JavaScript 값, 식, 문,Primitive Type & Reference Type

목차 Variable Expression Statement Primitive Type & Reference Type 참고자료 Variable : 변수 식의 결과를 잡아두거나 이용하거나 꺼내쓰길 바랄 때 사용하는 것이 변수다 식은 값으로 귀결되고 변수는 값을 넣을 수 있다. 중요 용어: assignment : 할당 assignment 특징: 자바스크립트에서 할당은 우항의 값으로 귀결된다. Quiz : Variable에 Statement를 assignment 할 수 있을까 ? answer : No! 이유는 Statement(문) 이란건 컴파일러가 '힌트' 를 받아서 해석한 다음에 사라지기 때문에 변수에 넣을 수 없다. 변수에 들어갈 수 있는 것은 오직 'Expression(식)'..

Array의 여러가지(filter, map, reduce, sort, ...) 메소드를 활용해보자.

진행과정 const inventors = [ { first: 'Albert', last: 'Einstein', year: 1879, passed: 1955 }, { first: 'Isaac', last: 'Newton', year: 1643, passed: 1727 }, { first: 'Galileo', last: 'Galilei', year: 1564, passed: 1642 }, { first: 'Marie', last: 'Curie', year: 1867, passed: 1934 }, { first: 'Johannes', last: 'Kepler', year: 1571, passed: 1630 }, { first: 'Nicolaus', last: 'Copernicus', year: 1473, pa..