[Vue] 외부 js에서 vue function() 호출(2)

이전에 외부 js에서 vue 함수 호출 관련 포스팅을 한 적이 있었는데, 당시에는 vue 파일의 script내 mounted 위치에서 js 파일을 setAttribute 처리하는 형식으로 vue 파일에 js 를 import 하는 방식으로 

굳이 파일마다 setAttribute 처리 할 필요는 없고 프로젝트폴더 내 /pubilc/index.html 파일에 필요한 js 파일을 script 태그로 import 해두면 되긴 하는데, 그 땐 전역으로 사용할게 아니라 해당 페이지에서만 호출되야 할 부분이라서 vue 파일에 따로 등록해서 사용했었음.

 

참고 링크

[vue] 외부 js에서 vue fucntion() 호출

++ 2021.06.09
mixin은 적절한 선택지가 아니었다. plugin을 활용한 개선안을 찾았고, 나름 정리도 깔끔하게 해두었으니 필요 시 하단링크 내용 참고!

[Vue] 외부 js에서 vue function() 호출(3)

 

저때에는 페이지 root로부터의 현재 vue 페이지 경로를 파악해서 파악한 경로를 js 파일에 하드코딩으로 작성한 후에 필요한 함수를 호출하는 방식을 사용했는데, 이번에 개인적으로 작업하는 페이지에서는 component 를 그 전 보다 세밀하게 나눠놓고, 폴더도 분류별로 구분해 놓다 보니 그렇게 접근하는 방식에 한계가 있더라..

 

이 과정에서 이전처럼 vue로 접근하려고 시도하면서 찾은 부분인데, 애초에 window.app을 변수로 등록해서 구조를 뒤져보려 해도 프로젝트 내 구성요소가 다 변수에 저장되는게 아니기도 하고 하위 컨텐츠를 살펴보면 아무 내용도 등록되지 않은 껍데기만 있는 div 태그들도 보이고 하는걸 발견함. 

 

그리고 그 전에는 javascript 를 사용했으면 이번 작업에서는 typescript 를 스터디 겸 한 번 써 보고 있는데, 생각보다 구조나 프로젝트 생성 방식 등에 조금씩 차이가 있어서 그런지 아예 vue 파일 내부로 접근이 안돼서 이래저래 실패를 반복하다가 다른 방법이 없을까 싶어 생각한게 mixin을 사용해서 어떻게 할 수 있지 않을까 싶었음.

 

 

일단 전역 mixin으로 사용할 파일을 하나 생성하고 거기에 callback method(또는 그냥 호출할 method)등록을 해주면 일단 mixin 내 method 가 호출되는 것 까지 확인함.

js는 index.html 에 script 로 import 해놨고, mixin 은 main.js 에서 Vue.mixin(mixinExportName) 으로 등록해줬다.

전역 mixin에 관한 메모(포스팅) 도 남겼었는데 필요하면 아래 링크 참고. typescript 형이지만 기본적으로 구조는 비슷하니까 상관 없을거라고 생각함ㅁ..

https://asang-developer.tistory.com/37

[Vue] Typescript 전역 Mixin 설정하기

아무튼 저렇게 전역으로 mixin 등록해주고 index.html 에서 import 한 script 파일에서 mixin에 등록한 함수를 호출하면 되더라. 물론 mixin 호출할땐 window.app.functionName() 또는 window.app 을 변수에 담고 변수.functionName()으로 불러줘야 함.

 

근데 위에 포스팅에서 적혀있듯이 main.js 에서 등록한 전역 mixin에서는 현재 위치인 vue 파일 또는 component의 함수를 호출하지는 못해서 데이터가 필요하거나 하면 직접 사용이 아니라 store(vuex)에 저장해서 쓰거나 해야할 것 같다.

 

일단 지금은 callback 되는게 먼저니까 여기까지