[Vue] Typescript 전역 Mixin 설정하기

악

아아악!

악!!!!!! 아 mixin이 global 함수같은 존재(?) 라서 공통된 작업을 해야할 때 등록해두면 편하고 편할 것 같긴 한데 vue 컴포넌트 파일마다 import 를 하는게 너무 귀찮아서 (이를테면 로그인 체크라던지 기타등등... 로그인 체크는 보통 세션으로 진행하지만 생략) 이걸 따로 import 하지 않고 main.ts(또는 .js) 에 등록해서 사용하는 법은 없나 하고 고민했다.

 

결과적으로 글을 쓰고 있는 지금은 딱히 뾰족한 수가 떠오르질 않음... 

아니 정확히 말하면 방법은 있다. main.ts 파일에 Vue.mixin({}) 으로 등록해서 사용하면 컴포넌트에 따로 import 할 필요 없이 this.functionName() 으로 접근해서 mixin 함수를 사용할 수 있음. 아래는 예시코드.

 

main.ts (.js) 안에 아래와 같이 전역 mixin 을 등록할 수 있다. 이건 공식문서에도 나와있는 내용

Vue.mixin({
	data(){
    	return{
        	...
        }
    },
    methods: {
    	...
    }
})

 

근데 main 파일이 길어지고 정신없어지는건 보통 지양하고 있으니까, 관리하기도 그렇고. 나는 미리 mixin 폴더를 따로 만들어서 따로 작성해둔 파일을 import 했다. 

import MyCustomMixin from './mixins/MyCustomMixin';
Vue.mixin(MyCustomMixin);

이렇게.

 

근데 왜 이걸 안썼느냐 하면 created 나 beforeCreate 같이 hook에 의해 자동으로 실행되는 함수가 >>컴포넌트가 불러질때마다<< 수십(은 좀 과장인데) 번씩 호출되기 때문..  이는 즉 페이지를 이동할 때도 같은 현상이 발생한다는 뜻.

아직 라이프사이클이랑 훅의 구조를 잘 몰라서 어디서 뭐가 mount 될 때 인지 create 가 되는 시점인지 왜 이렇게 많이 실행되는지 도무지 알 수가 없음인 것.. 물론 지금 내가 하고 있는데에서는 큰 문제가 없지만 그래도 그런 현상을 발견한 이상 너무 거슬려서 어쩔 수 없었다 ㅠ

 

아무튼 그래서 전역 mixin 을 등록하는 것 말고 mixin 을 plugin 으로 등록해서 쓰는 방법도 고민했는데 아 플러그인 너무 어려워요 세상에 심지어 js 가 아니라 ts 로 작성하니까 기초가 부족한 나는 공식 사이트에서 포멧을 떠멕여줘도 만들지를 못하고 사실 js 로 작성했어도 구조 이해가 안되서 실패했을 것 같긴 하다..

아무튼 플러그인도 안되고, 전역 등록은 계속 실행되는 create 가 거슬리고 환장하겠다. 였는데 결국 꼼수를 써서 내 프로젝트 안에서는 그나마 좀 편하게 쓸 수 있게 만들었다.

 

typescript 가 java 의 슈퍼셋? 이라고 하는데, 사실 그건 잘 모르겠고 아무튼 java 랑 굉장히 유사하다. class 형을 기반으로 작성되고 class 는 객체를 만들 수 있고.. 의 흐름을 따라 main.ts 에서 mixin 객체를 만들어서 export 로 보내버렸다.

import MyCustomMixin from './mixins/MyCustomMixin';

const mixin = new MyCustomMixin();

export {
	mixin,
    ...
}

이렇게 아예 객체로 만들어서 exprot 시켜버림. 객체로 만든 이유는

1. import 받은 mixin component 자체를 export 시켜도 해당 믹스인을 사용할 파일에서 import 해봤자 오류남

2. main 파일의 new Vue({ ... }) 안에 data 로 넣어도 그건 main 의 data 라서 내가 사용하고자 하는 화면에서 접근을 못함 (못하는건지 안되는건지 어려운건지 할 수 있는데 내가 못 하는건지는 모르겠음)

3. 매 파일마다 import 받아서 객체로 만들어서 쓰면 그냥 component 데코레이터 안에 등록해서 쓰느니만 못함

 

와 같이 나열할 수 있겠다.

 

근데 이건 내 프로젝트가 main.ts 파일을 거의 모든 페이지에서 import 해서 쓸 일이 있어서 그냥 한 번에 import 해버리면 좋겠다고 생각해서 이렇게 작성한거고, 그럴 필요가 없는 구조면 필요한 페이지에서만 mixin 파일을 import 해서 컴포넌트에 등록해서 쓰는게 제일 깔끔할 성 싶긴 하다.