모듈이란? 여러 기능들에 관한 코드가 모여있는 하나의 파일
모듈화는, 거대한 문제를 작은 조각의 문제로 나누어 다루기 쉽도록 하는 과정
모듈화를 통해 얻는 장점으로는,
- 파일들간에 중복적으로 발생할 수 있는 이름 충돌 방지
- 서로 간의 코드를 분리함으로써 모듈성 높여준다.
- 모듈간의 재사용성을 높여준다.
모듈화를 하지 않았을 때 발생하는 점
아래 예시에서는 html에서 module1.js 파일과 module2.js 파일을 만들어서 예시를 해보겠습니다.
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 src="./module1.js"></script>
<script src="./module2.js"></script>
</head>
<body>
</body>
</html>module 1
function callMyName () {
console.log("taenami");
}module 2
callMyName("taenami"); // taenami위에서 module1.js 파일에서 callMyName 함수를 작성하고, module2.js 파일에서 callMyName를 선언하지 않았지만, 정상 출력이 되는 것을 확인할 수 있습니다.
이는 모듈화해서 작성하지 않으면 모든 코드들은 window에 등록되어 지는데, 각 파일에서 동일한 이름으로 작성되면 충돌이 발생할 수 있는 것을 나타내 주었습니다.
대규모 프로젝트 같은경우에, 모듈화를 하지 않으면 함수 등록을 할 때, 전부 다 다른 이름으로 함수를 만들어 줘야 하는데, 이러한 번거로움을 만들 필요 없이, 모듈화를 이용하여 해결할 수 있습니다.
모듈화를 하게되면, 서로 다른 파일에서 다른 파일에 있는 것을 접근할 수 없습니다.
다른 모듈에 함수를 접근한다고 가정했을 때, 제공하고자 하는 모듈에서 export 하고, 사용하고자 하는 모듈에서 import 해야 한다.
모듈화 방법
먼저 html에서 <script> 태그 안에 (<script type="module">)type attribute에 module을 추가하면, 해당 스크립트가 모듈이란 걸 브라우저가 알 수 있고, module2.js 파일에서 callMyName의 함수를 호출할 수 없게 됩니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
...
<script type="module" src="./module1.js"></script>
<script type="module" src="./module2.js"></script>
</head>
<body>
</body>
</html>module2.js파일에서 module1.js 파일에서 작성된 callMyName 함수를 사용하려면,
모듈에 특수한 지시자 export와 import를 적용하면 다른 모듈을 불러와 불러온 모듈에 있는 함수를 호출하는 것과 같은 기능 공유가 가능합니다.
export 지시자를 통해, 변수나 함수를 외부 모듈에서 사용할 수 있게 합니다.
import 지시자를 통해, 외부 모듈에서 선언된 변수나 함수를 가져오게 됩니다.
module 1
export default function callMyName () {
console.log("taenami");
}module2
import callMyName from "./module1.js";
callMyName("taenami"); // taenami
출처:
https://ko.javascript.info/modules-intro#ref-830