모듈

Notice

Recent Posts

Recent Comments

Link

« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

Tags more

Archives

Today

Total

관리 메뉴

power-girl0-0

모듈 본문

언어/Javascript

모듈

power-girl0-0 2021. 2. 4. 19:15

728x90

생활코딩 javascript를 참고하여 공부하였습니다.

스스로 공부한 것을 정리하고 복습하기 위한 목적으로 작성하였습니다.

( 출처 : https://opentutorials.org/course/743)

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

이러한 과정에는 코드의 재활용성을 높이고 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다.

그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다.

아래는 이를 통해 얻을 수 있는 효과이다.

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

모듈

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

대신, 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공된다.

모듈의 필요성

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

위 코드는 간단한 코드이므로 문제가 되지 않는다.

하지만 welcome 함수가 자주 사용되는 것이라고 가정해보자.

이러한 경우, 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 될 것이다.

이 때 모듈이 필요하다.

모듈 사용

greeting.js라는 모듈을 만들어서 쉽게 사용한다.

아래는 greeting.js의 소스코드이다.

function welcome(){
    return 'Hello world';
}

소스코드를 생성한 후, 아까 html에서 script부분을 아래와 같이 변경해준다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <script src="greeting.js"></script>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

위 코드와 같이, src 속성을 이용해서 greeting.js 파일을 다운로드해서 실행시킨다.

즉, greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.

이처럼, 모듈은 같은 함수를 여러 페이지에서 사용해야 될 때 필요하다.

라이브러리

라이브러리와 모듈은 비슷한 개념이다.

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

프로그래밍에는 많은 라이브러리가 제공되는데, 이를 잘 선택하고 사용하는 것이 프로그래밍의 핵심이다.

본 글의 예제에서는 유명 라이브러리인 jQuery를 사용하여 실습하도록 하겠다.

jQuery를 사용하려면, jQuery 홈페이지에서 파일을 다운로드 받아야한다. ( http://jquery.com/ )

또한, 사용하기전에 jQuery 메뉴얼을 이용해서 사용법을 파악해야 올바르게 사용할 수 있다.

( http://api.jquery.com/ )

소스코드를 보기전, 결과를 먼저 보고 알아보도록 하자.

위 브라우저 모습에서 execute라는 버튼을 누르면, 아래와 같이 Coding everybody라는 글자로 바뀌게 만들 것이다.

1. jquery를 사용한 소스 코드

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script> //jquery 라이브러리 호출
</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(){ //execute_btn이 클릭되면 함수가 실행된다.
        $('#list li').text('coding everybody'); //list에서 li에 해당되는 문자열이 변경된다.
     })
    </script>
</body>
</html>

2. 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>

같은 기능인데도 라이브러리를 사용한 것이 현저히 간결하고 보기 쉬운 것을 알 수 있다.

따라서, 라이브러리를 잘 선택하고 사용하는 것이 프로그래밍의 핵심이다.

728x90