23/10/21 TIL __ import , export 사용해보기 (1)

 

 

import, export를 사용하면 코드를 파일별로 나누기 때문에 관리하기 쉽다고 들었다.

정말 유용할 것 같아 시도해 봤는데, 정말 막막했다. 😿

어디서부터 어떻게 만져야 할지 감이 오질 않아서 일단 찾아봤다.

 

 

🔮  step 1.    다른사람 코드 살펴보기

 

내배캠 에서 현재 개인과제를 진행중이라,

다른 분들의 코드를 공유받아 살펴보며 공부 할 수 있는 좋은 기회가 있었다. 

import, export를 설명해 주셧지만 잘 이해가 되지 않아서 실제로 어떻게 동작이 되는지 직접 읽어보고 싶었다. 

그래서 깃에서 다운받아 실제로 열어보니 잘게 나눠서 저글링 하듯이 서로 주고받고 있었다. 

 

 

 

🔮  step 2.    import, export 개념 살펴보기

 

지금까지 정리한 개념은 이렇다. 

 

✅  사용하려면 script type = "module"를 해줘야 한다. 

 

✅  module 타입이 아닌 경우 하나의 전역을 공유한다. 독자적인 모듈 스코프를 갖지 않는다.

(파일 분리를 해도 각각의  파일들 안에 변수를 공유한다.)

 

✅  module 타입인 경우 각 js 파일들은 독자적인 모듈 스코프를 갖는다.

모듈 스코프가 다르기 때문에 외부에서 참조 할 수 없다. 

• a라는 파일에서 선언한 모든 식별자는  a 파일 안에서만 작동하고, 외부에서 참조 할 수 없다.
• 사용하기 위해서는 export 키워드를 이용해야 한다. 

 

✅  모든 데이터를 다 불러오지 않고, 실제로 해당 데이터가 필요한 순간에만 로드할 수 있다. 

function witchDrink (){
	import("./a,js").then(data => data.water())
}

btn.addEventListener('click', witchDrink())

 

 

 

 

✅ Named Export __  export 하는 이름과, import 이름이 동일해야만 한다. 

//a.js
export let data = function(){
	return 'data 가져옴'
}

export let coffee = function(){
	return 'coffee 가져옴'
}

export let water = function(){
	return 'water 가져옴'
}

 

//b.js

import {data, coffee, water} from "./a.js"

 

 

만약 import 해서 가져올 때에 이름을 바꿔주고 싶다면 아래처럼 하면 된다!!

//b.js

import {coffee as latte} from "./a.js"

 

 

 

 

✅  Default Export

__  각 파일마다 단 한개의 default export 만 존재 할 수 있다.

__  모든걸 한개의 파일로 export 할 수 있다.

__  import를 원하는 이름으로 설정해서 사용할 수 있다. 

 

//a.js
let data = function(){
	return 'data 가져옴'
}

let coffee = function(){
	return 'coffee 가져옴'
}

let water = function(){
	return 'water 가져옴'
}

export default {data, coffee, water};

 

//b.js

import {drinkData} from "./a.js"

 

 

    😲 default export와 named export를 섞어서 사용하는 경우 아래와 같이 import를 해줄 수 있다. 

//a.js
let data = function(){
	return 'data 가져옴'
}

let coffee = function(){
	return 'coffee 가져옴'
}

let water = function(){
	return 'water 가져옴'
}

export {data, water};
export default coffee;

 

//b.js

import data, water, {latte} from "./a.js"

 

 

✅  Star Import. * 을 이용해서 export 된 모든 데이터 불러오기 

__  (단! defaul export가 없는 파일에서만 가능) 

__  객체에 넣고, 해당 객체 이름을 정할 수 있다. 

//a.js
let data = function(){
	return 'data 가져옴'
}

let coffee = function(){
	return 'coffee 가져옴'
}

let water = function(){
	return 'water 가져옴'
}

export default {data, coffee, water};

 

//b.js

import * as drinkData from "./a.js"

이렇게 하면 a.js 파일에서 export 했던 모든 데이터를 불러올 수 있으며,

drinkData 라는 obj에 넣어서 불러올 수 있다.  

 

 

 

 

🔮  step 3.  따라하기 

 

🚨 예제를 따라해보는데 오류가 나왔다. 🚨

set "type": "module" in the package.json or use the .mjs extension.

작업 파일들 사이에 package.json 파일을 새로 만들고,  아래처럼 입력 후 저장해 주니 잘 작동 했다.

{
  "type": "module"
}

 

 

 

참고한 정보들

모던자바스크립트 딥다이브 책

 

https://velog.io/@eun0leee/JS-typemodule-%EA%B3%BC-defer

[JS] type=module 과 defer

https://www.youtube.com/watch?v=WUirHxOBXL4