VueJS에서 부모와 자식 컴포넌트 사이에 데이터를 서로 주고 받는 양방향 바인딩(Two way binding) 방법에 대하여 알아봅니다.먼저 컴포넌트 사이의 데이터를 주고 받는 방법은 여러가지가 있습니다. 전역 데이터를 사용하거나, 이벤트버스(EventBus), Vuex 아니면 Props를 사용할 수도 있죠. 여기서 Props를 사용하는 방법이 많이 사용되는데요 ~! Props를 사용한 컴포넌트간의 데이터 전송방법부모, 자식 컴포넌트 사이에 Props를 사용하면 부모에서 자식으로 데이터를 전송할 수 있지만 반대로 자식에서 부모로 전달할 수 없는 문제가 생깁니다. 그럼 어떻게하면 해결할 수 있는지 아래에서 알아봅니다.(참고사항. Vue 2 이전에는 props를 사용하여 동일한 스코프 모델명을 사용하면 서로 양방향 데이터 전송이 가능했다고 합니다. 하지만 Deprecated 되어 현재는 불가능합니다.)# 부모 자식 컴포넌트 Props 사용시 양방향 바인드 구현하기그럼 예제를 하나 만들
2019-04-04 13:57:18웹페이지에서 버튼이나 어떤 엘리먼트를 반드시 직접 클릭하지 않고도 클릭 이벤트를 동작하는 방법이 있습니다. 제이쿼리의 경우 trigger() 메소드가 있는데요 ~ 자바스크립트에서 구현할 경우 어떻게 하면 동작하는지 알아보겠습니다.제이쿼리 trigger() 바로가기 >https://webisfree.com/2014-01-03/[jquery]-이벤트의-강제-실행-커스텀-이벤트-trigger()# 자바스크립트 클릭하지 않고 클릭 이벤트 동작하기이처럼 마치 클릭한 것처럼 이벤트를 동작 시키는 방법인 가상 클릭 방법을 알아보겠습니다. 이 방법은 크게 두 가지가 있는데 하나는 click()을 사용하는 것이고 다른 하나는 createEvent()를 사용하여 커스텀이벤트를 만드는 방법입니다.1. click() 사용하기2. createEvent() 커스텀 이벤트 만들기먼저 click()을 사용하는 방법입니다.! click()을 사용하여 클릭 이벤트 동작시키기click()은 DOM에 적용하는 내장
2019-02-15 01:32:41VueJS에서 클릭 이벤트를 동작하는 방법에 대하여 알아봅니다.클릭 이벤트는 가장 기본적인 이벤트 방법입니다. 여러가지 인터페이스에서 사용되어 빈도가 매우 높아 꼭 알아둬야 합니다. 그렇다면 클릭이벤트는 어떻게 사용할까요?# VueJS 클릭이벤트 만들기VueJS에서 클릭 이벤트를 만들 경우 해당하는 태그 엘리먼트에 아래의 속성을 설정합니다. 두 가지 모두 동일하며 @는 줄여쓰는 방법으로 v-on 디렉티브를 의미합니다.@clickv-on:click여기서 v-on:의 의미는 VueJS에서 이벤트를 바인드한다는 뜻입니다. 즉 설정된 이벤트의 콜백함수를 호출하게 되죠. 만약 v-on:click="showMsg();" 라는 코드가 있다면 ~ showMsg() 함수를 호출할 것입니다. 그렇다면 간단한 예제를 보겠습니다. 예를들어 만약 버튼을 클릭시 openNew()라는 새로운 함수를 호출할 경우 아래와 같이 작성할 수 있습니다.<button v-on:click="openNew"></butto
2018-12-04 18:19:48VueJS에서 컴포넌트 상호간 데이터를 주고 받을 수 있는 이벤트버스(EventBus)를 알아봅니다. 이벤트버스는 무엇이고 언제 왜 사용할까요?# VueJS의 EventBus란VueJS의 eventBus는 앱 내부에서 컴포넌트 사이아 부모 자식 사이에 데이터를 주고 받을 수 있는 방법 중 하나인데요 매우 많이 사용됩니다. 그 이유는 기본적으로 props를 사용하여 부모와 자식 사이의 데이터를 전달하기 때문에 해당 컴포넌트의 스코프에 제한되죠. 하지만 이 방법은 부모와 자식 컴포넌트는 물론 최상위 루트 컴포넌트나 다른 컴포넌트와의 데이터도 주고 받을 필요가 있습니다. 이럴때 유용하게 사용할 수 합니다.(데이터를 주고 받는 방법으로 props 속성이 가장 많이 사용됩니다. 하지만 부모에서 자식 사이라는 범위 때문에 아주 먼 컴포넌트 사이는 EventBus 또는 Vuex를 사용할 수 있습니다.)요약하면 VueJS EventBus를 사용하면 아래와 같은 장점이 있습니다.전역으로 데이터
2018-12-03 17:12:52만약 VueJS를 사용하여 마우스 오버 이벤트(MouseOver)를 구현하려면 어떻게하는지 아래에서 자세히 알아봅니다."마우스 오버는 마우스가 특정 요소의 위에 있을때 발생하는 이벤트입니다."아래는 VueJS에서 mouseover 이벤트의 구현방법으로 모두 동일하게 함수 doMouseOver를 호출합니다.@ mouseover.vue<button v-on="mouseover: doMouseOver">Click Me</button><button @mouseover="doMouseOver">Click Me</button>methods: { doMouseOver: function() { // ... };}위에서 사용된 button은 각각 v-on과 @mouseover를 사용하였습니다. 각각 알아보면...v-on은 특정 요소의 props로 사용하면서 이벤트를 사용하는 기본적인 방법입니다. v-on을 사용하면 mouseover외에도 여러 이벰트를 동작시킬 수 있습니다.다음으로 아래 예
2018-09-19 17:37:14자바스크립트의 이벤트 중에서 키를 계속 누르는 경우의 이벤트 제어 방법을 알아봅니다. 이 방법은 마우스에서도 동일하게 동작시킬 수 있습니다. 어떻게하면 가능할까요?예를들어 클릭하면 숫자가 올라가는 요소가 있는 경우를 생각해봅니다. 일반적인 클릭 이벤트에서는 클릭을 계속 누르면 숫자가 하나 올라갈 것입니다. 만약 숫자가 0에서 100을 선택할 경우... 100번 클릭해야하겠죠? 이 방법이 아닌 키를 계속 누를 경우 계속해서 숫자가 올라간다면? 더욱 편한 방법일 것입니다. 아래는 키를 계속 누르는 경우의 이벤트 구현 방법에 대하여 알아봅니다.# 마우스 또는 키보드를 계속 누르는 이벤트 구현하기먼저 이벤트를 동작하게 하는 트리거에는 클릭은 있지만 클릭중?이라것은 없습니다. 그런 이유로 직접 클릭이 계속되고 있음을 구현해야합니다. 하지만 생각해보면 간단하게 구현할 수 있습니다. 그 이유는 클릭을 하는 동작이 나누어져 있기 때문입니다. 이벤트 트리거에는 아래와 같이 구분됩니다.1. keydo
2018-06-01 14:11:01자바스크립트의 이벤트 중 클릭한 요소를 가져오는 방법으로 event 객체의 target 또는 currentTarget 프로퍼티를 사용합니다. 이때 이 둘의 차이점은 무엇이고 어떤 경우에 무엇을 사용해야하는지 알아봅니다.event.targetevent.currentTarget# 둘의 차이점은?event.target은 이벤트버블링의 가장 마지막에 위치한 최하위의 요소를 반환합니다. 즉 클릭된 요소를 기준으로 사용하는 경우 event.target을 사용합니다. 하지만 event.currentTarget의 경우 이벤트가 바인딩된 요소, 해당하는 요소를 반환합니다. 아래 에제를 봐주세요.<div onclick="checkTarget();"> <span>test</span></div>아래는 스크립트 코드입니다.function checkTarget(event) { var ele = event.currentTarget; console.log(ele);}만약 사용자가 div 내부의 span 태
2017-09-06 05:31:32마우스 우측버튼은 웹에서 잘 사용되지 경우가 없지만 백오피스, 관리자 페이지 등에 사용하면 매우 편리한 UI를 제공할 수 있습니다. 만약 오른쪽 버튼을 자바스크립트를 사용하여 제어할 필요가 있는 경우라면? 어떻게 사용할까요? 그리고 어떤 부분을 생각해봐야하는지 알아봅니다.먼저 아래는 마우스 우측버튼 클릭에 따른 이벤트 호출 방법에 대하여 자세하게 알아봅니다.# 마우스 우측버튼 이벤트 구현시 고려할 점먼저 웹에서 우측 버튼 클릭을 사용하려면 가장 먼저 두 가지 사항에 대하여 생각해볼 필요가 있습니다.우측 버튼시 이벤트 호출 방법브라우저 기본 이벤트 막는 방법마우스 우측버튼을 사용하기 위해서 이벤트 바인딩에 mousedown을 사용할 수 있습니다. mousedown 이벤트를 등록하면 좌측 또는 우측 버튼 클릭시 모두 이벤트가 동작하게 됩니다. 이 경우 아래와 같이 스크립트를 작성합니다.# 마우스 우측버튼 이벤트 등록하기아래 스크립트는 자바스크립트를 사용한 이벤투 구현방법입니다.docum
2017-09-06 05:08:02입력폼 ~ 서버에 값을 전달하거나 호출하는 경우 input 태그에서 엔터를 누를 경우 의도하지 않은 submit이 일어나는 경우 이를 막기위한(prevent) 방법을 알아봅니다.먼저 input 태그의 wrapper 태그로 form의 여부를 확인합니다. form 태그가 없는 경우에는 엔터키가 동작하지 않으므로 이를 빼는 것이 가장 빠른 방법입니다.i. form 태그를 제거하기> 수정 이전<form> <input type="text" /> </form>> 수정 이후 (form 태그를 div로 변경)<div> <input type="text" /> </div>ii. keydown이벤트 추가 후 엔터키 이벤트 제거하기다른 방법으로 엔터키 발생시 preventDefault()를 추가합니다.- 모든 엘리먼트에 적용하기document.addEventListener('keydown', function(event) { if (event.keyCode === 13) { e
2017-08-07 09:07:38자바스크립트 event.stopPropagation() 사용하는 방법은?# event.stopPropagation() 사용하기자바스크립트에서 stopPropagation() 메서드는 event 객체의 버블링을 제거해줍니다. event.defaultPrevent()와 함께 매우 자주 사용되는 중요한 메서드입니다.여기서 event 버블링이란 이벤트가 연속하여 발생하는 버블 현상을 의미합니다. 이벤트는 이벤트캡쳐링과 이벤트버블링으로 나타나는데 클릭이 발생한 경우를 예로들면 클릭 시점에 해당 위치에서 이벤트가 발생하고 발생하고 다시 겹쳐진 요소를 올라가면서 해당 엘리먼트의 이벤트를 다시 발생시키는 현상을 의미합니다.이 경우 의도하지 않은 두 번째 이벤트가 추가로 발생하여 오류가 발생할 수 있습니다. 이를 피하기 위한 방법으로 event.stopPropagation()을 사용하며 이 경우 이벤트 버블링은 Firing 하지 않아 이벤트가 발생되지 않습니다.# event.stopPropagati
2017-05-19 19:57:38제이쿼리의 이벤트 메서드 중 하나인 click()의 반대되는 unclick()이 존재할까요?이벤트를 추가한 경우 제거해야할 상황이 있습니다. 특히 비동기식 페이지에서는 페이지 전환이 이뤄지지 않아 메모리 leak이 발생할 수 있기 때문이죠. 그렇기 때문에 실제로 이벤트는 on(), off()를 사용하여 이벤트를 바인딩고 언바인딩합니다. 그래야 성능 및 메모리 이슈가 없겠죠 ~ 그렇다면 이런 메서드 없이 click()을 사용한 경우라면 ??? 어떻게 unbinding 할 수 있을까요? 아래 예제라면...$('button').click(function() { alert();});위 코드는 아래처럼 unclick() 이 존재한다면 언바인딩 가능하겠죠~ 즉 이벤트를 제거할 수 있겠죠!$('button').unclick();그럼 실제로 unclick()이 존재할까요?# unclick()은 존재할까요의 답변예전 제이쿼리 1.1 이전의 버전에서 존재하였던 메서드입니다. 하지만 on(), off
2017-04-29 15:53:53다른 스코프로 이벤트를 전달하기 위하여 $emit, $broadcast를 사용하고 $on 이벤트로 다른 스코프 영역에서 전달 받을 수 있습니다.이때 이벤트의 이름은 어떻게 정하는 것이 이해하기 쉽고 좋은 이름 명일까요?참고로 아래글은 $emit, $broadcast를 사용하여 전달하는 방법입니다.http://webisfree.com/blog/?titlequery=%EB%B2%94%EC%9C%84-scope-emit-broadcast-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0# 효과적인 이벤트 이름현재위치 - 이벤트의 대상 - 상태값위와 같은 방법도 괜찮을 것 같습니다. 예를들어...만약 사용자가 로그인하였을 경우 이를 다른 scope에 전달하려면 다음과 같이 이벤트 이름을 짓고 전달합니다.login-myUser-loggedIn더 나은 방법은 뭘까요?
2017-04-27 16:18:35자바스크립트에서 스크롤 이벤트를 구현하는 방법입니다.document.addEventListener('scroll', function() { ...});document 또는 window에 addEventListener를 사용해야 동작합니다. 스크롤 이벤트는 body 등에 바로 적용하면 동작하지 않을 수 있습니다.'wheel'document.addEventListener('wheel', function() { ...});적은 이벤트를 발생함
2017-04-27 02:49:11안녕하세요^^자바스크립트를 사용한 이벤트 사용에 대하여 알아보고자합니다. 먼저 자바스크립트에서 말하는 이벤트는 무엇일까요?# 자바스크립트 이벤트자바스크립트에는 정해진 동작 또는 계획에 의하여 이벤트를 발생시킬 수 있습니다. 이 이벤트는 미리 등록한 콜백함수를 실행하게 되는데 자바스크립트에 사용 가능한 이벤트 트리거.. 예를들어 아래의 행동에 의하여 동작할 수 있습니다.클릭 click더블클릭 dbclick마우스오버 mouseover마우스아웃 mouseout드래그 dragstart타임아웃 setTimeout타임인터벌 setInterval등등등 ...그 외에도 여러가지 이벤트를 동작할 수 있습니다. 이런 이벤트는 대부분 키보드, 마우스, 태블릿 등의 디바이스를 조작하는 것들이 대부분 이지만 게임패드나 리더기 등등에 반응하는 이벤트도 있다는 점을 참고하세요.? 트리거(trigger); 트리거는 말 그대로 방아쇠입니다. 방아쇠를 당겨야 총이 발사하는 것처럼 이벤트는 트리거를 통해 비로서 시작
2017-04-18 10:18:33AngularJS에서 자바스크립트를 사용하여 ng-click 또는 관련 디렉티브를 태그 요소인 DOM에 직접 추가하였을 경우 이벤트가 동작하지 않습니다. 어떻게 해야할까요?# $compile을 사용하기$compile 서비스를 사용하면 ng-click 등의 추가된 이벤트에 바인딩하는 것이 가능합니다. 아래와 같이 $compile을 수행합니다.var element = $('<button ng-click="close();">Close</button>');document.body.appendChild(element[0]);$compile(element)($scope);위 예제소스는 ng-$compile 수행 후 ng-click 이벤트가 정상적으로 동작하는 것을 보여줍니다.
2017-04-13 20:06:32CKEDITOR 만약 keyup 클릭 이벤트가 동작 안하는 경우 해결법은 무엇일까요?클릭이벤트가 동작 안하는 경우가 발생하여 여러가지 테스트 해보았으나 안된느 경우가 발생하였습니다. 이때 해결방법으로 keyup 대신 change 이벤트로 변경하는 방법이 있습니다. 변경 후 잘 동작하였습니다.CKEDITOR.instances.editor.on('change', function(e) { alert();})어디가 문제인지는 확실치 않으나 플러그인에 문제가 있을 수도 있으므로 확실한 원인 찾기가 어렵더군요.
2017-04-13 11:29:31CKEDITOR에서 keyup 클릭 이벤트는 어떻게 사용하나요?# CKEDITOR에서 Keyup 이벤트 사용하기만약 textarea 태그의 name 속성이 testEditor인 경우 아래와 같이 코드를 작성합니다.CKEDITOR.instances.testEditor.on('keyup', function(e) { alert();})keyup이벤트가 동작하게 됩니다.
2017-04-13 11:26:44자바스크립트를 사용하여 스크롤 이벤트 실행시 한번이 아닌 연속해서 발생하는 문제가 나타날 수 있습니다. 예를들어 스크롤을 내릴 경우 추가적인 콘텐츠를 불러오는 경우 ~ 의도하지 않게 AJAX 코드가 한 번이 아닌 여러 번 발생할 수 있습니다...그렇다면 스크롤 할 경우 여러번이 아닌 한 번만 발생하는 방법 무엇일까요?scrollStart;clearTimeout(scrollStart)clearTimeout을 통해 이벤트 발생을 제어합니다.
2017-04-07 11:19:13자바스크립트의 이벤트 중 resize는 페이지 사이즈가 바뀌면 계속해서... 일반적으로 픽셀단위로 발생합니다. 만약 연속해서 발생하지 않도록 하는 방법은 무엇이 있을까요?가장 간단한 방법으로 clearTimeout을 활용하는 방법이 있습니다. 아래의 코드를 봐주세요.# resize 이벤트 연속해서 발생하지 않는 방법아래와 같이 예제를 작성해보았습니다.var resizeTimeout;clearTimeout(resizeTimeout);resizeTimeout = setTimeout(function() { Code}, 150);위 코드는 clearTimeout을 사용하여 만약 resizeTimeout이 존재하는 경우 clear... 즉 제거합니다. 그 이유로 150ms 이전에는 이벤트가 발생하지 않도록 하는 방법입니다.여기서 주의할 부분이 있다면...resizeTimeout은 전역에 선언되거나 접근이 가능하여야 합니다. 만약 그렇지 않은 경우 clearTimeout이 해당
2017-04-06 17:16:24angularjs에서 흔히 볼 수 있는 이벤트 메소드로 $destory를 볼 수 있습니다. 이때 이벤트가 동작하는 로직 그리고 언제 이를 사용하는지 알려주세요.# destroy 예제소스 보기scope.$on('$destroy', function() { alert('Destroy!!');});$destroy를 호출하여 이벤트를 제거하는 것은 일반적인 경우에는 필요가 없지만 다른 Angular가 아닌 다른 라이브러리, 순수 자바스크립트에 의하여 추가된 이벤트 등을 정상적으로 메모리에서 제거하기 위한 방법으로 사용됩니다.
2017-03-21 15:49:14
