모듈(Module)

모듈

프로그램은 작고 단순한 것에서부터 크고 복잡한 것으로 진화한다.

그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게할 수 있는 다양한 기법들이 있는데,

그 중 하나가 코드를 여러 개의 파일로 분리하는 것이다. 이것을 모듈화라고 한다. 이의 효과는 다음과 같다.

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

 

1. 모듈이란?

자바스크립트에서는 모듈이라는 개념이 분명히 존재하진 않는다.

자바스크립트가 구동되는 환경(브라우저, Node.js, 구글, 앱스, 스크립트, ...)을 호스트 환경이라고 부르는데, 이 환경에 따라서 우리가 모듈을 사용할 수 있는 방법이 다 다르다. 따라서 환경에 따른 모듈화 방법을 별도로 공부해야 한다.

여기서는 기본적으로 웹브라우저에서 자바스크립트 파일을 모듈화하는 방법을 중점적으로 다룰 것이다.

 

 

2. 모듈이 없다면?

먼저 모듈이 없는 애플리케이션을 살펴보자.

welcome 함수가 엄청 길다고 생각하자. 그리고 main.html에서 이 함수를 20, 30, ... 50번 호출된다고 가정하자. 그러면 main.html에 welcome 함수를 50번 가지고 있다는 것이다.

 

3. 모듈의 사용

이 자바스크립트 코드를 외부 파일로 저장하고 모듈로 가져오자. src="파일명.js" 로 가져올 수 있다.

그럼 이제 main.html의 <script></script>태그 내에 welcome 함수를 가지고 있는 것(=치환)과 동일한 효과를 가져온다. 브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다. greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.

 

이렇게 하면 코드의 가독성이 높아지고 간결해진다. 그리고 main.html 파일의 용량이 적어지고 클라이언트에서는 필요한 파일만 가져오므로 이득이다.