javascript - 모듈

한대 맞고 쓰러진거야, 좀 쉬었다가 일어나면 돼

아침 일찍부터 공부하니까 생각보다 많은 양을 공부하고 있는 것 같다!

모듈화(Modularization)

• 코드를 효율적으로 관리할 수 있다.
• 다른 프로그램에서도 재사용이 가능하다.
• es2015 전에는 모듈화 기능이 없었다.
• 서버를 통해서 파일을 실행해야한다.

모듈 스코프

모듈 파일이 가져야 하는 독립적인 스코프를 모듈 스코프라고 부릅니다.
모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야한다.

<script type="module" src="index.js">

모듈 문법

모듈화된 파일들은 서로 연결되기 때문에 html에서는 진입하는 파일 하나만 연결하게 된다.

• 모듈 스코프를 가진 파일에서 외부로 내보내고자 하는 변수나 함수를 export 키워드 사용
• 모듈 파일에서 내보낸 변수나 함수들은 다른 파일에서 import 키워드를 사용

// printer.js
// export
export const title = 'CodeitPrinter';

export function print (value) {
	console.log(title);
}
// export 도 한꺼번에 작성 가능
export {title, print};

// index.js
// import
import {title, print} from './printer.js'

만약 모듈 파일하고 본 파일에서 변수명이 겹치는 경우
as 를 사용해서 변수명 변경

// 함수나 변수명을 as 를 사용해서 변경
import {title as printerTitle, print} from './printer.js'

const tilte = 'Codeit';

print(title);

한꺼번에 불러오기(와일드카드 문자: *)

// Named export
import * as printerJS from './printer.js';
import codeit, {
	title as membersTitle,
	data as membersTitle
} from './memebers.js';

// default export
export default codeit;
export default {title, print }

default export

집중을 잘 못 해서 그런 것인지 이해하는데 생각보다 오래 걸렸다.

• export를 할 때 default 키워드를 사용하여 모듈 파일에서 기본적으로 export 할 대상을 정할 수 있다.
• export 대상이 하나라면 default 키워드를 사용하는 것이 좋다.

import { default as printerJS } from './printer.js';