Event
-
[Vue.js] 컴포넌트(Component), Props & EventFront-End(Web)/Vue 2021. 5. 26. 21:04
이번에는 비교적 친숙한! 뷰의 컴포넌트 개념에 대해 알아보고자 한다. React와 마찬가지로 화면을 구성하는 요소이다. 현대의 모던 프레임워크들은 대부분 컴포넌트 개념을 차용하고 있기 때문에 뷰 역시 이를 기반으로 하고 있는 것 같다. 컴포넌트와 관련된 개념과 영상이 많기 때문에 포스팅 분량이 길어지고 몇 부분으로 나눠질 것 같다. * 이 글은 캡틴판교님의 Vue.js 강의 및 블로그를 기반으로 학습한 내용을 정리하고 있습니다. 💚 Vue 컴포넌트 React와 마찬가지로 화면을 영역 단위로 쪼개서, 재사용 가능한 코드로 캡슐화하는 개념이다. 뷰에서 컴포넌트를 등록하는 방법은 2가지가 있다. 전역 등록, 지역 등록이 바로 그것들이다. - 전역 컴포넌트 // 전역 컴포넌트 Vue.component('컴포넌트..
-
[React] 공식문서 학습(문서) : 주요 개념Front-End(Web)/React - 프레임워크(React, Next) 2021. 4. 28. 18:25
🧐 서론 문서의 첫 시작이었던 설치는 아무래도 개발보다는 전반적인 소개에 가까웠다. 이 주요개념을 공부하는 것이 React를 시작하며 허술했던 기반을 다져줄 수 있을거라 기대된다! (분량이 많다면 나누어야할듯) 💙 설치 1. Hello World ReactDOM.render( Hello, world!, document.getElementById('root') ); 모든 언어와 프레임워크를 시작하면 "Hello World" 출력이 첫 걸음이다. 이 역시, React의 가장 기본적인 조작으로 "Hello, world!" 글귀의 제목 엘리먼트(혹은 요소, 태그 등) 를 렌더링한 모습이다. 2. JSX 소개 const element = Hello, world!; React 컴포넌트가 반환해야 할 형태이며, 이는..
-
[Javascript] 이벤트(Event)Front-End(Web)/Javascript 2021. 3. 16. 13:56
React의 이벤트에 대해 포스팅하면서, Javascript에서의 이벤트 핸들링과 흐름, 관련된 개념들 역시 정리할 필요성이 있었다. Javascript 관련된 내용을 분리했으며, 이를 토대로 이벤트 위임까지 한번 정리해보도록 하겠다. 📒 Event Handling React 합성 이벤트의 다양한 attribute들을 알아보면서, 이벤트가 기본적으로 어떻게 브라우저에서 감지되고 전파되는지 공부할 필요를 느꼈다. 그래야, bubbles의 개념이나, eventPhase의 각 페이즈를 이해할 수 있겠다고 생각했다. 1. 이벤트 핸들링(Handling) 이벤트는 마우스 클릭이나 키보드 입력같이 일반적으로 사용자가 행하는 모든 동작을 일컫는다. 이러한 이벤트를 원하는데로 처리하는것을 이벤트 핸들링 이라고 한다. ..
-
[React.js] SyntheticEvent(합성 이벤트)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:44
프로젝트를 진행하며 마우스 이벤트를 정리한다는게... 이벤트 공부로 판이 커져버렸다 😀😀 React 공식문서는 지원 이벤트를 "합성 이벤트" 개념과 함께 소개했고, 합성 이벤트를 공부하던 차에 이벤트 핸들링과 연계는 필연적이었기 때문이다. 이번 포스팅은, e(합성 이벤트)에 대해 자세히 공부하고, React가 지원하는 이벤트 종류를 한번 훑어보고자 한다! * 포스팅 : React 이벤트 핸들링(abangpa1ace.tistory.com/128) 📒 합성 이벤트(SyntheticEvent) 란? SyntheticEvent는 객체로 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper 객체이다. 대부분의 인터페이스는 브라우저 고유 이벤트와 같다. * 소프트웨어에서 래핑(Wrapping) 이란, 기..
-
[React.js] Event Handling(이벤트 처리)Front-End(Web)/React - 프레임워크(React, Next) 2021. 3. 15. 06:25
React에서 컴포넌트를 만들면서, 다양한 이벤트와 연계해야되는 경우가 많이 발생한다. (클릭, input change 등) 특히, 이번 3차 프로젝트를 하면서, Navbar 메뉴들의 마우스 오버가 바뀔때마다 표현되는 서브메뉴가 달라지도록 만들어야했고, 여기에 하강 애니메이션까지 추가되야했다. 이를 구현하기 위해, React의 mouse 이벤트 종류와 차이점을 제대로 공부하는 기회가 되었고, 이벤트에 관한 포스팅 필요성을 느꼈다. 📒 이벤트 처리하기 React 요소의 이벤트 핸들링은 DOM에 대한 이벤트 핸들링과 매우 유사하다. 하지만, 아래와 같은 차이점은 있다. 이벤트 명을 소문자가 아닌 cammelCase로 작성한다. onclick(x) => onClick(o) 이벤트 핸들러를 문자열이 아닌 함수로..