모듈화의 개념과 이슈

1. 모듈

애플리케이션을 구성하는 개별적인 요소 매우 복잡하고 긴 코드를 작성할 때 사용 용도에 따라 파일 단위로 구분한 뒤, 다른 파일에서 해당 클래스나 함수가 필요할 때 가져와서 사용할 수 있도록 해줌

 일반적으로, 파일 단위로 분리되어 있고 필요에 따라 애플리케이션은 명시적으로 모듈을 로드함.

 

 모듈은 애플리케이션에 분리되어 개별적으로 존재하다가 애플리케이션의 로드에 의해 요청되었을 때 비로소 애플리케이션에 주입됨. 모듈은 모두 기능별로 작성하므로 개발 효율성과 유지보수성에 도움이 됨

 

 C에는 전처리기, Java는 import 등을 통한 모듈 기능을 가지고 있으나, js는 <script /> 태그를 이용하여 외부 스크립트 파일을 가져올 수는 있으나 파일마다 독립적인 파일 스코프를 갖고 있지 않아 하나의 전역 객체에 바인딩되기 대문에 전역변수가 중복되어 충돌되는 문제가 발생할 수 있음.

 

 또한, 분리해놓은 많은 js 스크립트 파일을 하나씩 따로 로드해오면 웹 페이지 로딩시 커다락 속도 저하 문제가 발생할 수 있기 때문에, webpack 등과 같은 모듈 번들러를 통해서 많은 js 스크립트 파일을 하나의 js 파일로 번들링하는 작업을 하여 프로젝트의 성능 향상과 개발 라이프 사이클을 고려하게 되었음.

 

 

 쉽게 설명하면 다음과 같음.

<script src="/js/common.js" type="text/javascript"></script>
<script src="/js/crmm.js" type="text/javascript"></script>
<script src="/js/template.js" type="text/javascript"></script>

위 코드는 일반적으로 js에서 <script> 태그를 이용하여 모듈화를 하는 방식이나, 이 때 발생할 수 있는 문제로 여러 개의 파일을 로딩하더라도 같은 스코프를 공유하기 때문에 전역 변수 명이 같은 경우의 충돌이 일어날 수 있으며, 위 라이브러리들의 로딩 순서에 따라서 발생할 수 있는 문제점, 복잡도 등의 문제를 야기할 수 있음

 

 이 때문에 AMD(Asynchronous Module Definition, 예) RequireJS), 모듈 로더, webpack 등이 등장하게 됨

 

CommonJS와 AMD에 대한 설명은 여기 게시글을 참조

 

 

 

 

[참고] https://d2.naver.com/helloworld/12864

[참고] https://ko.wikipedia.org/wiki/모듈_(프로그래밍)

[참고] https://poiemaweb.com/nodejs-npm

[참고] https://webclub.tistory.com/635?category=718289