Vue.js 및 lodash를 사용한 조절 및 디바운싱 이벤트

소개

이벤트 제한 및 디바운싱은 성능을 개선하고 잠재적으로 네트워크 오버헤드를 낮추는 두 가지 접근 방식을 나타냅니다.

Vue.js 1은 디바운싱 이벤트를 기본적으로 지원했지만 Vue.js 2에서는 제거되었습니다.

결과적으로 Vue.js 2에서 이벤트를 조절하고 디바운싱하는 일반적인 접근 방식은 lodash와 같은 타사 라이브러리를 사용하는 것입니다.

이 튜토리얼에서는 Vue.js 2 애플리케이션에 lodash.throttle 및 lodash.debounce를 적용합니다.

전제 조건

이 기사를 따라 하려면 다음이 필요합니다.

Node.js를 로컬에 설치했습니다. Node.js를 설치하고 로컬 개발 환경을 만드는 방법에 따라 수행할 수 있습니다.
디바운싱 및 스로틀링에 대한 약간의 지식.
Vue에 익숙해지면 도움이 되지만 필수는 아닙니다.
Lodash에 익숙해지면 도움이 되지만 필수는 아닙니다.

이 튜토리얼은 Node v15.8.0, npm v7.5.4, vue v2.6.11 및 lodash v4.17.20에서 검증되었습니다.

프로젝트 설정

프로젝트를 빠르게 설정하려면 @vue/cli를 사용하는 것이 좋습니다.

참고: 이 문서에서는 @vue/cli의 전역 설치를 피하기 위해 npx를 사용하는 접근 방식을 취합니다.

npx @vue/cli create vue-lodash-example

사전 설정(Default([Vue 2] babel, eslint)) 및 패키지 관리자(npm)를 선택한 후 새로 생성된 프로젝트 디렉토리로 이동합니다.

cd vue-lodash-example

이제 다음 명령을 사용하여 프로젝트에 lodash를 추가할 수 있습니다.

npm install lodash

참고: lodash를 모두 가져올 필요가 없는 경우 webpack을 사용자 지정하면 사용되는 기능에 대한 라이브러리 크기를 줄일 수 있습니다. lodash.throttle 및 lodash.debounce와 같은 패키지에서 lodash의 일부를 개별적으로 가져올 수도 있습니다.

다음으로 코드 편집기를 사용하여 components 디렉터리에 새 UnmodifiedComponent.vue 파일을 만듭니다.

<template>
  <div>
    <h1>Unmodified Events</h1>
    <button @click="unmodifiedMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
export default {
  methods: {
    unmodifiedMethod: () => {
      console.log('Button clicked!')
    }
  }
}
</script>

다음으로 새로운 UnmodifiedComponent를 사용하도록 App.vue를 수정합니다.

<template>
  <div id="app">
    <UnmodifiedComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent
  }
}
</script>

이제 Vue.js 애플리케이션을 실행할 수 있습니다.

npm run serve

웹 브라우저에서 localhost:8080으로 이동하고 웹 브라우저의 버튼과 상호 작용합니다. 콘솔은 모든 상호 작용을 기록합니다. 이러한 이벤트는 클릭할 때마다 즉시 실행됩니다. throttle 및 debounce를 사용하도록 이 메서드를 수정하게 됩니다.

스로틀링 방법

다음으로 Vue 애플리케이션에 throttle을 적용합니다. 스로틀링을 사용하여 이벤트가 보존되지만 시간이 지남에 따라 분리되도록 할 수 있습니다.

코드 편집기를 사용하여 UnmodifiedComponent를 복사하고 새 ThrottleComponent를 만듭니다.

<template>
  <div>
    <h1>Throttled Events</h1>
    <button @click="throttleMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttleMethod: _.throttle(() => {
      console.log('Throttle button clicked!')
    }, 2000)
  }
}
</script>

다음으로, 새 ThrottleComponent를 사용하도록 App.vue를 수정합니다.

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent
  }
}
</script>

이제 Vue.js 애플리케이션을 실행할 수 있습니다.

npm run serve

웹 브라우저에서 localhost:8080으로 이동하고 웹 브라우저의 버튼과 상호 작용합니다. 콘솔은 모든 상호 작용을 기록합니다. 여러 순차 이벤트는 2000밀리초(2초)의 지연으로 일관되게 실행됩니다.

디바운싱 방법

다음으로 Vue 애플리케이션에 디바운스를 적용합니다. 디바운싱은 본질적으로 이벤트를 함께 그룹화하고 이벤트가 너무 자주 실행되는 것을 방지합니다.

코드 편집기를 사용하여 UnmodifiedComponent를 복사하고 새 DebounceComponent를 만듭니다.

<template>
  <div>
    <h1>Debounced Events</h1>
    <button @click="debounceMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    debounceMethod: _.debounce(() => {
      console.log('Debounce button clicked!')
    }, 2000)
  }
}
</script>

다음으로 새로운 DebounceComponent를 사용하도록 App.vue를 수정합니다.

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
    <DebounceComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'
import DebounceComponent from './components/DebounceComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent,
    DebounceComponent
  }
}
</script>

이제 Vue.js 애플리케이션을 실행할 수 있습니다.

npm run serve

웹 브라우저에서 localhost:8080으로 이동하고 웹 브라우저의 버튼과 상호 작용합니다. 콘솔은 모든 상호 작용을 기록합니다. 여러 순차 이벤트는 2000밀리초(2초)마다 마지막 클릭 후에만 실행됩니다.

결론

이 튜토리얼에서는 Vue.js 2 애플리케이션에 lodash.throttle 및 lodash.debounce를 적용했습니다.

lodash에 대해 자세히 알아보려면 공식 문서를 읽어보세요.

Vue.js에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Vue.js 주제 페이지를 확인하세요.