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 랑 $ 이 뭔가 진짜 궁금했는데 짱이다. 와 귀에 쏙쏙 들어와요 아직 뇌에 쏙쏙 안박혔는데 진짜 감사합니다.
  2. moon
    감사합니다.
  3. creativedesigner
    많은 도움받고 있습니다
    공부만 하면 왜이리 잠이 오는지 ㅋㅋ
  4. ohaeyoon@gmail.com
    강의 감사합니다.
  5. 감사합니다~
  6. 감사합니다.
  7. OHOHAOHO
    수업 잘 봤습니다. 감사합니다.
  8. 안장호
    감사합니다~! ^^
  9. 듀티프리
    좋아요. 감사합니다.
  10. 택길이지
    jquery는 켜는게 아니에요
    다운로드 받으면 jquery-1.11.0.min.js 이와 유사한 이름의 파일을 하나 내려 받는거에요
    파일명의 숫자는 jquery 버전을 나타내는거라 다 다를수 있어요. 일단 버전은 크게 중요한건 아니고요
    다운로드 받은 jquery 파일을 html 테그중에 head 테그 사이에 적어 놓기만 하면 일단 사용 준비는 완료가 된거에요
    <head>
    <script src="/js/lib/jquery-1.11.0.min.js"></script>
    </head>
    src="/js/lib/jquery-1.11.0.min.js" 이 부분은 제가 예를 들려고 적은거라 역시 사람들 마다 다 다를수 있어요
    웹브라우저에서 접근 할 수 있는 경로에 jquery 파일을 위치 시키고 그 경로를 script 테그를 이용해서 적어주면 되는거에요
    잘 모르겠으면 그냥
    <head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    </head>
    헤더 태그 안에 위의 script 태그를 그대로 넣고 사용하셔도 돼요 다운받아서 사용하느냐 링크로 걸어서 사용하느냐의 차이일 뿐이니까...
    대화보기
    • awesomefreak
      jquery를 다운받으면 파일로만 다운로드가 되고 키려면 킬수가 없다고 나오는데 ㅠㅠ 웹으로도 그 파일 열어보았지만 열리지도 않고..어뗗게 된건지 모르겠습니다. ㅠㅠ
    • 지나가던 나그네
      <input id="excute_btn" type="button" value="execute" />
      <sciprt type="text/javascript">
      $('#execute_btn').click(function(){
      $('#list li').text('coding everybody');
      })
      </sciprt> 이부분 오타있습니다~
      </script> 입니다
      대화보기
      • 김진홍
        감사합니다~~
      • 정리-
        모듈(module)
        수 많은 로직을 재사용할 수 있는 단위로 나누어,
        별도의 모듈이 라는 형태로 떼어내 다른 프로그램에 부품으로 사용하는 기법.
        그 기법을 모듈화(Modularization), 결과물을 모듈이라 한다.

        - 호스트 환경
        javascript가 구동되는 환경.
        웹브라우저를 위한 언어로 시작했지만(클라이언트), 서버측에서 실행되는 javascript도 있다(서버사이드).
        또한 구글의 App위에서도 돌아가는 것이 있으므로, 호스트 환경에 따라 모듈화 하는 방법을 알아야 한다.

        - 모듈과 라이브러리의 차이
        모듈이 프로그램의 작은 부품이라 하면,
        라이브러리는 자주 사용되는 부품을 재사용하기 편하게 잘 정리한 코드의 집합.
        특히 라이브러리는 많은사람들의 노력과 돈, 노우하우를 집중해 만들어 놓아 아주 완성도가 높다.

        - 라이브러리를 쓰는 이유
        자기혼자서 만드는 것이 여러가지 이유로 필연적이지 않으면,
        다른사람이 이미 만들어 놓은것을 부품으로 조립해서 만들어 가는것이 소프트웨어를 만드는 '기본중의 기본'이다.
      • 박인호
        12-08
        수강완료.
      • atnskynst
        12/05
      • ㅋㅋㅋㅋ
        대화보기
        • nulgrace@naver.com
          아 정말 감사합니다 ㅠㅠ 이런 오타로 인한 에러는 어떻게 쉽게 디버깅 할 수 있는 방법 없을까요?ㅠ
          대화보기
          • 찐찐
            <sciprt type="text/javascript">
            오타 있습니다
            scirpt <<
            대화보기
            • 한민수
              <!--jQuery.demo.html-->
              <!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="excute_btn" type="button" value="execute" />
              <sciprt type="text/javascript">
              $('#execute_btn').click(function(){
              $('#list li').text('coding everybody');
              })
              </sciprt>
              </body>
              </html>
              -------------------------------------------------------------------------------
              <!--jQuery.demo2.html-->
              <!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.demo.html 파일과 jQuery.demo2.html파일의 소스는 동일합니다.
              jQuery.demo.html파일은 제가 직접 타이핑을 하였고, jQuery.demo2.html파일은 위에 올라와있는
              코드를 복사한것입니다. 두 파일을 크롬에서 열어보았는데 제가 직접 타이핑한 jQuery.demo.html파일은
              jQuery부분이 인식이 안되고 그냥 텍스트로 읽혀지고, jQuery.demo2.html파일은 인식이 되어 잘 돌아갑니다.
              이러한 문제는 왜 발생하는 건가요? 제가 놓친 것이 있다면 알려주시면 감사하겠습니다.
            • 이병학
              감은 좀 잪히는 것 같은데 코드 이해가 쉽지 않네요.
              애고 나이 탓인가????
              아무튼 감사합니다.
            • 수복
              모듈에 대한 전반적인 설명 감사합니다.
            • GoldPenguin
              완료했습니다.
            • ㅋㅋㅋㅋ
              대화보기
              • 이성준
                엉덩이로 말합니다. 너무 감사합니다.
              • 감사합니다.
                日日新又日新~!!
              • Jeong Min Lee
                강의 잘 봤습니다. 감사합니다. ^^
              • 아이노바
                가슴으로 말합니다. 너무 감사합니다.
              • 신시내티
                쉽게 설명해주셔서 감사합니다!!!!

                JQuery를 만든 존 레직은 진심 천재임!
              • 박철오
                제이쿼리도 배워고 싶다
              • 핫태
                수업 너무 잘듣고 있어요 ~ 감사합니다.
              • Jeon Young Ho
                잘 보고 있습니다. 감사합니다.
              • Seo Yun Seok Tudoistube
                여러종류의 자바스크립트 언어가 다 달라보이는데 이제는 어떤 부분이 다르고 같은지 눈에 보이면 좋겠습니다. 감사합니다^_____^!!!
              • sssjunn
                감사합니다
              • Gangso Lee
                done_감사합니다.
              • crable
                감사합니다.
              • 리 ㄴr
                감사합니더
              • 최규선
                20170423 수강완료. 감사합니다.
              • 김소희
                정말 최고인듯합니다 늘 감사합니다!!
              • 조승현
                굿 따봉
              • 전성욱
                8개월전 글이라 지금 답변드려도 보지는 못할것 같지만 저도 머릿속으로 정리하고싶어서 답변 올리겠습니다 저도 배우는 단계이기 때문에 정확하지 않습니다
                기존 c나 visualbasic같은 언어는 프로그램을 완성시키는것을 주 목적으로 두었습니다. 코드를 유지보수측면에서 쉽게 만들기 위해 함수와 구조적인 자료형을 만들었으나 이것이 전부였습니다
                하지만 다루고 만드는 프로그램들의 덩치가 커지다보면 코드들이 사람의 머리로 이해하기 힘든 형태가 되는 경우가 잦아졌습니다. 이를 막기위해 프로그래머들은 객체지향이라는 개념을 도입했습니다.

                객체지향은 모든 함수, 변수, 또는 완성된 코드들을 재사용하기 쉽도록 개개별적인 "객체"로 취급하는 개념입니다. Jquery라이브러리와 for문에서 사용하는 조그만 i까지도 객체로 취급하는 방법론입니다.
                모듈화는 객체지향을 실현하기 위해 사용되는 하나의 특성, 즉 객체지향의 부분집합입니다. 객체지향의 특성은 다형성, 은닉화(캡슐화), 상속성, 재활용성과 같이 모듈화 말고도 하나하나가 중요한 특성들이 여러가지가 있습니다.
                쉽게 풀어서 설명하면 객체지향쪽이 더 큰 개념이기 때문에 모듈화는 객체지향이라고 부를 수 있지만 객체지향은 모듈화라고 부르기 어렵습니다.

                잘짜여지고 재활용성이 높은 프로그램을 만들기 위해 객체지향을 추구하는 언어를 객체지향 언어로 속합니다.
                자바스크립트는 루즈한 언어이기 때문에 사용자의 취향과 역량에따라 객체지향으로도, 절차지향으로도, 함수지향으로도 만들 수 있습니다.
                대화보기
                • Sting
                  2017-04-06 OK
                • Sukjae Lee
                  브라우저가 제공하는 기능들은 파편화 되어있다.

                  라이브러리는 목표를 선정 해놓은 로직들의 집합이다.

                  목적을 정해놓고 목적을 쉽게 달성할 수 있도록 만들어놓은 코드들의 집합이다.

                  딱 정리가 되네요 감사합니다.
                • 이승우
                  20170401완료
                • 김세창
                  정말 짱 신기하네요 잘 봤습니다^^ 늘 감사합니다~^^
                • 광뀨
                  감사합니다 너무좋아요~.~
                • 닥강정
                  너무너무 좋네요 감사합니다 ㅠㅠ
                • 폭스킴
                  라이브러리 설명하는 부분에서 오타가 있네요~ 휼룡한 ^^
                • 임지호
                  모듈 : 로직들을 부품화한 것. 부품화하는 과정을 모듈화라 함.
                  - 모듈화하면 유지보수, 재사용성, 비용절약 등 많은 측면에서 이익이 생김.
                  - 호스트 환경(웹브라우저,node.js,구글앱스스크립트 등)마다 모듈화하는 방식이 다름(자바스크립트 내부에서
                  모듈화하는 기능은 없음)
                  - 웹에서는 <head>태그에 자바스크립트파일을 로드하는 방식을 사용
                  - 라이브러리도 모듈과 비슷한 느낌이지만 모듈은 부품 하나라면 라이브러리는 방대한 코드의 집합의 느낌

                  라이브러리 짱!
                • 김명수
                  jQuery 아래분 경로설정이 잘못되신 것일 겁니다. CDN 서버를 이용해 보세요!
                버전 관리
                egoing
                현재 버전
                선택 버전
                graphittie 자세히 보기