<div id="readability-page-1" class="page"><article id="article-show-container" data-article-id="1221228" data-article-slug="vuejs-3-ibenteu-bbeo-seu-ajc" data-author-id="201866" data-author-name="Ukjin Yang" data-author-username="composite" data-co-author-ids="" data-path="/composite/vuejs-3-ibenteu-bbeo-seu-ajc" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false">
        <header id="main-title">
            <p><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--TPnzW3UP--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7v3n2dx0aqn20kcxqal4.png" width="1000" height="420" alt="Cover image for Vue.js 3 이벤트 뻐-스">
            </p>

          <div>
                <p><a href="/composite"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--i7tYDRmB--/c_fill,f_auto,fl_progressive,h_50,q_auto,w_50/https://dev-to-uploads.s3.amazonaws.com/uploads/user/profile_image/201866/5014b724-95d6-43af-8561-79a14911a196.png" width="40" height="40" alt="Ukjin Yang"></a>
                </p>
                
              </div>
        </header>

        <div data-article-id="1221228" id="article-body">
            <p>내가 살다살다 이딴 포스트 하나 쓰려고 포토샵까지 꺼내들게 하다니...</p>

<p>SI 아니랄까봐 2022년 Vue 에서 밀고있는 Pinia 도 안쓰고<br>
아 그래 너무 최신 기술이라 거부감 느낀다 쳐.<br>
아니, 하다못해 오랫동안 SI에서 잘만 쓰고 있는 Vuex조차도 안 쓰고...<br>
뭐? 이벤트 버스???</p>

<p>Vue 3 에다가 이벤트 버스???</p>
<h2>
  <a name="%EC%A7%95%ED%95%98%EB%8B%A4" href="#%EC%A7%95%ED%95%98%EB%8B%A4">
  </a>
  징-하다.
</h2>

<p>그래... 그래서 만들었다.<br>
Composition API 시대에 예전 <code>new Vue()</code> 못 쓰니...<br>
하지만 <code>ref()</code> 및 <code>reactive()</code> 사용법을 알면 그리 어렵지 않게 만들 수 있다.<br>
그리고 이걸 전역으로 돌아가도록 하는 게 핵심 포인트.</p>





<p>자, 여기 코드가 있다.<br>
코멘트 주우 늘어진 건 너희들 자동완성하기 좋으라고 해준 거니 감사히 여겨라.</p>

<p>좋아. 원리를 설명해주지.</p>

<p>초기화는 그저 컴포넌트 스크립트 <code>setup()</code> 함수 및 <code>&lt;script setup&gt;</code> 태그 내용 안에서 준비한 함수 <code>useEventBus()</code> 만 호출하여 상수에 담으면 준비 끝!</p>
<h3>
  <a name="-raw-on-endraw-" href="#-raw-on-endraw-">
  </a>
  <code>on</code>
</h3>

<p>이벤트명이 키인 객체가 메인이다. 그리고 그 속성들은 이렇다.<br>
당연하겠지만 콜백은 여러개 있을 수 있으니, 이를 배열로 담아둔다.<br>
그리고 <code>trigger</code> 속성에 이벤트 발생 시 속성을 변경하여 반응형을 유도하기 위해 <code>ref</code> 함수를 사용한다.<br>
그리고 이 <code>trigger</code> 속성에 대한 변경을 감지할 <code>watch</code> 함수를 정의하여, 이를 <code>stopper</code> 에 정의하는데, 왜 <code>stopper</code>를 정의하냐면, <code>watch</code> 함수를 호출하면 반환하는 값이 이 <code>watch</code> 작업을 중지하기 위해 호출할 수 있는 함수를 반환하기 때문이다. 이에 대해 다음 메소드에 후술하겠다.</p>
<h3>
  <a name="-raw-emit-endraw-" href="#-raw-emit-endraw-">
  </a>
  <code>emit</code>
</h3>

