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 최신문법 (ES6, ES11) 사용법 정리 (1)

이번 포스팅에서는 자주 쓰이는 JS 최신 문법 사용법에 대해 알아보겠습니다. 다음 포스트 자주쓰는 ES11 문법 사용법 정리(2) ~ES6 2015 Shorthand property names Destructuring assignment Spread syntax Default parameters Ternary Operator Template Literals 1. Shorthand property names const person = { name: 'dev_min', age: '19', } javascript 에서 object는 항상 key와 value로 이루어져 있습니다. const name = 'dev_min'; const age = '19'; const person1 = { name: name, ag..

JavaScript 30 Drum Kit 정리

요구사항 KeyBoard 입력을 받아 애니메이션 효과와 Drum 소리가 출력되게 vanilla JS를 이용해서 구현한다 기본 소스코드 A clap S hihat D kick F openhat G boom H ride J snare K tom L tink 처리과정 & 코드분석 keydown 이 될때마다 로그를 찍어 봤음 keydown 됐을 때 실행할 익명함수 작성 evnet를 찍었을 때 keyCode 속성이 나옴 data-key를 이용함, event.keyCode 속성을 이용하여 동적으로 타겟을 잡음 key, audio 변수에 할당함 const audio = document.querySelect(`audio[data-key="${e.keyCode}"]`); const key = document.queryS..

CSS Variables

요구사항 css에서 변수를 사용하여 값을 설정 해보고 javascript로 css를 동적으로 컨트롤 해보자. 기본 소스코드 Update CSS Variables with JS Spacing: Blur: Base Color 처리과정 & 코드분석 css에서 :root 가상클래스에 변수를 추가해 주었다. (:root 에 추가해주는 것이 모든 요소에 변수를 정의하는 데에 도움이 된다.) 커스텀 속성 정의 부분 (--* 패밀리) :root { --base: #ffc600; --spacing: 10px; --blur: 10px; } img태그에 선언한 변수들을 이용해서 값을 설정함 캐스케이딩 변수 사용 부분 (var()함수) img { padding: var(--spacing); background: var(--b..

CSS + JS Clock 정리

요구 사항 CSS 와 JavaScript를 이용하여 시,분,초 를 각각 동적으로 움직이게 구현한다. 기본 소스코드 html { background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=5); background-size: cover; font-family: 'helvetica neue'; text-align: center; font-size: 10px; } body { margin: 0; font-size: 2rem; display: flex; flex: 1; min-height: 100vh; align-items: center; } .clock { width: 30rem; height: 30rem; border: 20px s..

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..