[JS] JavaScript에서 import 써보기

파이썬에서는 다른 파이썬 파일에 있는 함수를 가져올 때 import ~ from 을 이용했었음

JS에서도 되나 한번 볼까?

// test1.js
const sayT1 = () => {
    console.log('페이커는 신이야')
}

const sayDong = () => {
    console.log('T1 화이팅')
}

// test2.js
import test1 from './test1.js'

 

→ 오류난다

다른 파일에서 쓰려면 export 해주기

 

// test1.js
const sayT1 = () => {
    console.log('페이커는 신이야')
}

const sayDong = () => {
    console.log('T1 화이팅')
}

export { sayT1, sayDong }

근데 이렇게 해도 오류가 난다

왜? → export, import, from 문법은 ES6부터 모듈 시스템에서 지원하는 기능 

즉, 내가 쓰는 JS 파일들이 모듈 시스템이 관리해야만 쓸 수 있음

vue에서는 한번에 여러 자바스크립트 파일을 관리하므로 export, import, from을 사용할 수 있다

 

 

그럼 어떻게 해?

// test1.js
const sayT1 = () => {
    console.log('페이커는 신이야')
}

const sayDong = () => {
    console.log('T1 화이팅')
}

// 다른 파일에서 쓰려면 export해주기
// 근데 일반적인 js파일에서는 
// export {sayT1, sayDong} 이게 안됨
// 그래서 이렇게 해줘야함
module.exports = { sayT1, sayDong }

// test2.js
// 가져올 때는 require 사용
const { sayT1, sayDong } = require('./test1.js')

sayT1()
sayDong()

 

 

---

근데 Vite를 이용한 vue에서는 export, import, from 사용가능

아까 그 파일을 만들어주고,

// src/utils/T1.js

const sayT1 = () => {
    console.log('페이커는 신이야')
}

const sayDong = () => {
    console.log('T1 화이팅')
}

export {sayT1, sayDong}

Homeview.vue에서 해당 파일 import 가능

<script setup>
    import { sayT1 } from '../utils/T1';
    sayT1()
</script>

그럼 console창에서 확인 가능

 

아니 근데 다른 버전인데 어케 돌아가는거지?

→ babel(JS 컴파일러)이 알아서 최신버전으로 해석해줬음

 

---

※ 참고

• vite: 코드 빌드 도구 (코드 기본 세팅, 개발 서버 시작 등)
• bundler
  • 여러개의 JS파일을 하나로 합쳐주는 도구
  • vite는 rollup을 default로 사용
• babel: JS 버전 충동을 해결해주는 도구