📌 먼저 알려드립니다

✅ index.html , index.js 와 같이 파일명과 확장자가 표시된 코드는 실제로 실행 가능하며,
     파일명 그대로 복사하셔서 생성 후, 코드를 복사해서 붙여넣기 하시면 실행이 가능합니다.

✅ *표시가 있는 단어는  `🤔 궁금해요!`  앞에 있는 **화살표**를 클릭하시면,
      참고하실 수 있게 부가적인 설명을 보실 수 있습니다.

모듈이란

프로그램을 구성하며 하나의 동작을 수행하는 독립적인 클래스 또는 함수를 말합니다.

여러 가지 기능들에 관한 코드가 모여 있는 하나의 파일을 말하며, 다음과 같은 이유로 사용되고 있습니다.

유지 보수성 (Maintainability) : 기능들이 모듈화가 잘 되어 있다면, 그만큼 기능 간 의존성을 줄일 수 있기 때문에 기능을 개선하거나 수정할 때 훨씬 편합니다.

기능들이 모듈화가 잘 안되어 있는 경우는 책을 예를 들어 설명하겠습니다. 책의 일 부분(한 챕터)을 수정할 때 다른 모든 부분(챕터)을 수정해야 한다면 참으로 끔찍하겠죠? 당연히 책의 다른 부분에 영향을 끼치지 않고 책의 일 부분(한 챕터)만 수정하고 싶을겁니다.

네임스페이스화 (Namespacing) : 여러 스크립트가 한 페이지 안에 함께 있는 코드에서는 전역 변수가 많아질 수록 이름이 겹칠 우려가 있습니다. 뿐만 아니라 어느 곳에서든 접근이 가능하므로 코드의 신뢰성을 떨어트릴 수 있습니다. 그러나, 모듈로 분리하면 모듈만의 네임스페이스를 갖기 때문에 신뢰성을 확보할 수 있습니다.
재사용성 (Reusability) : 똑같은 코드를 새로운 프로젝트 생성 시 또는 전혀 다른 프로젝트에서도 사용할 수 있습니다.

그럼 도대체 모듈의 장점은 무엇일까요? 아래 예제 코드를 통해 살펴보죠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
	</head>

	<body>
		<script>
			function helloMedistream() {
				return 'Hello, Medistream!'
			}

			alert(helloMedistream())
		</script>
	</body>
</html>

예제 코드는 문제 없이 실행이 잘 됩니다.

하지만, helloMedistream 이라는 함수가 자주 사용되는 함수라고 가정을 해봅시다.

이 함수가 실제로는 복잡한 로직을 가지고 있다면, 필요한 html 페이지마다 함수의 전체 로직을 사용하는 것은 낭비이고 유지보수도 힘들게 됩니다.

그럼 이제 이 코드를 모듈화의 개념을 적용해서 조금 수정해 볼까요?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="helloMedistream.js"></script>
	</head>

	<body>
		<script>
			alert(helloMedistream())
		</script>
	</body>
</html>

function helloMedistream() {
	return 'Hello, Medistream!'
}

위와 같이 수정된 예제 코드를 살펴보면,

index.html 파일의 head 태그 안에 <script src="helloMedistream.js></script> 라고 선언해 준 뒤,