모듈

Last updated 3 years ago

Was this helpful?

모듈

재활용성을 높이고 유지보수를 할 수 있도록 단위로 조각조각 나눠서 구획화를 시켜서 모듈화 (파일을 분리) 것을 모듈이라고 한다.

모듈의 장점

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

호스트 환경

호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.

// 모듈화 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        function welcome(){
            return 'Hello world'
        }
        alert(welcome());
    </script>
</body>
</html>
// 모듈화 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script> 
    // 모듈화 시킴 위에 코드와 내용은 동일하다.
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

코드의 가독성을 높여주게됨.

Node.js 모듈의 로드

node.circle.js (로드될 대상)

var PI = Math.PI;
  
exports.area = function (r) {
return PI * r * r;
};
  
exports.circumference = function (r) {
return 2 * PI * r;
};

node.demo.js (로드의 주체)

var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
           + circle.area(4));
           
// 실행결과 
F:\BitNami\wampstack-5.4.22-0\apache2\htdocs\javascript\module>node node.demo.js
The area of a circle of radius 4 is 50.26548245743669

라이브러리

모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합

제이쿼리 ( 대표적 라이브러리)

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
        // execute_btn을 클릭하면 list li내용이 모두 coding everybody로 변경된다.
        // 간단한 코드로 내용을 변경시킬 수 있다. 
     })
    </script>
</body>
</html>

PreviousUI API, 문서 Next객체