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 함수가 자주 사용되는 것이라고 가정해보자. 이런 경우 이것이 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 될 것이다. 이럴 때 모듈이 필요하다. 함수 welcome을 모듈로 만들어보자.

모듈의 사용

새로운 파일을 만든다. 이름은 greeting.js 다. 자바스크립트 파일은 확장자로 js를 사용한다.

greeting.js

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

main.html의 내용을 다음과 같이 변경한다.

main.html

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

이전 예제와 비교했을 때 결과는 같다. 하지만 함수 welcome을 main.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 (로드될 대상)

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

라이브러리

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

아래 예제는 유명 라이브러리인 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>

 

댓글

댓글 본문
작성자
비밀번호
  1. 김명수
    jQuery 아래분 경로설정이 잘못되신 것일 겁니다. CDN 서버를 이용해 보세요!
  2. ㄴㄴ
    너무 의미있는 강의였습니다 자바스크립트를 시작으로해서 아직 배우지얼마되지 않은 초등학생수준의 학력인데요 더욱 더 자바쪽을 열심히 공부해서 의미있는 코드와 개발자가 되도록 노력을 잊지않겠습니다 ^^
    참고로 목소리가 너무 좋으셔서 강의에집중이 더욱 잘됩니다 감사합니다~!
  3. 완료!
    완료! 감사합니다~
  4. wookim
    javascript에 대해서 잘 배우고 있습니다.
    한가지 궁금한 점이 있는데요, 왜 저희 컴퓨터에서는 jQuery가 적용이 안 될까요?
  5. 솔군
    2016.10.13 강의 시청
  6. 짱구파워
    click과 onclick 이벤트는 어떠한 차이가있나요??
  7. tachyon
    감사합니다!
  8. 내일도
    와 라이브러리로 이렇게. 쉽게 하다니
  9. 공부하는중..
    모듈화과 객체지향은 다른 의미인가요
    ---------------------------------------------------

    객체지향이란 ' 이런것이다 ' 라고 섣불리 말하기가 조금 애매하네요 ㅠ
    [ 제가 알고 있는 객체지향이란 객체들이 서로 협력하여 시스템의 기능 또는 시스템을 구성하는 방법 이라고 알고있습니다 .. (이 과정에서 모듈화(재사용, 캡슐화, ..) , 메시지, 역할 , 책임 , ... 등등의 특징 및 용어가 존재하는데 .. 설명 드리기가 난해하네요 .. ) ]
    다만 ,
    객체 지향의 요소 중의 하나가 모듈화 일뿐입니다
    대화보기
    • 이런
      모듈화과 객체지향은 다른 의미인가요
    • yihsang
      좋은 수업 감사합니다.
    • JS_Study
      좋은글 잘보고 갑니다.
    • JustStudy
      고맙습니다
    • 국제표준규격
      항상 꼭 넣는다고 기억하시면 돼요.

      자바스크립트가 엄격하게 문법을 체크하지 않아서 에러가 뜨지 않아도 실제 구현시 버그가 발생하는 경우가 많습니다. 그러니 항상 문장 끝에 ;를 넣는다고 생각하시면 됩니다.
      대화보기
      • 이기찬
        프로그래밍의 세계에는 휼룡한 라이브러리가 많다
        훌룡한 -> 훌륭한
        감사합니다.
      • 자바나 C에서는 명령의 끝을 ; 로 구분을 하지만, 자바스크립트에서는 명령의 끝을 ; 이외에도 줄바꿈으로 대체 가능하다고 하였습니다.

        주석 토픽에 설명이 나와있네요.
        대화보기
        • Byeong Koo Kang
          좋은 강의 감사합니다!
        • basicb
          수업 큰 틀에서 잘 듣고 있는데 세미콜론을 언제 쓰는지가 복병(?)으로 등장하여 매번 헷갈리네요 ㅎㅎ 외국 포럼 찾아봐도 '자바스크립트는 원래 어지러워요~' 하며 다들 말이 다를뿐이고...ㅜㅜ 가령 예제 2번째 동영상에서 쓰신 코드 보면

          function welcome(){
          return 'Hello world'
          }

          강의 중에 세미콜론 빼먹으셨다고 중간에 말씀하시던데 그게 없어도 작동은 잘 하더라구요? 작동이 된다는 것은 곧 생략을 해도 된다는 것으로 받아들여야 하는것인지 혼란스럽더라구요. 앞에서부터 배워온 바에 따르면 저기서는 세미콜론을 붙여야 맞는 것 같은데 말이죠.
        • Cho Jeaho
          자바 수업을 먼저 보려고 하다가 스크립트 보는데 프로그래밍이 재미있어졌어요~!ㅋㅋ
        • 이웃집토토로
          하나의 프로세스를 수행하는 단위 프로그램을 모듈이라고 합니다.

          - 모듈은 더 이상 나누어지지 않는 최소 단위 프로그램입니다.
          - 모듈은 가능한 사이즈가 작아야 합니다. 프로그래머가 수정이 용이하기 때문입니다.

          한편 이런 모듈이 프로세스의 단위라면 기능의 단위인 function point가 있습니다.
          이것은 모듈과 수가 일치할 수록 좋으며 1:1 대응할 경우 응집도가 가장 높다고 말합니다.
        • 엔트
          감사합니다!!
        • 택이
        • jovi23
          강의 잘 보고 있습니다.
          쉽게 설명 해주셔서 편하게 공부하고 있습니다!!!ㅋㅋㅋ
        • QuiDam
          개념 잡기 편하게 설명을 해주셔서 감사합니다.
          학원이나 다른 강좌들은 진도 나가기 바쁜 방식인 방면 이고잉님은 개념을 잡고 하나하나 쓰임세를 설명해주시니 공부가 즐겁습니다.
          욕심껏 공부하겠습니다. ^^
          매번 강좌 들으면서 감사하다는 생각만 했네요,
        • 그 동안 어렵게만 느껴졌는데 $의 의미가 확 와 닿는 수업이었어요!! 감사합니다!
        • 하냥
          잘 듣고 갑니다 감사합니다.^^
        • Alde
          사소한거지만...'휼룡한' 라이브러리라고 되어있네요ㅎㅎ
          잘 듣고 있습니다+_+
        • 호노호노
          말로만 듣던 jQuery란걸 여기서 알게 되었네요
          정말 간편하고 좋은 라이브러리군요..
        • Bae_God
          소름돋고갑니다
        • dickymicky
          헷갈리던 개념이 너무 잘 이해되었습니다.
          감사합니다 (_ _)
        • 이네스김
          저도 감사합니다. 가장 쉽다고 써있는 책보다 몇 배 더 쉽게 설명해주시네요!!!!!
        • 바람과 나무
          감사합니다. 알기쉽게 설명해 주셔서 ^^
        • 아드레날린
          정말 쉬운 설명!
        • Anna Kim
          참... 강의 들을때마다 느끼는데 커뮤니케이션 스킬이 최고시네요. 수업구성도 많은 공을 들이신것 같고요. 정치계에서 스피커 하셔야돼요 ㅎㅎㅎ
        • Ji Young Yoon
          감사히 잘 보았습니다. ^-^
          이해하기 쉽게 설명해주셔서 좋네요!!! ^-^
        • YellowBall
          잘 들었습니다.
        • xylicho
          표준말 속에 사투리가 들리는것 같아요 ㅎㅎㅎㅎ
          개인적으로 사투리를 좋아하는 사람이라 더욱 재밋게 보고 듣고 있습니다 ㅎㅎ
        • egoing
          명령과 명령을 구분해주는 역할을 합니다.
          대화보기
          • 조현민
            안녕하세요 강의가 너무 좋습니다. 고마운 분이시네요^^

            한가지 궁금한게 있는데요 별거 아닐수도 있는데요,

            ;(function(){...........

            이런형식으로 앞에 ; 가 붙은 소스들도 있는데 ; 가 무슨역할을 하는지 궁금합니다.
          • 박태우
            정말 잘 보고 갑니다!
          • 엠제이
            질문을 만들어 보았습니다.

            Q. 호스트 환경이란?
            Q. 모듈을 포함시키기 위해 script 태그에 사용해야 하는 속성은?
            Q. 모듈과 라이브러리의 차이점은? 동일한 개념으로 생각해도 되는가?

            세번째 질문에 대한 제 대답은 그렇다.. 입니다. 모듈과 라이브러리가 참 범용적인 단어라 구지 구별을 해서 혼동이 있을 필요는 없어 보입니다. ^^
          • 조신부리
            잘봤습니다. jQuery library 특강 좀 부탁합니다. 1만라인이지만.....
          • 정말 도움이되는 좋은 수업이에요!!
          • Mickey
            document.write(write());
            로 하면 원하는 결과를 보실 것 같습니다
            대화보기
            • 나무마루
              node.js와 jQuery 를 살짝이나마 맛볼 수 있어서 좋았습니다.
            • 요네츄
              정말 좋은강의에요 good!!!
            • Seon Hong Kim
              모듈화라고 해서 엄청 어려운 방식인줄 알았는데.... 외부 저장방식이였군요! 외부에 공통으로 들어가는 것을 common.js 등으로 넣으면 된다고 J쿼리 배울때 배운 적이 있는데 그게 모듈화하니.....
            • 상상초월
              exports.area = function (r) {
              return PI * r * r;
              };

              circle.area(4)); --> 이런식으로 정의는 area 라는 변수로 선언하지만
              호출할때는 인자를 사용해 호출도 가능하군요.. 자바스크립트 는 처음이라 생소한게 좀 있네요
            • 상상초월
              사소한 건데요 동영상 안에 sub.html 에서
              <script>
              welcome();
              </script>
              이렇게 타이핑하고 실행하시면 아무것도 안나와요 문자열을 받아줄수있는 alert()함수에 welcome() 넣어주면 창이 뜹니다.
            • Son Of Devil
              대~~~~박~!!! egoing님, 쵝오십니다!!
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기