본문 바로가기
개발이야기/JavaScript

10. 모듈

by hyung12 2019. 5. 14.
반응형

모듈이라는 것을 알아보기 전에 부품이라는 단어의 의미를 생각해볼 필요가 있다.

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

작고 단순한 것에서는 그렇게 필요없지만 크고 복잡한 것에서는 반드시 필요한 것들이 바로 코드의 재활용성 또는 유지보수를 쉽게 할 수 있는 다양한 기법들이다.

이러한 것들을 통해서 어떤 프로그램을 구성하고 있는 수많은 로직들을 재사용할 수 있는 단위로 조각 조각 나눠서 구획화를 시켜 별도의 모듈이라는 형태로 떼어내서 이것을 또 다른 프로그램에 부품으로 사용하는 기법, 또 그 부품들을 모듈이라하고 이를 모듈화라고 한다.

모듈화라는 목적을 이루는 방법 중에 하나가 바로 이 코드를 어떤 취지에 따라 동작하는 방법에 따라 여러개의 파일로 분리해서 사용하는 것이다.

이를 통해 얻을 수 이는 효과는 

  1. 자주 사용하는 코드를 별도의 파일로 만들어 필요할 때마다 재활용할 수 있다.(함수처럼 재사용성이 높지만 함수보다는 더 큰 개념이다)

  2. 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.(파일로 모듈을 쪼개 놓으면 파일 이름으로 쪼개 두기에 금방 찾을 수 있다)
  3. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
  4. 한번 다운로드된 모듈(자바스크립트)은 웹브라우저에 의해 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약할 수 있다.(브라우저에서만 해당)

 

 

 

모듈이란

 

자바스크립트에서는 모듈이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스트립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다.

 

 

 

모듈이 없다면

 

모듈이 없는 애플리케이션 하나를 만들어보자.

해당 예제는 이해를 돕기 위해 만든 코드이므로 이정도 규모의 코드는 모듈화를 할 필요도 생각도 할 필요가 없다. welcome 안에 있는 내용이 매우 복잡한 코드라고 가정한다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
</head>
<body>
    <script>
        function welcome(){
            return 'Hello world'
        }
        alert(welcome());
    </script>
</body>
</html>

 

welcome 함수가 자주 사용되는 것이라 가정해보자. 이런 경우에 welcome 함수를 모듈로 만들어보자.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script> <!-- src 안에 파일을 불러옴 -->
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

 

greeting.js 파일을 만들기

function welcome(){
    return 'Hello world'
}

 

모듈화를 하면 이처럼 다른 곳에서도 greeting.js 파일 안의 함수를 호출할 수 있다.

 

 

 

라이브러리

 

라이브러리와 모듈은 비슷한 개념인데, 모듈이라는 것은 프로그램을 구성하는 작은 부품이라고 하면 라이브러리라 함은 자주 사용하는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드를 말한다. 프로그램밍의 세계에서는 아주 많은 라이브러리가 존재한다.

특히 오픈 소스를 통해 만들어진 수많은 라이브러리가 있기 때문에 만들고자 하는 것이 있다면 직접 만드는 것도 좋지만 누군가가 만들어 둔 라이브러리가 있는지 먼저 검색 또는 질문을 통해 찾아보는 것이 순서이다. 단지 사용하기 위한 도구를 필요로 하는 것이라면 라이브러리를 사용하는 것을 권장한다.

 

아래 예제는 유명 라이브러리인 jQuery를 사용하는 방법이다.  jQuery 홈페이지에서 파일을 다운로드 받는다. 

http://jquery.com/

 

jQuery 메뉴얼을 이용해서 사용법을 파악한다.

http://api.jquery.com/

 

아래는 jQuery를 이용한 예제이다.

<!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');
     })
    </script>
</body>
</html>

 

다음은 jQuery를 이용하지 않고 동일한 기능을 구현한 예제이다.

<!DOCTYPE html>
<html>
<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">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

 

jQuery를  통하지 않으면 이렇게 많은 코드를 작성해야하며 완전하지 않은 코드가 나올 수 있다. 그렇기에 jQuery와 같은 라이브러리를 사용하는 것도 중요하다! (이 부분의 핵심 내용임!!!)

 

 

 

 

 

-출처: 생활코딩

반응형

'개발이야기 > JavaScript' 카테고리의 다른 글

[Javascript] Array Method map()과 foreach() 차이  (0) 2022.06.29
11. UI와 API 그리고 문서보는 법  (0) 2019.05.14
9. 객체  (0) 2019.04.18
8. 배열  (0) 2019.04.16
7. 함수  (0) 2019.04.10

관련글

티스토리툴바