<p>이벤트 리스너를 만들었으면, 이제 발생을 시켜야겠지? <code>emit</code> 메소드를 통해 이벤트를 발생시키도록 유도하면, 이벤트명 키를 찾아 이 안에 있는 <code>trigger</code> 속성에 있는 <code>ref</code> 객체의 값을 변경시켜 반응을 유도한다, 객체 값을 변경시키면, <code>watch</code> 함수 콜백이 발동하는데, 변경한 값을 인자로 받아 배열 내에 있는 모든 콜백을 호출하게 된다.<br>
그렇게 되면 같은 이벤트명을 <code>A.vue</code>에 정의해도, <code>B.vue</code>에 정의하면 모두 호출하게 된다.</p>
<h3>
  <a name="-raw-off-endraw-" href="#-raw-off-endraw-">
  </a>
  <code>off</code>
</h3>

<p>하지만 이벤트를 추가했으면 삭제도 필요하겠지?<br>
이런 상황을 위해 준비한 게 바로 <code>off</code> 메소드다.<br>
뭐 별거 없다. 이벤트명과 함수명 넣으면 이벤트 안에 함수 날라가고,<br>
함수 없이 이벤트명만 넣으면 이벤트 콜백은 다 사라지게 된다.<br>
이 때, 이벤트 콜백이 사라질 때가 바로 핵심인데,<br>
이벤트 콜백이 사라질 때도 <code>watch</code> 함수가 동작하는 것은 낭비다.<br>
따라서 준비해둔 <code>stopper</code> 속성에 담긴 해제 함수를 호출하여 정리하는 것이다.<br>
간단하지?</p>
<h2>
  <a name="%ED%95%B4%EA%B2%B0%ED%95%B4%EC%95%BC-%ED%95%A0-%EA%B2%83%EB%93%A4" href="#%ED%95%B4%EA%B2%B0%ED%95%B4%EC%95%BC-%ED%95%A0-%EA%B2%83%EB%93%A4">
  </a>
  해결해야 할 것들.
</h2>

<p>안타깝지만 완벽한 구현체는 아니다. 내가 깜박한 점도 있지만, 이들을 해결해야 한다.</p>

<ul>
<li>이벤트 버스를 사용한 특정 컴포넌트가 해체될 때(Destroy) 해당 컴포넌트에 등록한 리스너도 사라져야 하는 부분이 구현되지 않았다. 구현 안 하면 좀비 콜백이 되어 잠재적인 스크립트 오류를 유발하고 배열이 쌓이게 되면 좋을 게 없지 않은가.</li>
<li>그냥 Vue 에서 공식으로 넣어준 Provider/Inject 쓰면 안되겠니?</li>
</ul>

<p>이 외에도 내가 모르는 잠재적인 문제가 내재되어 있는데,<br>
이들의 해결은 여러분에게 맡긴다.<br>
어딜 날로 쳐먹으려고...</p>

<p>아 미안, 조만간 재대로 된 이벤트 버스 구현체 만들게 되면 그때 Github 에 풀게. 언제가 될 지는 모르겠지만 어자피 Vue 코딩 업무 보게 될 수 있으니 그때를 기약하도록 하자. 아니면 뭐 Stack Overflow 가서 찾아도 되고, 그냥...</p>


<div>
  <div>
    <h2>
      <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--566lAguM--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo" loading="lazy">
      <a href="https://github.com/developit">
        developit
      </a> / <a href="https://github.com/developit/mitt">
        mitt
      </a>
    </h2>
    <h3>
      🥊 Tiny 200 byte functional event emitter / pubsub.
    </h3>
  </div>
  <div id="readme" data-path="README.md"><article itemprop="text"><p dir="auto">
  <a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/9ad02d3d760df07fe6ed0428acd937ad8ffb871e4d825e4c435c4f195e872755/68747470733a2f2f692e696d6775722e636f6d2f42717358394e542e706e67"><img src="https://camo.githubusercontent.com/9ad02d3d760df07fe6ed0428acd937ad8ffb871e4d825e4c435c4f195e872755/68747470733a2f2f692e696d6775722e636f6d2f42717358394e542e706e67" width="300" height="300" alt="mitt" data-canonical-src="https://i.imgur.com/BqsX9NT.png"></a>
  <br>
  <a href="https://www.npmjs.org/package/mitt" rel="nofollow"><img src="https://camo.githubusercontent.com/27491c69b13520e1f08fbe3f8c65290680425ad9ca3b721d36d9784c649e9a57/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f6d6974742e737667" alt="npm" data-canonical-src="https://img.shields.io/npm/v/mitt.svg"></a>
  <a target="_blank" rel="noopener noreferrer" href="https://github.com/developit/mitt/workflows/CI/badge.svg"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--jgEZ_2M5--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://github.com/developit/mitt/workflows/CI/badge.svg" alt="build status" loading="lazy"></a>
  <a href="https://unpkg.com/mitt/dist/mitt.js" rel="nofollow"><img src="https://camo.githubusercontent.com/38a1a520a90708981ab6244da069023cec4e6d78865dbd33866481debaf64e38/68747470733a2f2f696d672e626164676573697a652e696f2f68747470733a2f2f756e706b672e636f6d2f6d6974742f646973742f6d6974742e6a733f636f6d7072657373696f6e3d677a6970" alt="gzip size" data-canonical-src="https://img.badgesize.io/https://unpkg.com/mitt/dist/mitt.js?compression=gzip"></a>
