javascript 3

[Vue.js] Class로 구성된 js 파일 import, 사용하기

모듈화를 하기 위해 class로 구성하는 외부 js 파일의 사용이 필요할 때가 생겼다. 파일 구성은 export defualt class foo { constructor() { this.func(); } func() { } fun2() { } } Vue에서 파일을 따로 빼내서 vue 파일에서 사용할 경우 내보내기(export)를 꼭 해야한다 원하는 Vue파일에서 해당 파일 import를 하고 사용해야 한다 import foo from "foo.js 경로" export defult { data() { return { foo : new foo(); } }, mounted() { this.foo.fun2(); } } class 파일에서 정의한 메소드가 꼭 mounted가 아니라 method에서 호출해도 되고 ..

study/TIL🐥 2022.10.05

[Vue.js] 외부 javascript 구문 추가 방법

외부 플러그인이나 제품을 사용하다가 보면 script 추가 안내문을 받을 수 있다. html을 사용하거나 웹빌드를 사용하면 쉽게 설치할 수 있지만 vue나 react를 사용해 웹 작업을 한다면 제공하는 script문을 추가하기 어렵다. 이 구문을 head 태그 다음에 넣기 위해 수많은 구글링을 하였고 마침내 해결방법을 알아내었다 addScript() { let scripts = [ '필요한 url', ]; for (let i = 0, len = scripts.length; i < len; i++) { let script = document.createElement('script'); script.setAttribute('type', 'text/javascript'); script.setAttribute(..

study/TIL🐥 2022.10.05

[JQuery] Uncaught TypeError: $(...).on is not a function

프로젝트 header를 inlcude 할 때 script 코드가 있어서 jquery 선언문을 head 부분에 넣어야 했다 하지만 특정 페이지에서 이상하게 header script 실행이 안됐다 확인해보니 이 에러의 원인은 1. jquery 선언이 스크립트보다 아래에 있다 2. jquery 선언이 중복되었다 3. jqeury가 참조가 안되어있다 나 같은 경우에는 아래에 jquery 선언이 중복되어서 에러가 났던 것이다 삭제하니 깔끔히 해결!

study/Project 🐾 2021.02.23