자바스크립트 기본 - 모듈
모듈 - https://opentutorials.org/course/743/4750
모듈화 - 프로그래밍을 구성하고 있는 로직들을 재사용할 수 있는 단위로 조각조각 나눠서 별도의 모듈이라는 형태로 떼어내서 이것을 또 다른 프로그램에 부품으로 사용하는 기법
코드를 여러 개의 파일로 분리하여 모듈화를 시키는 방법의 장점
1. 자주 사용하는 코드를 별도의 파일로 만들어서 재활용할 수 있다.
2. 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다.
-> 파일의 이름에 따라서 관련되어 있는 로직들이 모여 있기 때문에 로직을 빠르게 찾을 수 있는 것이다.
3. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
-> 각 각의 파일별로 필요한 것들이 쪼개져서 분리되어 있기 때문에 필요한 파일만 읽어와서 메모리의 낭비를 방지 할 수 있다.
4. 한 번 다운로드된 자바스크립트는 브라우저에 그 내용이 저장되어 있기 때문에 트레픽을을 절약 할 수 있다.
호스트 환경 - 자바스크립트가 구동되는 환경, node.js 혹은 브라우저 등등..
호스트 환경에 따라서 모듈을 사용할 수 있는 방법이 다르기 때문에 이 부분도 확인하여 모듈화작업을 진행해야 한다.
모듈은 왜 필요할까? 모듈의 필요성(웹브라우저 환경에서 진행)
모듈이 없는 스크립트 (최대로 간단한 예제로 진행)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>
현재는 하나의 html에서 welcome함수를 호출하지만 만약 수십개의 html에서 welcome함수를 부른다면 모든 html에 welcome함수를 넣어주어야 한다.
모듈이 있는 스크립트 (최대로 간단한 예제로 진행)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src = "greeting.js"></script> <!--
script 파일을 읽을 때 src 속성이 있다면 .js파일이 <script></script> 사이에 있는 것처럼 읽게 된다.
-->
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
greeting.js 파일을 따로 만들어서 이곳에 function을 넣어둔다.
이 경우 어떤 html파일에서도 head부분에 <script src = "greeting.js"></script> 을 넣어주면 welcome함수를 이용할 수 있다.