</p>

<h2 dir="auto">
Mitt</h2>

<blockquote>
<p dir="auto">Tiny 200b functional event emitter / pubsub.</p>
</blockquote>

<ul dir="auto">
<li>
<strong>Microscopic:</strong> weighs less than 200 bytes gzipped</li>
<li>
<strong>Useful:</strong> a wildcard <code>"*"</code> event type listens to all events</li>
<li>
<strong>Familiar:</strong> same names &amp; ideas as <a href="https://nodejs.org/api/events.html#events_class_eventemitter" rel="nofollow">Node's EventEmitter</a>
</li>
<li>
<strong>Functional:</strong> methods don't rely on <code>this</code>
</li>
<li>
<strong>Great Name:</strong> somehow <a href="https://npm.im/mitt" rel="nofollow">mitt</a> wasn't taken</li>
</ul>

<p dir="auto">Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.</p>

<h2 dir="auto">
Table of Contents</h2>

<ul dir="auto">
<li><a href="https://github.com/developit/mitt#install">Install</a></li>
<li><a href="https://github.com/developit/mitt#usage">Usage</a></li>
<li><a href="https://github.com/developit/mitt#examples--demos">Examples &amp; Demos</a></li>
<li><a href="https://github.com/developit/mitt#api">API</a></li>
<li><a href="https://github.com/developit/mitt#contribute">Contribute</a></li>
<li><a href="https://github.com/developit/mitt#license">License</a></li>
</ul>

<h2 dir="auto">
Install</h2>

<p dir="auto">This project uses <a href="http://nodejs.org/" rel="nofollow">node</a> and <a href="https://npmjs.com/" rel="nofollow">npm</a>. Go check them out if you don't have them locally installed.</p>

<div dir="auto" data-snippet-clipboard-copy-content="$ npm install --save mitt">
<pre>$ npm install --save mitt</pre>
<div>
<p>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</p>
</div>
</div>

<p dir="auto">Then with a module bundler like <a href="http://rollupjs.org/" rel="nofollow">rollup</a> or <a href="https://webpack.js.org/" rel="nofollow">webpack</a>, use as you would anything else:</p>

<div dir="auto" data-snippet-clipboard-copy-content="// using ES6 modules
import mitt from 'mitt'
// using CommonJS modules
var mitt = require('mitt')">
<pre><span>// using ES6 modules</span>
<span>import</span> <span>mitt</span> <span>from</span> <span>'mitt'</span>
<span>// using CommonJS modules</span>
<span>var</span> <span>mitt</span> <span>=</span> <span>require</span><span>(</span><span>'mitt'</span><span>)</span></pre>
<div>
<p>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</p>
</div>
</div>
<p dir="auto">The <a href="https://github.com/umdjs/umd">UMD</a> build is also available on <a href="https://unpkg.com/" rel="nofollow">unpkg</a>:</p>
<div dir="auto" data-snippet-clipboard-copy-content="<script src=&quot;https://unpkg.com/mitt/dist/mitt.umd.js&quot;></script>">
<pre><span>&lt;</span><span>script</span> <span>src</span>="<span>https://unpkg.com/mitt/dist/mitt.umd.js</span>"<span>&gt;</span></pre><p>…</p><div>
<p>
    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Enter fullscreen mode</title>
    <path d="M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z"></path>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewBox="0 0 24 24"><title>Exit fullscreen mode</title>
    <path d="M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z"></path>
