inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

차트 라이브러리 설치 및 차트 그리기

외부 자바스크립트 라이브러리 import 관련 자문자답 질문

11318

Jin J

작성한 질문수 3

4

안녕하세요? 잘듣고있습니다. 매우 많은 도움이 되고있어 감사하게 생각하고 있습니다.

따라 가서면 하다보니  개발되어있거나 외부에서 제공받은  각종 Javascript 라이브러리나 Util들을 vue에서 include 하는 방법들을 찾아보고 있습니다.

수많은 js 파일들을 일일히 열어 export하여 사용하긴 어려움이 있어 /public/js/*.js  이 위치에 파일들을 올려놓고 index.html안에 <script src="/js/common000.js"></script>이런식으로 등록하고 실제 사용할 component vue에서 해당 스크립트의 함수를 호출하면 되더라구요. 물론 실행은 되나 eslint에 걸려 오류가 나서 아래와 같이 같은 스크립트를 vue 넣으니 eslint엔 걸리지 않더라구요

<template>...</template>

<script src="/js/common000.js"></script>

<script src="/js/common001.js"></script>

<script> export default {

...

} </script>

<style></style>

이런식으로 했을 때 Vue문법에 어긋나거나 잘못된점이 있나요? 아니면 다른 괜찮은 방법이 있나해서 질문드립니다.

vuejs javascript

답변 2

1

silqwer

혹시 아래 링크와 같은 방법으로 사용하는건 어떤가요?

https://stackoverflow.com/questions/53848441/importing-vanilla-js-file-to-vue-js-component

1

캡틴판교

안녕하세요 Jin님, 먼저 제 수업에 대해서 좋은 평을 남겨주셔서 감사합니다 :)

첨부해주신 코드를 보니 싱글 파일 컴포넌트 안에서 다른 자바스크립트를 로딩하는 구조로 가시는 것 같은데 뷰 CLI로 제작한 프로젝트가 ES6 Modules의 문법을 기본으로 한다는 점에서 위 구조가 일반적인 구조는 아닙니다.. :)

가급적 import 구문으로 다른 자바스크립트 파일의 내용을 들고 와서 사용하실 수 있으면 좋을 것 같아요. 예를 들면,

<template>...</template>

<script src="/js/common000.js"></script>

<script src="/js/common001.js"></script>

<script> export default {

...

} </script>

이 구조 대신

<template>...</template>

<script>

import common0 from './js/common000.js'

import common1 from './js/common001.js'

export default {

...

} </script>

이런 구조로 설계하시는 걸 추천드립니다 :)

깃 권한 요청 드립니다

0

50

1

깃 권한 신청

0

50

1

깃 권한 요청드립니다.

0

111

1

깃허브 권한 요청 드립니다

0

144

1

깃허브 권한 요청 드립니다

0

161

1

깃허브 권한 요청 드립니다

0

167

1

깃허브 권한 요청 드립니다.

0

154

1

안녕하세요 vue 2.7로 수강하고 있는 학생입니다. 실무에서 최하위 자식의 props와 watch의 관계를 여쭈고자 합니다.

0

208

1

ide 타입추론 기능 사용할 수 없을까요??

0

207

1

컴포넌트 링크는 vue peek 익스텐션 설치가 필수인가요??

0

228

1

Vue3로 진행중입니다

1

338

1

Vue router-link 사용시 같은 url이면

1

506

1

vue3 에러 메세지...

1

670

2

id ="app" 중복

0

271

2

use undefined 에러가 나옵니다.

1

319

2

깃허브 권한 요청드립니다.

1

359

2

권한요청드립니다.

1

299

2

Vue3에서 구글 애드센스 탑재하기

1

437

2

코드가 정상 작동 되는건지 ...

1

303

1

강의에서 api를 따로 빼셨는데 얻는 이점이 뭐죠?

1

243

1

vuex 적용시 질문

1

288

2

라우터 버전이 안맞는데 어떤걸 써야하나요

1

385

2

UserView에 id 속성만 undefined로 넘어오는데 이유를 모르겠습니다..

1

455

2

권한요청 드립니다!

1

275

2