JavaScript/모던 자바스크립트 튜토리얼 (8) 썸네일형 리스트형 커스텀 이벤트 디스패치 https://ko.javascript.info/dispatch-events 커스텀 이벤트 디스패치 ko.javascript.info 커스텀 이벤트는 그래픽 컴포넌트를 만들 때 사용됩니다. 자바스크립트 기반 메뉴가 있다고 가정해봅시다. 개발자는 메뉴의 루트 요소에 open(메뉴를 열었을 때 실행됨), select(항목을 선택했을 때 실행됨)같은 이벤트를 달아 상황에 맞게 이벤트가 실행되게 할 수 있습니다. 이렇게 루트 요소에 이벤트 핸들러를 달아놓으면 바깥 코드에서도 이벤트 리스닝을 통해 메뉴에서 어떤 일이 일어났는지를 파악할 수 있습니다. 자바스크립트를 사용하면 새로운 커스텀 이벤트 뿐만 아니라 목적에 따라 click, mousedown 같은 내장 이벤트를 직접 만들 수도 있습니다. 이렇게 만든 내장 .. 문서 수정하기 문서 수정하기 ko.javascript.info 요소 생성하기 DOM 노드를 만들 때 사용하는 메서드는 두 가지 입니다. document.createElement(tag) 태그 이름(tag)를 사용해 새로운 요소 노드를 만듦. let div = document.createElement('div) document.createTextNode(text): 주어진 텍스트를 사용해 새로운 텍스트 노드를 만듦 let textNode = document.createTextNode('안녕하세요.'); 개발을 할 땐 위 예시(메시지가 들어가는 div)처럼 주로 요소 노드를 만들게 됩니다. // 1. 요소 만들기 let div = document.createElement('div'); // 2. 만든 요소의 클래스를 'a.. call/apply와 데코레이터, 포워딩 https://ko.javascript.info/call-apply-decorators call/apply와 데코레이터, 포워딩 ko.javascript.info 자바스크립트는 함수를 다룰 때 탁월한 유연성을 제공합니다. 함수는 이곳 저곳 전달될 수 있고, 객체로도 사용될 수 있습니다. 함수간의 호출을 어떻게 포워딩(forwarding)하는지, 함수를 어떻게 데코레이팅(decorating)하는지에 대해 알아봅니다. 코드 변경 없이 캐싱 기능 추가하기 CPU를 많이 잡아먹지만 결과는 안정적인 함수 slow(x)가 있다고 가정해봅시다. 결과가 안정적이라는 말은 x가 같으면 호출 결과도 같다는 것을 의미합니다. slow(x)가 자주 호출된다면, 결과를 어딘가에 저장(캐싱)해 재연산에 걸리는 시간을 줄이고 싶을.. DOM 탐색하기 DOM 탐색하기 ko.javascript.info DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다. 하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 합니다. DOM에 수행하는 모든 연산은 document 객체에서 시작합니다. document 객체는 DOM에 접근하기 위한 '진입점'이죠. 진입점을 통과하면 어떤 노드에도 접근할 수 있습니다. 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. = document.documentElement document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 태그에 해당하는 document.documentE.. getElement*, querySelector*로 요소 검색하기 document.getElementById 혹은 id를 사용해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용하여 접근할 수 있습니다. Element 그런데 아래와 같이 id 속성 값을 그대로 딴 전역 변수를 이용해 접근할 수도 있습니다. Element 그런데 이렇게 요소 id를 따서 자동으로 선언된 전역 변수는 동일한 이름을 가진 변수가 선언되면 무용지물이 됩니다. 따라서 id를 따서 만들어진 전역 변수를 요소 접근시 사용하면 안됩니다. id에 대응하는 전역변수는 명세서의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작입니다. 브라우저는 스크립트의 네임 스페이스와 DOM의 네임 스페이스를 함께 사용할.. iterable 객체 반복 가능한(iterable, 이터러블)객체는 배열을 일반화한 객체입니다. 이터러블이라는 개념을 사용하면 어떤 객체에든 for...of 반복문을 적용할 수 있습니다. 배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복 가능합니다. 문자열 역시 이터러블의 예입니다. 배열이 아닌 객체가 있는데, 이 객체가 어떤 것들의 컬렉션(목록, 집합등)을 나타내고 있는 경우 for...of 문법을 적용할 수만 있다면 컬렉션을 순회하는데 유용할 것입니다. Symbol.iterator 직접 이터러블 객체를 만들어 이터러블이라는 개념을 이해해 보도록 합시다. for...of를 적용하기에 적합해 보이는 배열이 아닌 객체를 만들겠습니다. 예시의 객체 range는 숫자 간격을 나타내고 있습니다. let range.. 모던 자바스크립트 튜토리얼 | 이벤트 위임 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다. 예제를 살펴봅시다. 다음은 고대 중국 철학에서 유래한 팔괘도입니다. HTML은 대략 다음과 같습니다. Bagua Chart: Direction, Element, Color, Meaning Northwest Metal .. 모던 자바스크립트 튜토리얼 | 버블링과 캡처링 버블링 버블링(bubbling)은 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다. 거의 모든 이벤트는 버블링이 됩니다. focus이벤트와 같이 버블링이 되지 않는 이벤트도 있습니다. event.target 부모 요소의 이벤트 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.targ.. 이전 1 다음
