모듈(Module)
- 모듈이라는 단어는 우리가 이해할 수 있는 작은 단위로 나뉘어진 무언가.
- 특히나 js에서는 우리가 사용할 수 있는 문자, 숫자, 객체, 배열 데이터같은 어떤 데이터들의 집합
- 이러한 데이터들의 집합을 js라는 확장자를 가지고 있는 파일로 만들 수 있고 그 파일에서 js의 가져오기, 내보내기 문법을 사용할 때, 이것을 모듈이라고 할 수 있다.
ex) 현재 열려있는 main.js파일은 모듈이라고 부를 수 없다
왜? -> main.js 파일은 js의 가져오기, 내보내기 문법이 아직 작성이 되어있지 않다.
- export(내보내기) module.js
export const hello = 'Hello world!'- import(가져오기) main.js
import {hello} from './module.js'--> 만들어진 각각의 모듈은 하나의 .js파일이다
- js에서 module개념을 사용하며녀 type이라는 속성을 통해서 module이라는 값이 부여되어 있어야 제대로 사용이 가능하다.
- 이 module을 통해서 main.js로 최초로 연결되어있고 main.js는 또 주변에서 module.js파일을 찾아서 거기서 데이터를 가져와 활용을 한다.
<script type="module" src="./main.js"></script>
앞으로 만드는 다양한 프로젝트들은 어떠한 기능, 데이터들을 파일로 구분하고, 파일로 구분하는 개념 자체가 "모듈화"이다. 최대한 모듈화된 상태에서 프로젝트를 진행한다!
가져오기와 내보내기 패턴
- 기본 내보내기 (module.js)
-> 하나의 모듈에서는 default라는 키워드는 딱 한번, 하나의 데이터만 내보낼 수 있다.
export default 123- 이름 내보내기
-> 여러 개의 데이터를 내보낼 수 있다.
export const str = 'ABC'
export const arr = []
export const hello = () => {}
export function hello() {}- 가져오기
import number, {str, arr, hello} from './module.js'
console.log(number) //123
console.log(str) // ABC
console.log(arr) // []
console.log(hello) // f hello () {}정리
하나의 js파일을 통해서 export 키워드로 어떠한 데이터를 내보낼 수 있는데 내보내는 패턴은 크게 두가지
1. 기본내보내기(데이터 이름이 없고 단지 default로 가져와진다)
2. 이름내보내기(데이터이름 명확하게 있는)
-
위에 내보내진 데이터를 가져오기 위해서는 import라는 키워드를 사용하고 기본내보내기는 내가 데이터를 가지고 올 때 이름을 지정할 수있고 이름 내보내기는 가지고 올 때 그 이름 그대로 중괄호 부분에 쉼표로 구분을 해서 가지고 올 수 있다.
-
필요가 없는 데이터는 안가지고 오면된다.
-
가져오지 않는 데이터를 출력하려고 하면 undefined라고 나온다.
다른 변수명으로 가져오기 . str은 undefined가 된다.
import {str as xyz, arr, hello} from './module.js'
모든 데이터를 하나의 변수에 할당하기
import * as abc from './module.js'
console.log(abc) // 하나의 객체 데이터가 출력- (와일드카드) : 여러 개의 개념을 한 번에 지정한다는 뜻
동적으로 모듈 가져오기, 가져온 모듈 바로 내보내기
Js 작성할 때 주의할 점 : import라는 키워드는 항상 js의 최상단에 작성.
코드 중간에 모듈이 필요할 때는 import로 가져올 수 없다.
-
js 코드 중간에서 모듈을 가져와야 하는 상황이 있다면 import라는 함수를 통해서 해당하는 모듈을 가지고 올 수 있으며, 가지고 오는데 시간이 얼마나 걸리는지 알 수 없기 때문에 모듈을 다 가지고 오면 then()이라는 메소드가 실행될 수 있는 구조이고, then()이라는 메소드가 실행이 되면 메소드 콜백에 매개변수로 가지고 온 정보를 (import키워드를 사용할 때 와일드카드로 abc변수에 넣는 것처럼, )abc라는 이름의 매개변수로 넣어서 내부에서 사용할 수 있다.
-
비동기 패턴
setTimeout(async () => {
const abc = await import('./module.js')
console.log(abc)
}, 1000) setTimeout(() => {
import('./module.js').then(abc => {})
console.log(abc)
}, 1000)--> import라는 함수는, 비동기라는 개념으로 동작을 하고 then이라는 메소드를 뒤쪽에 붙여서 사용하거나, async, await 패턴으로 코드를 작성할 수 있다.
--> import 함수를 통해서 코드의 중간에서 모듈을 동적으로 가져와서 사용할 수 있다!
- 따로따로 만들어져 있는 기능을 하나의 js모듈을 통해서 가지고오자마자 내보내기를 하면, 사용할 때 하나의 모듈만 가져와서 내용을 꺼내서 쓸 수 있다. - 원래 from이라는 키워드를 import키워드에서만 사용했지만, export키워드와 같이 사용한다!
- main.js
import {a , b} from './utils.js'
console.log(a()) //123
console.log(b()) //456- utils.js
export { a } from './a.js'
export { b } from './b.js'- a.js
export const a = () => 123
- b.js
export const b = () => 456
