[javascript] import export

1. 바닐라 자바스크립트에서 import, export 사용하기

주구장창 리액트에서만 module을 내보내고 받고 해왔다.

하지만 바닐라로 구현해보면서 당연히 되야할 것들이 되지 않아 당황스러워서 블로그에 글을 쓰기로 하였다.

2. export

우선 경로에 .js로 파일을 생성해준다.

export 하는 방법은 아래와 같다

가. 냅다 export하기

// array.js
// 배열
export const array = ["사과", "배", "감"]
// 상수
export const CONSTANTS = "상수"
// 함수
export function func(){
	alert("export 했지")
}

나. 마지막에 export 묶어서 하기

// array.js
// 배열
const array = ["사과", "배", "감"]
// 상수
const CONSTANTS = "상수"
// 함수
function func(){
	alert("export 했지")
}

export {array, CONSTANTS, func}

다. 하나만 export하기

function func(){
	alert("export 했지")
}

export default func

3. import

가. 목록 만들기

import {array, CONSTANTS, func} from "파일경로"

console.log(array)

나. *로 한번에 가져오기

import * as 작명 from "파일경로"

작명.func()

다. import 이름 변경하기

import {array as arr} from "파일경로"

참고

https://ko.javascript.info/import-export

3. 바닐라에서 불러오기

html에서 불러오고 싶다면 냅다

<script src="파일경로"></script>

로 불러오지 말고

<script type="module" src="파일경로"></script>

type="module"을 붙혀주도록 하자
안그러면 import 자체가 안된다.

또한 import 하는 파일에서 반드시 확장자 이름까지 써 줘야 import가 가능하다.

// import {} from "파일경로"
import {} from "파일경로/파일명.js"