</svg>

</p>
</div>
</div></article></div>
  
</div>



<p>이거 쓰든가.</p>

<p>끗.</p>


          </div>
          
  



      </article></div>

Ukjin Yang

내가 살다살다 이딴 포스트 하나 쓰려고 포토샵까지 꺼내들게 하다니...
SI 아니랄까봐 2022년 Vue 에서 밀고있는 Pinia 도 안쓰고
Vue 3 에다가 이벤트 버스???
그래... 그래서 만들었다.
new Vue() 못 쓰니...
ref() 및 reactive() 사용법을 알면 그리 어렵지 않게 만들 수 있다.
자, 여기 코드가 있다.
좋아. 원리를 설명해주지.
초기화는 그저 컴포넌트 스크립트 setup() 함수 및 <script setup> 태그 내용 안에서 준비한 함수 useEventBus() 만 호출하여 상수에 담으면 준비 끝!
on
이벤트명이 키인 객체가 메인이다. 그리고 그 속성들은 이렇다.
trigger 속성에 이벤트 발생 시 속성을 변경하여 반응형을 유도하기 위해 ref 함수를 사용한다.
trigger 속성에 대한 변경을 감지할 watch 함수를 정의하여, 이를 stopper 에 정의하는데, 왜 stopper를 정의하냐면, watch 함수를 호출하면 반환하는 값이 이 watch 작업을 중지하기 위해 호출할 수 있는 함수를 반환하기 때문이다. 이에 대해 다음 메소드에 후술하겠다.
emit
이벤트 리스너를 만들었으면, 이제 발생을 시켜야겠지? emit 메소드를 통해 이벤트를 발생시키도록 유도하면, 이벤트명 키를 찾아 이 안에 있는 trigger 속성에 있는 ref 객체의 값을 변경시켜 반응을 유도한다, 객체 값을 변경시키면, watch 함수 콜백이 발동하는데, 변경한 값을 인자로 받아 배열 내에 있는 모든 콜백을 호출하게 된다.
A.vue에 정의해도, B.vue에 정의하면 모두 호출하게 된다.
off
하지만 이벤트를 추가했으면 삭제도 필요하겠지?
off 메소드다.
watch 함수가 동작하는 것은 낭비다.
stopper 속성에 담긴 해제 함수를 호출하여 정리하는 것이다.
안타깝지만 완벽한 구현체는 아니다. 내가 깜박한 점도 있지만, 이들을 해결해야 한다.
이벤트 버스를 사용한 특정 컴포넌트가 해체될 때(Destroy) 해당 컴포넌트에 등록한 리스너도 사라져야 하는 부분이 구현되지 않았다. 구현 안 하면 좀비 콜백이 되어 잠재적인 스크립트 오류를 유발하고 배열이 쌓이게 되면 좋을 게 없지 않은가.
그냥 Vue 에서 공식으로 넣어준 Provider/Inject 쓰면 안되겠니?
이 외에도 내가 모르는 잠재적인 문제가 내재되어 있는데,
아 미안, 조만간 재대로 된 이벤트 버스 구현체 만들게 되면 그때 Github 에 풀게. 언제가 될 지는 모르겠지만 어자피 Vue 코딩 업무 보게 될 수 있으니 그때를 기약하도록 하자. 아니면 뭐 Stack Overflow 가서 찾아도 되고, 그냥...
 / 
        mitt
      
    
  
  
  
Mitt
Tiny 200b functional event emitter / pubsub.
Microscopic: weighs less than 200 bytes gzipped
Useful: a wildcard "*" event type listens to all events
Familiar: same names & ideas as Node's EventEmitter
Functional: methods don't rely on this
Great Name: somehow mitt wasn't taken
Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.
Install
Usage
Examples & Demos
API
Contribute
License
This project uses node and npm. Go check them out if you don't have them locally installed.
$ npm install --save mitt
Then with a module bundler like rollup or webpack, use as you would anything else:
// using ES6 modules
import mitt from 'mitt'
// using CommonJS modules
var mitt = require('mitt')
The UMD build is also available on unpkg:
<script src="https://unpkg.com/mitt/dist/mitt.umd.js">
…
  
View on GitHub
이거 쓰든가.
끗.

Vue.js 3 이벤트 뻐-스

댓글