안녕하세요.
디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다.
이번 포스팅에서는 자바스크립트로 개발할 때
자주 듣게 되지만 한번에 이해하기 어려운 모듈에 대해 다뤄보겠습니다.
지금부터 가독성을 위해 문어체로 작성할게요!
모듈
- 모듈은 간단하게, 자바스크립트 파일 하나라고 할 수 있다.
- 복잡하고 많은 양의 코드를 기능에 따라 각각의 파일로 나눠 관리하면
1. 코드를 좀더 효율적으로 관리할 수 있다.
2. 비슷한 기능이 필요할 때 다른 프로그램에서 재사용 할 수 있다. - 공통된 기능이나 특정한 목적에 따라 각각의 파일을 분리하는 과정을 '모듈화'라고 한다.
모듈 스코프
- 모듈 파일 안에서 선언한 변수는 외부에서 자유롭게 접근할 수 없도록 막아야 한다.
- 모듈은 파일 안에서 모듈 파일만의 독립적인 스코프를 가지고 있어야 한다.
- HTML 파일에서 자바스크립트 파일을 불러올 때 모듈 스코프를 갖게 하려면, sxript 태그에 type 속성을 module이라는 값으로 지정해야 한다.
<body>
<script type="module" src="index.js"></script>
</body>
모듈 문법
export와 import
모듈 스코프를 가진 파일에서 외부로 내보내고자 하는 변수나 함수를 export 키워드를 통해 내보낸다.
모듈 파일에서 냉보낸 변수나 함수들은 다른 파일에서 import 키워드를 통해 가져온다.
// printer.js
export const title = 'CodeitPrinter';
export function print(value) {
console.log(value);
};// index.js
import { title, print } from './printer.js';
print(title);
728x90
'코딩도 합니다 > JS' 카테고리의 다른 글
| [자바스크립트 js] 모듈 복습 및 활용 / 직전 게시물 정리 (0) | 2021.06.19 |
|---|---|
| [자바스크립트 js] 모듈 문법 / as 키워드 / * 와일드 카드 문자 / imprt 키워드 / export 키워드 / default export / named export (0) | 2021.06.19 |
| [자바스크립트 js] Map / Set (0) | 2021.06.16 |
| [자바스크립트 js] sort 메소드 / reverse 메소드 (0) | 2021.06.16 |
| [자바스크립트 js] 배열 메소드 / reduce (0) | 2021.06.16 |