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 08. 이벤트 위임 📌 8-1 이벤트 전파란? 이벤트가 생성된 시점에서 이벤트의 전파 과정으로 3가지 과정인 캡처링, 타깃, 버블링 과정으로 구분된다. 캡처링: 상위 요소에서 발생한 이벤트가 하위 요소 방향으로 전파되는 과정 타깃: 실제로 이벤트가 발생한 대상 버블링: 하위 요소에서 발생한 이벤트가 상위 요소 방향으로 전파되는 과정 📌 8-2 이벤트 전파 과정 각각의 자식과 부모 태그 요소에 이벤으를 등록해서 ... 이벤트 전파이벤트 위임DOMEventDOM [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 4. Event Handling camelCase로 이벤트 이름 작성 이벤트 실행 시 js 코드가 아닌 함수 형태의 값/객체 전달 DOM 요소에만 이벤트 설정 가능 div, button, input,form, span 등 DOM 요소에 event 설정 가능 직접 만든 자체적 컴포넌트에는 이벤트 설정 불가능 : doSomething 함수 실행 X, 그냥 이름이 OnClick인 것을 전달 받음 전달 받은 props를 컨포넌트 ... ReactEventEvent [React] 5. 이벤트 핸들링 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달해야 한다. DOM 요소에만 이벤트를 설정할 수 있다. 👉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 생성한 컴포넌트에는 이벤트를 설정할 수 없다. 1.2.1 onChange 이벤트 핸들링 EventPractice 컴포넌트에 input 요소를 렌더링 하... eventhandlerEventEvent [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 Event 알아보기 Event Type / 이벤트 타입 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다. = 이벤트 종류 Event specification / 이벤트 명세 이벤트 들의 종류가 늘어남에 따라 3가지 기준으로 나누어져 정의되고 있다. DOM Level 3 이벤트 명세 HTML5 관련 이벤트 명세 이벤트 리스너를 등록시키는 방법은 두 가지가 있다. 1) 이벤트... EventJavaScriptEvent TIL | Props & Event 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. Props 객체 위에서 props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 했다. 클래스형 컴포넌트에서 props, 즉 컴포넌트의 속성은 다음과 같이 정의한다. titleColor의 값으로 th... EventTILReactPropsEvent [JavaScript] form태그와 button 태그의 관계 Form태그 안의 Button 태그를 이용해 axios를 이용하는 함수를 불러 서버와 통신을 진행할 때, 같은 요청이 여러번 발생하는 문제가 있다. 이는 Form태그 내부의 Button의 기본 동작이 submit으로 작동하기 때문인데, 이를 막기 위한 방법은 두가지가 있다. 1. 버튼 태그의 타입 지정하기 submit을 하지 않는 타입으로 버튼의 타입을 지정해주면 된다. 2. 이벤트 버블링 ... EventJavaScripthtmlaxiosEvent [JavaScript] 두번째, DOM & Event HTML의 DOM을 통해 자바스크립트는 HTML 파일의 모든 요소에 접근할 수 있고 요소들을 수정할 수 있다. 1. document.getElementById 태그에 있는 id 속성을 사용하여 해당 태그에 접근하는 함수이다. 주어진 id와 일치하는 DOM 요소를 나타내는 Element 객체를 반환하거나 만약 해당하는 id 를 가진 태그가없을경우 null 에러가 발생한다. 2. document... EventDOMJavaScriptDOM 스크롤 이벤트 intercept 보통 스크롤 뷰 안에 스크롤 뷰를 넣을때 사용합니다. 부모의 스크롤 뷰에게 이벤트를 뺏기지 않고 자식의 스크롤 뷰에서 이벤트를 소비하고 싶을때 사용하며 parent.requestDisallowInterceptTouchEvent(true)로 주어 이벤트를 뺏기지 않게 막을 수 있습니다. 해당 메서드를 실행하면 자식 스크롤 뷰 이전까지 dispatchTouchEvent() = false로 설정되... EventtouchrequestDisallowInterceptTouchEventinterceptandroidkotlinEvent [WEB API] Event target 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스 생성자 EventTarget() 새로운 event객체 인스턴스를 만듦 메소드 addEventListener() 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정 removeEventListener() 이전에 EventTarget.addEventListener()로 Eve... EventDOMwebDOM
[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 08. 이벤트 위임 📌 8-1 이벤트 전파란? 이벤트가 생성된 시점에서 이벤트의 전파 과정으로 3가지 과정인 캡처링, 타깃, 버블링 과정으로 구분된다. 캡처링: 상위 요소에서 발생한 이벤트가 하위 요소 방향으로 전파되는 과정 타깃: 실제로 이벤트가 발생한 대상 버블링: 하위 요소에서 발생한 이벤트가 상위 요소 방향으로 전파되는 과정 📌 8-2 이벤트 전파 과정 각각의 자식과 부모 태그 요소에 이벤으를 등록해서 ... 이벤트 전파이벤트 위임DOMEventDOM [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 4. Event Handling camelCase로 이벤트 이름 작성 이벤트 실행 시 js 코드가 아닌 함수 형태의 값/객체 전달 DOM 요소에만 이벤트 설정 가능 div, button, input,form, span 등 DOM 요소에 event 설정 가능 직접 만든 자체적 컴포넌트에는 이벤트 설정 불가능 : doSomething 함수 실행 X, 그냥 이름이 OnClick인 것을 전달 받음 전달 받은 props를 컨포넌트 ... ReactEventEvent [React] 5. 이벤트 핸들링 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값을 전달해야 한다. DOM 요소에만 이벤트를 설정할 수 있다. 👉 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 생성한 컴포넌트에는 이벤트를 설정할 수 없다. 1.2.1 onChange 이벤트 핸들링 EventPractice 컴포넌트에 input 요소를 렌더링 하... eventhandlerEventEvent [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 Event 알아보기 Event Type / 이벤트 타입 발생한 이벤트의 종류를 나타내는 문자열로, 이벤트 명(event name)이라고도 한다. = 이벤트 종류 Event specification / 이벤트 명세 이벤트 들의 종류가 늘어남에 따라 3가지 기준으로 나누어져 정의되고 있다. DOM Level 3 이벤트 명세 HTML5 관련 이벤트 명세 이벤트 리스너를 등록시키는 방법은 두 가지가 있다. 1) 이벤트... EventJavaScriptEvent TIL | Props & Event 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체 props를 통해 부모 컴포넌트로부터 자식 컴포넌트에게 state의 상태값, event handler를 넘겨줄 수 있다. Props 객체 위에서 props는 부모 컴포넌트로부터 전달 받은 데이터를 지니고 있는 객체라고 했다. 클래스형 컴포넌트에서 props, 즉 컴포넌트의 속성은 다음과 같이 정의한다. titleColor의 값으로 th... EventTILReactPropsEvent [JavaScript] form태그와 button 태그의 관계 Form태그 안의 Button 태그를 이용해 axios를 이용하는 함수를 불러 서버와 통신을 진행할 때, 같은 요청이 여러번 발생하는 문제가 있다. 이는 Form태그 내부의 Button의 기본 동작이 submit으로 작동하기 때문인데, 이를 막기 위한 방법은 두가지가 있다. 1. 버튼 태그의 타입 지정하기 submit을 하지 않는 타입으로 버튼의 타입을 지정해주면 된다. 2. 이벤트 버블링 ... EventJavaScripthtmlaxiosEvent [JavaScript] 두번째, DOM & Event HTML의 DOM을 통해 자바스크립트는 HTML 파일의 모든 요소에 접근할 수 있고 요소들을 수정할 수 있다. 1. document.getElementById 태그에 있는 id 속성을 사용하여 해당 태그에 접근하는 함수이다. 주어진 id와 일치하는 DOM 요소를 나타내는 Element 객체를 반환하거나 만약 해당하는 id 를 가진 태그가없을경우 null 에러가 발생한다. 2. document... EventDOMJavaScriptDOM 스크롤 이벤트 intercept 보통 스크롤 뷰 안에 스크롤 뷰를 넣을때 사용합니다. 부모의 스크롤 뷰에게 이벤트를 뺏기지 않고 자식의 스크롤 뷰에서 이벤트를 소비하고 싶을때 사용하며 parent.requestDisallowInterceptTouchEvent(true)로 주어 이벤트를 뺏기지 않게 막을 수 있습니다. 해당 메서드를 실행하면 자식 스크롤 뷰 이전까지 dispatchTouchEvent() = false로 설정되... EventtouchrequestDisallowInterceptTouchEventinterceptandroidkotlinEvent [WEB API] Event target 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스 생성자 EventTarget() 새로운 event객체 인스턴스를 만듦 메소드 addEventListener() 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정 removeEventListener() 이전에 EventTarget.addEventListener()로 Eve... EventDOMwebDOM