👌 GSAP 적용

👽시작하기에 앞서 Vue2에서 적용 방식이다.
Vue3에서 전역 설정은 다른 방식을 사용한다.

간단한 벤치마킹 프로젝트를 진행 중에 gsap를 사용해보려고 한다.

• greensock animation platform

뭔가 제대로 된 애니메이션 라이브러리를 써보고 싶단 생각에 적용했고
영어영어한 검색 결과만 만나서 포스팅해보려고 한다.

자주 사용되는 라이브러리를 전역으로 설정해본다.

Install module

npm install gsap

설치 중에 만나는 오류는 프로젝트에 이미 설치된 패키지들의 의존성 다툼이 예상된다.
난 멍청하게 eslint 버전을 또 잘못 맞춰서 애먹었다..

Vue.use(gsap)

너무 단순하게 생각했다.
main.js

.
.
import gsap from 'gsap'

Vue.use(gsap)
.
.
// error >> gsap is not defined

보통 Vue에서 플러그인 꼽고 전역으로 사용할 때 Vue.use(name)을 사용하는데
이유를 모르고 사용했다 또.. 또..! 정신차리자.

Vue.prototype 및 Vue.use()는 프로젝트에서 아무런 관계가 없고 주로 개인이 좋아하는 사용 방식을 본다.
출처와 더보기: https://intrepidgeeks.com/tutorial/vue-vue-prototype-xx-and-vue-instructions-for-use

Vue.prototype.$gsap

뭔가 깔끔한 해답은 아니지만 조금은 마음이 편해지는 대답을 들은 기분이다.
전역으로 사용할 수 있는 방법이 하나뿐이 아니라면 다른 방법을 선택하기로 했다.

main.js

.
.
import gsap from 'gsap';

Vue.prototype.$gsap = gsap;
.
.
// Vue.prototype에 Vue 인스턴스 메소드를 연결
// 다른 컴포넌트에서 정상적으로 사용할 수 있었다.

Componenet.vue

.
.
// 예를 들어 .to('.class', duration, { option:value, ... } ) method
this.$gsap.to(badges, 0.6, { opacity: 0 });
.
.

'$'표시는 필수는 아니지만 충돌 방지 또는 전역 사용이라는 의미를 강조하기 위한 방식이라고 한다.

ps.TMI. 😎 갈축 키보드를 하나 맹글어서 기분이가 아쥬 좋다. 치는 맛이 있따. 저소음 흑축도 좋긴 한데 키압이 상당히 높아 다른 매력이다.