Event [WEB] 느림의 미학 - Debounce, Throttle 프론트엔드 시점에서 웹사이트를 느리게 만드는 상황은 돌이켜봤을 때 이 정도가 생각난다. 네트워크 지연 - 아무리 비동기 처리를 한다고 해도 로딩이 길면 어쩔 수 없다. 무거운 이벤트 핸들러 - scroll, resize, keyup을 할 때마다 네트워크가 호출된다면.. 이 외에도 수많은 상황이 존재하겠지만, 이번 글에서는 마지막으로 언급한 무거운 이벤트 핸들러를 처리하기 위한 방법에 대해 다... debounceEventJavaScriptfrontendthrottleEvent [TIL] 이벤트(Event) 이벤트 등록은 아래처럼 addEventListner() 메서드를 이용해서 가능하다. handler: 이벤트가 발생하면 실행될 콜백, 이벤트가 발생한 정보를 알리는 Event 객체만을 유일한 인자로 가진다. options: 이벤트의 특징을 정하는 객체, 아래의 프로퍼티를 가진다. once: true일 경우 이벤트가 트리거 되면 자동으로 리스너가 삭제된다. 이벤트가 최상위 요소부터 시작하여 타깃... JavaScriptTILEventEvent [TIL] 프론트엔드 Day 20 이벤트 우리는 DOM Element에 addEventListener를 사용해 특정 이벤트가 발생할 때, 어떻게 처리할 것인지 이벤트 핸들러를 등록할 수 있다. 만약 핸들러가 등록된 element에 이벤트가 발생하면, 브라우저는 이벤트에 관련된 세부 내용들을 Event Object에 넣어 핸들러에 전달한다. 이벤트 페이즈 DOM tree의 최상위 요소부터 이벤트가 발생한 target eleme... event delegationJavaScriptTILEventEvent 07. 이벤트 💡 호출하는 함수를 이벤트 핸들러라고 한다. 📌 7-2 이벤트 타입이란? 이벤트의 종류를 나타내며 마우스 이벤트, 폼 이벤트, 키보드 이벤트, 문서 이벤트, CSS 이벤트 등등이 있다. 📃 많이 사용하는 이벤트 목록 마우스 이벤트 이벤트 타입 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 마우스 커서를 요소 위에서 움직일 때 마우스 커서가 요소 밖으로... DOMEventDOM 08. 이벤트 위임 📌 8-1 이벤트 전파란? 이벤트가 생성된 시점에서 이벤트의 전파 과정으로 3가지 과정인 캡처링, 타깃, 버블링 과정으로 구분된다. 캡처링: 상위 요소에서 발생한 이벤트가 하위 요소 방향으로 전파되는 과정 타깃: 실제로 이벤트가 발생한 대상 버블링: 하위 요소에서 발생한 이벤트가 상위 요소 방향으로 전파되는 과정 📌 8-2 이벤트 전파 과정 각각의 자식과 부모 태그 요소에 이벤으를 등록해서 ... 이벤트 전파이벤트 위임DOMEventDOM 자바의 Event(이벤트) Event Source (이벤트 발생지) 버튼, 체크박스, 프레임 등과 같은 컴포넌트들을 건드리거나 그 위에서 동작했을 때 이벤트가 일어나는 컴포넌트 Event Listener (이벤트 감지기) 이벤트 소스에서 이벤트가 발생하는지 감독하고 있다가 발생할 즉시 이벤트를 처리할 수 있도록 만든 인터페이스 Event Handler (이벤트 처리기) 실제로 이벤트를 처리하는 코드를 가지고 있으며 이... guiJavaEventEvent 이벤트 버블링과 캡처링, 위임 (1) 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 이벤트가 발생하면 브라우저는 이벤트 객체(event object) 라는 것을 만든다. event.type event.currentTarget 화살표 함수를 사용해 핸들러를 만들거나 다른 곳에 바인딩하지 않은 경우엔 this가 가리키는 값과 같음, 화살표 함수를 사용했거나 함수를 다른 곳에 바인딩한 경... JavaScriptEventEvent [CS] DOM Day-18 DOM JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다. id : practice class : highlight, red 내용 : Here is one Element 자식 엘리먼트 : span (2개) ex) console.log 입력시 ex) console.dir 입력시 속성에 대한 값들을 ... textContentchildrenbuttonInnerHTMLchildrenNodesdirEventlogDom 조작value 등록이벤트DOMelementgetInputValueDOM 리액트 처음부터 다시하기.5 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이번엔 새롭게 추가한 mode와 welcome state를 추가했다. 다음 이미지를 보기전 중요한 사실!! State 가 변경되면 reender 함... ReactState조건문EventEvent Vue event 수식어 Vue에서 이벤트를 다룰 때 v-on 디렉티브를 사용합니다. 이번 포스트는 v-on 디렉티브에 제공되는 수식어(modifier)에 대해 자세히 알아보겠습니다. Vue에서 preventDefault()란... 위 캡처는 vue 공식문서 내 이벤트 수식어를 소개하는 문단입니다. JS로 프론트 개발을 하다보면 event를 다룰 일이 많고 그에따라 preventDefault(), stopPropag... vueEventEvent [JS] 이벤트 버블링, 캡쳐링, 위임 이벤트 버블링은 특정 이벤트가 발생했을 때 해당 이벤트가 상위 요소들까지 전달되는 것을 의미한다. 모든 div에 해당 div를 클릭하면 클래스 이름을 alert창으로 뜨게 하는 이벤트를 등록했다. click me 버튼을 클릭하면 div3라는 alert 창만 떠야할 것 같지만 실제로 버튼을 클릭해보면, alert 창이 세 개가 다 뜨는 걸 볼 수 있다. 위와 같은 일이 일어나는 이유 click... JavaScriptEventEvent [iOS] Hit Test Hit test는 사용자 event가 발생할 때 view 계층(hierarchy)에서 subview들을 탐색(traverse)하며 event를 처리할 view를 결정하는 과정이다. 아래 그림은 touch event가 발생했을 때 event를 처리할 view를 결정하는 과정을 보여준다. View 계층의 root view(UIWindow)부터 시작하여 touch point를 포함하는 subvie... iOSEventEvent TIL : Event(버블링, 캡쳐,위임)란!? 브라우저는 어떻게 화면 내의 특정 이벤트를 감지할까?? 또 감지한 이벤트를 어떻게 다른 화면에 전파할까?? 우리는 addEventListener()를 사용하여 사용자의 입력에 따른 추가적인 동작들을 구현할 수 있다. 이벤트 버블링이란, 특정 화면 요소에서 발생한 이벤트가 상위 요소까지 전달되는 현상을 말한다. 마지막 div에서 발생한 이벤트가 버블링을 통하여 body까지 전달되는 현상을 이벤... EventJavaScriptEvent
[WEB] 느림의 미학 - Debounce, Throttle 프론트엔드 시점에서 웹사이트를 느리게 만드는 상황은 돌이켜봤을 때 이 정도가 생각난다. 네트워크 지연 - 아무리 비동기 처리를 한다고 해도 로딩이 길면 어쩔 수 없다. 무거운 이벤트 핸들러 - scroll, resize, keyup을 할 때마다 네트워크가 호출된다면.. 이 외에도 수많은 상황이 존재하겠지만, 이번 글에서는 마지막으로 언급한 무거운 이벤트 핸들러를 처리하기 위한 방법에 대해 다... debounceEventJavaScriptfrontendthrottleEvent [TIL] 이벤트(Event) 이벤트 등록은 아래처럼 addEventListner() 메서드를 이용해서 가능하다. handler: 이벤트가 발생하면 실행될 콜백, 이벤트가 발생한 정보를 알리는 Event 객체만을 유일한 인자로 가진다. options: 이벤트의 특징을 정하는 객체, 아래의 프로퍼티를 가진다. once: true일 경우 이벤트가 트리거 되면 자동으로 리스너가 삭제된다. 이벤트가 최상위 요소부터 시작하여 타깃... JavaScriptTILEventEvent [TIL] 프론트엔드 Day 20 이벤트 우리는 DOM Element에 addEventListener를 사용해 특정 이벤트가 발생할 때, 어떻게 처리할 것인지 이벤트 핸들러를 등록할 수 있다. 만약 핸들러가 등록된 element에 이벤트가 발생하면, 브라우저는 이벤트에 관련된 세부 내용들을 Event Object에 넣어 핸들러에 전달한다. 이벤트 페이즈 DOM tree의 최상위 요소부터 이벤트가 발생한 target eleme... event delegationJavaScriptTILEventEvent 07. 이벤트 💡 호출하는 함수를 이벤트 핸들러라고 한다. 📌 7-2 이벤트 타입이란? 이벤트의 종류를 나타내며 마우스 이벤트, 폼 이벤트, 키보드 이벤트, 문서 이벤트, CSS 이벤트 등등이 있다. 📃 많이 사용하는 이벤트 목록 마우스 이벤트 이벤트 타입 요소 위에서 마우스 왼쪽 버튼을 눌렀을 때 요소 위에서 마우스 오른쪽 버튼을 눌렀을 때 마우스 커서를 요소 위에서 움직일 때 마우스 커서가 요소 밖으로... DOMEventDOM 08. 이벤트 위임 📌 8-1 이벤트 전파란? 이벤트가 생성된 시점에서 이벤트의 전파 과정으로 3가지 과정인 캡처링, 타깃, 버블링 과정으로 구분된다. 캡처링: 상위 요소에서 발생한 이벤트가 하위 요소 방향으로 전파되는 과정 타깃: 실제로 이벤트가 발생한 대상 버블링: 하위 요소에서 발생한 이벤트가 상위 요소 방향으로 전파되는 과정 📌 8-2 이벤트 전파 과정 각각의 자식과 부모 태그 요소에 이벤으를 등록해서 ... 이벤트 전파이벤트 위임DOMEventDOM 자바의 Event(이벤트) Event Source (이벤트 발생지) 버튼, 체크박스, 프레임 등과 같은 컴포넌트들을 건드리거나 그 위에서 동작했을 때 이벤트가 일어나는 컴포넌트 Event Listener (이벤트 감지기) 이벤트 소스에서 이벤트가 발생하는지 감독하고 있다가 발생할 즉시 이벤트를 처리할 수 있도록 만든 인터페이스 Event Handler (이벤트 처리기) 실제로 이벤트를 처리하는 코드를 가지고 있으며 이... guiJavaEventEvent 이벤트 버블링과 캡처링, 위임 (1) 이벤트(event)란 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다. 이벤트가 발생하면 브라우저는 이벤트 객체(event object) 라는 것을 만든다. event.type event.currentTarget 화살표 함수를 사용해 핸들러를 만들거나 다른 곳에 바인딩하지 않은 경우엔 this가 가리키는 값과 같음, 화살표 함수를 사용했거나 함수를 다른 곳에 바인딩한 경... JavaScriptEventEvent [CS] DOM Day-18 DOM JavaScript를 이용해 Element 속성값을 얻어내거나, 변경하는 방법 HTML문서의 구조와 관계를 객체(Object)로 표현한 모델입니다. id : practice class : highlight, red 내용 : Here is one Element 자식 엘리먼트 : span (2개) ex) console.log 입력시 ex) console.dir 입력시 속성에 대한 값들을 ... textContentchildrenbuttonInnerHTMLchildrenNodesdirEventlogDom 조작value 등록이벤트DOMelementgetInputValueDOM 리액트 처음부터 다시하기.5 이때까지 state 에 저장된값에 따라 component의 상태를 바꾸거나, props를 통해 자식 component에게 state값을 전달하는 방식을 알아보았다.. 이번엔 특정조건에 맞춰 state값이 변경되면 결과물이 바뀌는 과정을 알아보자. 이번엔 새롭게 추가한 mode와 welcome state를 추가했다. 다음 이미지를 보기전 중요한 사실!! State 가 변경되면 reender 함... ReactState조건문EventEvent Vue event 수식어 Vue에서 이벤트를 다룰 때 v-on 디렉티브를 사용합니다. 이번 포스트는 v-on 디렉티브에 제공되는 수식어(modifier)에 대해 자세히 알아보겠습니다. Vue에서 preventDefault()란... 위 캡처는 vue 공식문서 내 이벤트 수식어를 소개하는 문단입니다. JS로 프론트 개발을 하다보면 event를 다룰 일이 많고 그에따라 preventDefault(), stopPropag... vueEventEvent [JS] 이벤트 버블링, 캡쳐링, 위임 이벤트 버블링은 특정 이벤트가 발생했을 때 해당 이벤트가 상위 요소들까지 전달되는 것을 의미한다. 모든 div에 해당 div를 클릭하면 클래스 이름을 alert창으로 뜨게 하는 이벤트를 등록했다. click me 버튼을 클릭하면 div3라는 alert 창만 떠야할 것 같지만 실제로 버튼을 클릭해보면, alert 창이 세 개가 다 뜨는 걸 볼 수 있다. 위와 같은 일이 일어나는 이유 click... JavaScriptEventEvent [iOS] Hit Test Hit test는 사용자 event가 발생할 때 view 계층(hierarchy)에서 subview들을 탐색(traverse)하며 event를 처리할 view를 결정하는 과정이다. 아래 그림은 touch event가 발생했을 때 event를 처리할 view를 결정하는 과정을 보여준다. View 계층의 root view(UIWindow)부터 시작하여 touch point를 포함하는 subvie... iOSEventEvent TIL : Event(버블링, 캡쳐,위임)란!? 브라우저는 어떻게 화면 내의 특정 이벤트를 감지할까?? 또 감지한 이벤트를 어떻게 다른 화면에 전파할까?? 우리는 addEventListener()를 사용하여 사용자의 입력에 따른 추가적인 동작들을 구현할 수 있다. 이벤트 버블링이란, 특정 화면 요소에서 발생한 이벤트가 상위 요소까지 전달되는 현상을 말한다. 마지막 div에서 발생한 이벤트가 버블링을 통하여 body까지 전달되는 현상을 이벤... EventJavaScriptEvent