230106 - JavaScript - module, 모듈화 하기

오늘 내가 배운 것

1. 모듈 (module)

2. CommonJS

3. ES6 문법

 

 

모듈(module)

모듈은 여러 기능이 있는 파일하나를 뜻한다. 스크립트 하나는 모듈 하나랑 같다.
모듈을 사용해서 얻는 장점으로는 유지보수가 변하고 재사용을 하기 좋다. 

여러 방법으로 모듈화를 할 수 있지만 내가 사용해본 방법 2가지를 정리해보려 한다.

 

 

 

CommonJS

모듈을 밖으로 내보낼 때는 module.exports를 사용하고 모듈을 가져와서 사용할 때는 require을 사용한다.
이 방식은 Node.js에서 사용하고 있다.

 

아래의 상황은 a 파일 안에 a의 함수를 b파일에서 사용하고 싶을 때의 상황이다.

// a.js 파일
const a  = () =>{
    console.log("a")
}

module.exports = {a}




// b.js 파일
const aa = require("./a.js")   //경로는 파일의 위치에 따라 다르게 적용..

aa.a()

 

exports와 module.exports

모듈을 내보내는 방법으로 module.exports 대신해서 exports를 사용하기도 하는데 이 두 가지를 비교해 보면

module.exports와 exports는 동일한 객체를 바라보고 있지만 exports는 module.exports를 참조한다.

그렇기 때문에, exports = a의 형태로 코드를 작성하게 되면 module.exports와 다른 값을 얻게 된다.

사용하는 방법을 정리해 보자면

 

module.exports.alphabet = a //(o)
module.exports = a //(o)

exports.alphabet = a //(o)
exports = a //(x)

 

 

ES6에서 의 방식

import와 export를 이용하여 불러오고, 내보낸다.

Export

// expA.js
const a = () => {}
export default a


//expB.js
export const b = () => {}
export const c = () => {}

 

Import

//import.js
import a from 'expA'
import {b} from 'expB'
import {c} from 'expB'

 

모듈로 만드는 파일의 default 가 있냐 없냐에 따라서 불러오는 방법이 다르다.

default가 있을 때는 내보낸 이름을 그대로 가져다 쓸 수 있는 반면, 없을 때는 {}로 묶어서 불러와야 한다.

default를 사용하게 되면 모듈 내에서 한 번만 사용할 수 있고, default를 쓰지 않는 방법은 여러 번 사용할 수 있다.

 

 

---