모듈(module) 시스템 정리

✅ 모듈 시스템이 왜 필요한데? 

 

---

 

기존에는 html 파일에서 <script> 태그를 이용하여 필요한 자바스크립트 파일을 불러왔다. 

이렇게 하니 html 파일에서 불러온 여러 자바스크립트 파일들이 서로 다름에도, 서로가 의존적이게 되었고 이에 더해 파일들을 로드하는 순서까지 중요해졌다. 이러한 여러 단점을 보완하기 위해 등장한 것이 모듈 시스템이다.

외부에서 사용할 수 있게 특정 함수나 오브젝트 등을 모듈화 하고, 해당 모듈을 사용하려는 쪽에서는 필요한 모듈만 불러와서 사용하면 되는 것이다.

 

모듈 시스템에는 AMD, CommonJS, ES6 등이 있다. 

 

---

 

✅ CommonJS

 

---

 

CommonJS 포맷은 Node.js 의 표준이다.

 

내보내기의 경우 expors 및 module.exports를 사용하고, 가져오기의 경우 require을 사용한다.

 

1.exports

 

-(1) 내보내기 

 

// func.js

function One (param) {
	// ...
}

function Two (param) {
	// ...
}

exports.One = One
exports.Two = Two

 

 

-(2) 가져오기

 

const obj = require('./func') // func이란 파일에서 가져오겠다.

func.One(10)
func.Two(20)

 

2. module.exports

 

-(1) module.exports 를 통한 내보내기

 

// func.js
const obj = {
	
    func1: function (num) {
    	// ...
    },
    
    func2: function (num) {
    	// ...
    }
}

module.exports = obj

 

-(2) 가져오기

 

const obj = require('./func')

obj.One(10)
obj.Two(20)

 

 

🧐 더 알아보기 

 

module.exports => 여러 propery를 내보낼 때 / 단일 Object를 내보낼 때 모두 가능

exports => 여러 property를 내보낼 때

 

exports는 module.exports를 참조하고 있는 객체이다. 즉, exports에 propery를 명시하는 위와같은 방법은 정상적으로 동작하지만, 신규 객체를 할당해버리면 모듈이 동작하지 않는다. 특별한 상황이 아니라면 module.exports를 사용하도록 하자.

 

---

 

✅ ES6

 

---

 

아직 브라우저들이 ES6를 완벽히 지원하지 못하는 상황이라서 webpack이나 babel 등의 번들러가 필요하다.

 

내보내기 : export 혹은 export default

가져오기 : import

 

1. export

 

-(1) export를 이용한 내보내기 

 

// func.js

// 방법 1
export function func1 (num) {
	// ...
}

// 방법 2
const func2 = function (num) {
	// ...
}

export { func2 }

 

-(2) 가져오기 

 

// 사용하려는 객체만 선택하여 가져오기
import { func1 } from './first_func'

func1(10)

//as를 사용하면 이름을 바꿔서 모듈을 가져올 수 있다

import {func1 as hi} from '/first_func'

hi(10)

// 모든 객체를 가져오되 원하는 이름을 붙여서 사용한다.
import * as obj from './first_func'

obj.func1(10)
obj.func2(20)

 

2. export default

 

모듈은 크게 두 종류로 나뉜다.

• 복수의 함수가 있는 라이브러리 형태의 모듈
• 개체 하나만 선언되어있는 모듈

보통 두 번째 방식으로 모듈을 만드는 것을 선호하기 때문에 함수, 클래스, 변수 등의 객체는 전용 모듈 안에서 구현된다.

그런데 이렇게 모듈을 만들다보면 자연스레 파일 개수가 많아진다.

그래서 나온 것이 export default 라는 문법이다. 이를 이용하면 '해당 모듈엔 개체가 하나만 있다.' 라는 사실을 명확히 나타낼 수 있다.

 

-(1) 내보내기 

 

// second_func.js
const obj = {

    func3: function (num) {
    	// ...
    },
    
    func4: function (num) {
    	// ...
    }
}

export default obj

 

-(2) 가져오기

 

// default 키워드를 이용하여 내보냈던 쪽에서 사용한 명칭을 그대로 사용할 필요는 없다
// 어짜피 하나의 개체만 선언되기 때문이다.

import testObj from './second_func'

testObj.func3(10)
testObj.func4(20)

 

 

🧐 더 알아보기 

 

모듈을 막 배우기 시작한 사람들은 중괄호를 빼먹는 실수를 자주한다.

named export한 모듈을 가져오려면 중괄호가 필요하고, 

export default한 모듈을 가져오려면 중괄호가 필요하지 않다. 이름을 변경하는 것도 가능하다.