* 모듈(module)이란?
- JS파일별로 캡슐화를 하는것
- 모듈은 단지 파일 하나에 불과합니다. 스크립트 하나는 모듈 하나입니다.
- 모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.
- script 태그의 attribute에 type="module"를 추가해주어서 모듈화를 해준다.
- export default는 모듈에서 딱 하나만 지정해줄 수 있으면 import를 해줄때 작명을 마음대로 해도된다.
- 여러가지를 내보낼때는 export를 이용해야한다.
- import { export명 동일하게 }
- as를 통해서 원하는 이름으로 변경도 가능하다. // import { export명 동일하게 as 내가원하는이름 }
- get, set함수를 이용해서 캡슐화를 해줄 수 있도록 하자.
- get함수를 이용해서 변수값을 export해준다. 그러면 해당 변수는 export해주지 않았기때문에 다른 js파일에서는 변경이 불가능하다. 데이터를 안전하게 보존시켜줄 수 있다.
- get함수를 이용해서 변수값을 export해준다. 그러면 해당 변수는 export해주지 않았기때문에 다른 js파일에서는 변경이 불가능하다. 데이터를 안전하게 보존시켜줄 수 있다.
- * 애스터리스트( * )를 이용해서 모든 데이터를 그룹화해서 한번에 불러올수도 있다.
- ex) import * as counter
- 객체처럼 사용하면된다. ex) counter.increase()
* 모듈(module)을 사용 하는 이유
- 유지보수성 : 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일 수 있기 때문에 어떤 기능을 개선한다거나 수정할 때 훨씬 편하게 할 수 있다.
- 네임스페이스화 : 자바스크립트에서 전역변수는 전역공간을 가지기 때문에 코드의 양이 많아질수록 겹치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 그 문제가 해결된다.
- 재사용성 : 똑같은 코드를 반복하지 않고 모듈로 분리시켜서 필요할 때마다 사용할 수 있다.
- 전역변수 및 전역함수는 브라우저상에서 서로 값을 확인하고 변경할 수 있다. (node상에서는 error이 뜬다)
- 다른 파일에서 해당 변수의 값을 변경하면 브라우저상에서 값이 변경되어 출력되는 버그를 발생시킬 수 있다.
- 해당 버그를 방지하기 위해서 각각 파일들을 모듈처럼 만든다.
* 모듈(module) 사용 예시 코드
* index.html 파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="module" src="counter.js"></script>
<script type="module" src="main.js"></script>
</head>
<body></body>
</html>
* main.js 파일
// import { increase as increase1 } from './counter.js';
// import { increase, getCount } from './counter.js';
import * as counter from './counter.js';
counter.increase();
counter.increase();
counter.increase();
console.log(counter.getCount());
'Study > JavaScript' 카테고리의 다른 글
| [JavaScript_study] 프로미스(Promise) (0) | 2022.04.13 |
|---|---|
| [JavaScript_study] 자바스크립트의 작동 원리 (0) | 2022.04.13 |
| [JavaScript_study] error-bubbling (0) | 2022.04.12 |
| [JavaScript_study] 에러 핸들링(error-handling) (0) | 2022.04.12 |
| [JavaScript_study] 주석 (Comments) (0) | 2022.04.12 |