모듈

모듈화란?

• 하나의 코드를 여러 개의 파일로 분리하는 작업

모듈화 특징

• 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용이 가능하다.
• 코드를 개선하면 이를 사용하는 모든 애플리케이션의 동작이 개선된다.
• 코드 수정 시에 필요한 로직을 빠르게 찾을수 있다.
• 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
• 한 번 다운로드 된 모듈은 웹 브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약할 수 있다. (브라우저에서만 해당)

모듈화 방법 (기본)

만약 index.html의 script 태그 안에

function returnHelloWorld(){
        return "Hello World";
}
alert(returnHelloWorld());

라는 기본적인 javascript 코드가 있다고 치면,

지금은 매우 기본적인 짧고 간단한 코드지만 코드의 양이 많아지게 된다면
코드의 활용성과 가독성이 떨어지게 된다.

그렇기 때문에 returnFunction.js같은 연관되 있는 기능들을 한 곳에 모아둘수 있는
새로운 파일을 새로 만들어서 그 파일에 따로 선언해둔 다음에
index.html에 와서 script 태그의 src 속성으로 returnFunction.js를 연결해서 사용한다.

그렇게 되면 returnFunction.js에는 연관된 기능들끼리만 모여있기 때문에
편리성과 재활용성과 가독성이 좋아지게 되며 이 경우에서의 index.html의 script 코드에는 alert(returnHelloWorld());만 남기 때문에
코드가 매우 간결해지는 효과를 얻게 된다.