# CustomEvent

hyeminpak

Event 추가 , 제거 .addEventListener() 대상에 이벤트 청취(Listen)을 등록합니다. 대상에 지정한 이벤트가 발생했을때 지정한 함수(handler)가 호출됩니다. .removeEventListener() 대상에 등록했던 이벤트 청취(Listen)를 제거합니다. 메모리 관리를 위해 등록한 이벤트를 제거하는 과정이 필요할수도 있습니다. 이벤트객체 이벤

krkorklo58

서론 기존 프로젝트의 구조 우리 프로젝트의 핵심은 워크스페이스(화이트보드)이다. figjam처럼 사용자들이 포스트잇을 붙이거나 드로잉을 할 수 있는 기능이 핵심이다. 워크스페이스 구조는 간단하게 위와 같다. canvas와 canvas와의 상호작용을 담당하는 컴포넌트를 모아둔 layout으로 구성되어있다 Canvas(화이트보드) 컴포넌트에서는 Fabric.js canvas와 실시간 화이트보드 공유를 위한 socket 로직을 처리하는 custom hook들이 동작한다. 그리고 layout은 header와 Toolkit 컴포넌트가 포함되어 있다. Toolkit에서는 Canvas에 어떤 오브젝트를 놓고 어떤 상호작용을 할 것인지 결정할 수 있는 기능을 제공한다. header는 현재 참여중인 사용

ahncheer

● 부모 컴포넌트에서 자식 컴포넌트로 데이터 이동하기 1) 부모 컴포넌트 코드 작성 ※ lwc008ParentPage.html > item={var1} 이 데이터를 보내는 코드입니다. 위의 코드처럼 여러개의 데이터를 보낼 수 있습니다. 이 때 item1, item2, item3이라는 값은 child의 js에서 @api를 사용해 선언해야 합니다. ※ lwc008ParentPage.js ※ lwc008ParentPage.css lwc008ParentPage.js-meta.xml 생략 2) 자식 컴포넌트 코드 작성 ※ lwc009ChildPage.html ※ lwc009ChildPage.js ※ lwc009ChildPage.css 3) 결과 확인 ![](https://velog.velcdn.com/images/ahncheer/post/43618b87-aa13-462e-aeb5-50

aimzero9303

이전 문제점) > 📌 이전 props의 문제점 - 참고 자식 컴포넌트(ModalWindow.vue)인 모달창 컴포넌트에 존재하는 닫기버튼을 눌렀을 시, 부모 컴포넌트(App.vue)의 modalOpen값이 false가 되어야만 닫을 수 있었다. 하지만 props로 자식컴포넌트에게 받은 modalOpen값이기 때문에 데이터를 수정하지 못했는데 이러한 문제를 해결해주는 방법이 존재한다! 간단 문법 ) 자식 컴포넌트 ) 예제1 ) $emit()이라는 것을 사용하면 부모 컴포넌트로 데이터를 보내줄 수 있다. ( )안의 문법은 $emit('만든 커스텀이벤트 이름', 보낼 데이터)이다. 또는 함수로 빼서 이렇게 해줄 수도 있다. 예제2 ) 부모 컴포넌트 ) @openModal이라는 emit으로 보냈던 커스텀 이

shawnhansh

나는 훌륭한 백엔드 개발자가 될 예정이지만 원활한 협업을 위해서라도 기본적인 프론트엔드 지식은 필요하다고 생각한다. 감사히도 이전 직장에서 3개월간 혹독하게 갈려나가며 여러 프로젝트를 수행했고,, 그 과정에서 퍼블리싱 되어있는 jsp에 javascript로 Ajax를 통한 비동기 서버 통신과 응답 데이터에 따라 DOM을 조작하는 함수들을 만들며 프론트엔드 경험을 해보았다. 하지만 소위 말하는 프론트엔드 프레임워크 3대장(React, Vue, Angular)에 대한 지식이 하나도 없었기 때문에 “저 프론트엔드도 조금은 할 줄 알아요"라는 말을 하기가 부끄러웠다. 그래서 지난 2월부터 조금씩 Vue.js를 공부중이다! Vue.js를 선택한 이유 중 하나는 세 프레임워크 중 빠르게 배워서 빠르게 적용하기

yhko1992

예전 KDT에서 바닐라 JS로 라우팅하는 법을 배웠는데 MovieApp을 만들면서 적용하게 되었다. 우선 알아야 할 문법은 아래와 같다 customEvent dispatchEvent history API 보통 우리가 알고 있는 이벤트는 built in event이다. click, input, submit 같은것 말이다. 그러나 우리가 직접 이벤트를 만들고 데이터를 전송할 수 있다. 이벤트 커스텀 하기 new CustomEvent와 dispatchEvent를 사용하려면 우선 addEventListener를 이용해서 customEvent에 들어갈 첫번째 인자(이벤트 이름)를 listen한 상태로 만들어야 한다. 일종의 CustomEvent를 받아들일 준비를 하는 과정이다. 그리고 CustomEvent를 만들어서 dispatch하면 CustomEvent가 fired된다! 또한 버블링도 가능하다. 그럼, 부모에 eventListener를 걸어놓고 자식에서 d

yooon26

강의를 들으며 실습하던 중 새롭게 알게된 것들에 대해 써보려고 한다. 웹 API를 이용해 이벤트 지연시키기 이벤트가 발생될 때마다 결과값을 인자로 해서 onEditing함수가 실행된다. 로컬에 저장되는 것은 onEditing함수 실행 후 2000ms후에 되게 한다. 500ms이 지나기 전에 이벤트가 발생해 함수가 또 실행되면 clearTimeout을 이용해 전에 등록해놓은 setTimeout을 취소한다. 500ms이 될 때까지 함수가 다시 실행되지 않으면 등록된 setTimeout함수가 실행된다. Custom Event만들기 부모-자식간의 상태를 계속 물려주지 않아도, 루트 컴포넌트에 Custom Event리스너를 달아주면, 하위 컴포넌트 어디에서 Custom Event가 발생하더라도 루트 컴포넌트에서 바로 처리할 수 있게 된다. 생성 detail이라는 프로퍼티를 추가해 커스텀 이벤트 관련 정보를 명시하고, 정