✅ index.html , index.js 와 같이 파일명과 확장자가 표시된 코드는 실제로 실행 가능하며,
파일명 그대로 복사하셔서 생성 후, 코드를 복사해서 붙여넣기 하시면 실행이 가능합니다.
✅ *표시가 있는 단어는 `🤔 궁금해요!` 앞에 있는 **화살표**를 클릭하시면,
참고하실 수 있게 부가적인 설명을 보실 수 있습니다.
프로그램을 구성하며 하나의 동작을 수행하는 독립적인 클래스 또는 함수를 말합니다.
여러 가지 기능들에 관한 코드가 모여 있는 하나의 파일을 말하며, 다음과 같은 이유로 사용되고 있습니다.
기능들이 모듈화가 잘 안되어 있는 경우는 책을 예를 들어 설명하겠습니다. 책의 일 부분(한 챕터)을 수정할 때 다른 모든 부분(챕터)을 수정해야 한다면 참으로 끔찍하겠죠? 당연히 책의 다른 부분에 영향을 끼치지 않고 책의 일 부분(한 챕터)만 수정하고 싶을겁니다.
네임스페이스화 (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>
라고 선언해 준 뒤,