Languages/Java Script

[Js] 모듈 | 모듈의 사용 | Node.js에서의 모듈의 로드 | javascript 모듈 | 라이브러리

해당 포스팅은 "생활코딩"의 이고잉 님의 강의를 기반으로 올린 게시글 입니다.

※ 상업적인 용도가 아닌,

개인 공부 정리 목적으로 올리는 글임을 미리 알립니다.

모듈을 이해하기 전, 부품이라는 것에 대해 잠시 알아보도록 하자.

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

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

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

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

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

모듈이란

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

하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 이 수업에서는

자바스크립트의 대표적인 호스트 환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아볼 것이다.

호스트 환경이란?

호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다.
자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다.

예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만
이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.

또 구글의 제품 위에서 돌아가는 Google Apps Script 역시 자바스크립트이지만 google apps script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다.

여러분은 자바스크립트의 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(Google Apps Script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.

모듈을 만드는 방법을 알아보기에 앞서서 모듈이 없는 상황을 가정해보자.

모듈이 없다면

우선 모듈이 없는 애플리케이션을 하나 만들어보자. 파일의 이름은 main.html 이다.

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

예를들어 이 파일의 welcome이라는 함수를 많은 페이지에서 사용한다고 가정을 해보자.

현재는 짧은 코드지만, 함수 내용도 1000줄 가까이 된다고 가정을 했을 때,

welcome()이라는 함수가 main.html에 들어간 것은 매우 비효율적이 될 것이다.(유지보수 어렵고, 낭비가 됨)

main.html 이라는 파일에 부하가 걸릴 뿐더러, 여러 페이지에서 이 함수를 사용하기 위해

매우 불편한 과정을 거쳐야 할 것이다.

이럴때 만약 모듈 개념이 들어가서, welcome 함수를 따로 빼서, 어디서나 사용할 수 있다면

그것은 매우 효율적으로 동작할 것이다.

아래 코드를 살펴보자.

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

script 구문 뒤, src라는 것이 붙어있는데 이를 속성이라고 한다.

script라는 태그에 src 태그가 있다면 이 속성안에 해당하는 값을 읽어와서 파일안에 내용을 스크립트 안에 넣는 것과 동일한 효과를 낸다. 즉, greeting.js라는 파일을 스크립트 안에 넣는것과 동일한 효과를 내는 것이다.

이렇게 되면, main 파일의 코드가 간결해지며, 코드를 보기 매우 편리하게 된다.(코드 관리도 효율적)

또한 다른 파일(sub.html)에서도 함수를 이용하기가 매우 간편해진다.

▼ 코드 설명

<script src="greeting.js"></script>

JavaScript와 HTML은 완전히 다른 문법을 가진 언어다.

그런데 HTML 문서 안에는 JavaScript와 HTML이 동시에 표현된다.

따라서 브라우저에게 어디서부터 어디까지가 JavaScript이고, HTML인지를 구분해서 알려줘야 한다.

이 역할을 하는 HTML 태그가 script 태그다. script 태그 안쪽에 위치하는 컨텐츠는 브라우저에 의해서 JavaScript로 인식된다. 그런데 위의 코드는 컨텐츠 대신에 src 속성이 있다.

브라우저는 src 속성에 있는 파일을 다운로드해서 실행시킨다.

greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의 되어 있지 않음에도

실행할 수 있는 것이다.

Node.js에서의 모듈의 로드

본 수업은 Node.js를 위한 수업이 아니기 때문에 Node.js를 실행하는 방법은 다루지 않는다. 호스트 환경에 따라서 모듈을 로드하는 방법이 달라진다는 것을 보여주기 위한 예제일 뿐이기 때문에 동영상 수업을 참고하자.

모듈을 로드하는 방법은 호스트 환경에 따라서 달라진다.

Node.js에서는 아래와 같은 방법으로 모듈을 로드한다.

읽음을 당하는 쪽

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

<script>
      var PI = Math.PI;

      exports.area = function (r) {
      return PI * r * r;
      };

      exports.circumference = function (r) {
      return 2 * PI * r;
      };
</script>

파일을 읽어오는 쪽

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

<script>

      var circle = require('./node.circle.js');
      console.log( 'The area of a circle of radius 4 is '
                 + circle.area(4));
        
</script>

node.js는 require

즉, 제공되는 함수를 이용하여 파일을 로드 할 수가 있는데 위 코드를 보면

demo.js에서 require로 circle에 circle.js를 담고 있다.

아래는 실행방법과 실행 결과이다.

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

위 내용은 완벽히 숙지할 필요 없이, 필요하다면 따로 node.js를 공부하길 바란다.

라이브러리

라이브러리는 모듈과 비슷한 개념이다.

모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다. 프로그래밍의 세계에는 휼룡한 라이브러리가 많다. 좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심이라고 할 수 있다.

자바스크립트에서 많이 사용하는 라이브러리 중 하나는 바로 jQuery이다.

1. jQuery 홈페이지에서 파일을 다운로드 받는다. (주황색 박스)

http://jquery.com/

jQuery

What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

jquery.com

2. jQuery 메뉴얼을 이용해서 사용법을 파악한다. (빨간색 박스)

http://api.jquery.com/

jQuery API Documentation

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. If you're new t

api.jquery.com

jQuery에서 라이브러리를 다운로드 받아서 파일 내용을 확인해보면 아주 큰 자바스크립트 파일이라는 것을 알 수 있다.

다운로드 후 복사하여 내가 사용하는 소스코드들이 있는 경로에 함께 jQuery를 넣고 저장한다.

jQuery파일이 잘 로드 되었는지 확인하고 싶다면

위와 같이 웹페이지에서 개발자모드로 들어가 network에서 tab을 클릭해주면 된다. (이곳에 있다면 정상적으로 로드된 것)

jQuery

jQuery는 모두 $로 시작한다는 약속이 있음.

#list라고 한다면, 해당하는 id에 접근하는 것이고,
그 안에 있는 세부 내용에 접근 시 위와 같이 코딩해주면 된다.

즉 list라는 ul안에 li안에 text인 empty를 coding everybody로 바꿔주는 것이다.

아래는 jQuery를 이용한 예제이고,

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input type="button" value="click me" id ="button_click" />
    <script>
    //#은 아이디를 의미한다고 생각하면 됨.        
        $('#button_click').click(function(){
            $('#list li').text('hello haeun~~');
        })

    </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>

이부분에 대해서는 강의 내용을 한번 들어보길 권장한다.

코드 실행 시

버튼을 클릭하면 li의 텍스트가 변경된다.

opentutorials.org/course/743/4750

모듈 - 생활코딩

프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화한다. 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 여러개의

opentutorials.org

'Languages > Java Script' 카테고리의 다른 글

[Js] 정규 표현식 \| 컴파일? \| 정규표현식 리터럴 (0)	2021.02.04
[Js] UI와 API 그리고 문서보는 법 \| API란? \| javascript API (0)	2021.02.04
[Js] 객체 \| javascript 객체 \| 객체 지향 프로그래밍 (0)	2021.02.03
[Js] 배열 \| javascript 배열 \| 배열이란? (0)	2021.02.03

Contents

새소식

인기 검색어