[JS]모듈(Module) 모듈화(Modularization)/ Import/Export

ES2015에 등장

모듈: 기능단위로 나눠진 독립적이고 재사용가능한 소프트웨어 덩어리/ 모듈은 단지 파일 하나의 파일에 불과합니다. 즉 스크립트 하나가 모듈 하나입니다.

모듈화: 공통된 기능이나 특별한 목적에 따라 각각의 파일 별로 분리시키는 과정

 

모듈이 필요한 이유

한 개발자가 1만 줄 이상의 코드를 작성했다고 가정해 보자.

이걸 하나의 파일에서 관리하고 협업에서 사용해야 한다면 벌써부터 아찔해진다.

이 개발자를 제외한 다른 개발자들은 1만 줄의 코드를 해석하느라 시간을 낭비하게 된다.

또한 파일 하나로 모든 기능을 관리하기 때문에 부분적인 기능을 재사용하기에는 거의 불가능에 가깝다.

이런 문제점을 해결하는 데 필요한 것이 바로 모듈화다.

 

모듈 파일의 조건

모듈 파일의 독립적인 스코프(모듈 스코프)를 가져야 합니다.

이게 무슨 소리냐면 모듈 내에 존재하는 변수나 함수는 모듈 스코프 내에서만 활용이 가능해야 한다는 말이다.

main.js

const num = 123; // main.js 파일에 변수 선언

other.js

console.log(num) // 123 같은 폴더 내의 other.js 파일에서 실행해도 정상적으로 실행됨

이걸 방지하려면 HTML에서 자바 스크립트를 불러올 때 type 속성에 module 값을 추가하면 됩니다.

<script type="module" src="main.js"></script>
<script type="module" src="other.js"></script>

 

자바 스크립트에서는 import와 export를 사용해서 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.

export

Named exports

Named exports는 여러 값을 내보내는데 유용합니다.

export 된 이름을 사용해 import 합니다.

const num = 12345;
export const arr = [1, 2, 3, 4, 5]; // 개별로 export

function print(value) {
    console.log(value)
}

export {num, print}; // 묶어서 export

 

Default Exports

모듈 당 한 개만 선언할 수 있습니다.

딴 변수 함수 통틀어 하나만 default export 할 수 있기 때문에 기능의 "메인"을 내보내는 것이 좋습니다.

function sum(a,b) {
    return a + b
}

export default sum;

 

import

모듈 전체 가져오기

import * as members from './other.js'; // *를 와일드 카드 문자라고함

 

하나 이상의 멤버 가져오기

import {num, print, arr} from './other.js';

 

다른 이름으로 멤버 가져오기

import {num as numbers, print, arr} from './other.js';

 

default export 값 가져오기

import sum from './other.js'; // {}중괄호는 쓰지않는다

다른 값과 같이 가져올 때, default export 값을 다른 값보다 먼저 써줘야 합니다.

import sum, {num as numbers, print, arr} from './other.js';

import sum, * as members from './other.js';