[멋쟁이사자처럼 - 프론트엔드 스쿨 TIL] JavaScript (19)

Today I Learn : 2024-06-24

 

# 모듈 (module)

• 모듈은 왜 쓰는가?

⇒ 개발하는 애플리케이션의 크기가 커지면 파일을 여러 개로 분리해야 하는 시점이 오는데 이때, 분리된 파일 각각을 모듈(module)이라고 부른다.

⇒ 가독성 ↑

⇒ 캡슐화

• 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성된다.
• 모듈에 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.
• type=”module” 속성을 사용하면 defer가 default로 들어가있다.

<script type="module" src="경로"></script>

---

# 모듈 내보내기

• 변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능하다. ⇒ 외부 모듈에서 해당 변수나 함수에 접근할 수 있다.

① named export

• 같은 js파일 내에서 여러 개를 export 할 수 있다.

export function functionName() {
  /* code */
}
export class className {
  /* code */
}
export const variableName = '';

또는

export { functionName, className, variableName };

참고) 클래스나 함수를 내보낼 땐 세미콜론을 붙이지 않는다.
1. 클래스나 함수 선언 시, 선언부 앞에 `export`를 붙인다고 해서 함수 선언 방식이 함수 선언문에서 함수 표현식(function expression) 으로 바뀌지 않습니다. => 내보내 지긴 했지만 여전히 함수 선언문입니다.
2. 대부분의 자바스크립트 가이드는 함수나 클래스 선언 끝에 세미콜론을 붙이지 말라고 권유합니다.

② default export

• 무조건 1개를 export 한다.

export default function fn() {
  /* code */
}

또는

export default fn;

# 모듈 가져오기

• 가져오고 싶은 것이 있다면 import { … }안에 적어주면 된다.

① import

// main.js
// 1) named export의 경우
import { functionName, className, variableName } from '경로';

functionName();

// 2) default export의 경우
import fn from '경로';

fn();

② import *

• 가져올 것이 많으면 import * as <obj> 처럼 객체 형태로 가져올 수 있다.

// main.js
// functionName, className, variableName 을 모두 가져올 경우
import * as name from '경로';

name.functionName();

③ import as

• as를 사용하면 가져오는 모듈의 이름을 바꿀 수 있다.

// main.js
import { functionName as fn, className as class, variableName as vari} from '경로';

---