ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • javascript5
      javascript 2023. 4. 19. 16:01
      반응형

      모듈

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

       

      · 자주 사용되는 코드를 별도의 파일로 만들어서 필요할떄마다 재활용할 수 있다.

      · 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.

      · 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.

      · 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.

      · 한번 다운로드 된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다.(브라우저에서만 해당)

       

      순수한 자바스크립트에서는 모듈(module)이라는 개념이 분명하게 존재하지는 않는다. 하지만 자바스크립트가 구동되는 호스트 환경에 따라서 서로 다른 모듈화 방법이 제공되고 있다. 이 수업에서는 자바스크립트의 대표적인 호스트  환경인 웹브라우저에서 로직을 모듈화하는 방법에 대해서 알아볼 것이다.

       

      호스트 환경

      호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더이상 브라우저만을 위한 언어가 아니다. 예를 들어 node.js는 서버측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다. 또 구글의 제품 위에서 돌아가는 google apps script 역시 자바스크립트이지만 google appss script가 동작하는 환경은 구글 스프레드쉬트와 같은 구글의 제품 위이다. 여러분은 자바스크립트 문법을 이용해서 PHP와 같은 서버 시스템을 제어(node.js)하거나 구글의 제품(google apps script)을 제어 할 수 있다. 지금 당장은 어렵겠지만, 언어와 그 언어가 구동되는 환경에 대해서 구분해서 사고 할 수 있어야 한다. 이를 위해서는 다양한 언어를 접해봐야 한다.

      호스트 환경에 따라서 자바스크립트 로직을 파일로 분할해서 마치 다른 언어에서의 모듈 처럼 사용 할 수 있는 방법 제공

      내가 사용하는 호스트 환경이 무엇이냐에 따라서 모듈이라고 하는것을 사용할 수 있는 방법이 다르기 때문에 그 호스트 환경에 따른 모듈화 방법을 따로 공부해야 한다.(호스트 환경 메뉴얼 참고)

       

      모듈이 없다면

      모듈이 없는 애플리케이션

      파일 이름 : main.html

      <!DOCTYPE html>
<html>
<head>
	<mata charset="utf-8"/>
    <script src="greeting.js"></script>
    // <script type="text/javascript" src="greeting.js"></script>
    // <script type="text/javascript"> 생략가능
    // 웹페이지가 화면에 출력될때 웹브라우저가 script라고 하는 태그를 만나면 src라고 하는 속성이 있는지 없는지를 확인
    // src(속성)에 어떠한 값(greeting.js)이 있다면 바로 그값에 해당하는 파일을 읽어와서 이 부분에 이 파일 안에 들어있는 내용을 이 안에 집어넣는 것과 동일한 효과를 내게 된다.
</head>
<body>
	<script>
    // <script type="text/javascript"> 생략가능
        alert(welcome());
    </script>
</body>
</html>

      파일 이름 : greeting.js

      function welcome() {
	return 'Hello World';
}
// 정의 하고 싶은 내용을 집어 넣는다

      Hello World가 출력된다.

      <script src="greeting.js"></script> 가 실행이 됨에 따라서 greeting.js이라는 파일 안에 들어있는 코드가 <script> </script>안에 대체 되게 되는 것이다. 그래서 welcome이 호출 될수 있다.

      welcome이 아주 복잡하고 긴 코드였다면 이렇게 별도로 분리하는것을 통해서 main.html이라고 하는 이 웹페이지의 내용이 간결해진다.

      또한 html의 용량을 줄여주어서 저장하는 쪽이나 다운로드 하는 사용자 입장 둘다 좋은 결과를 얻을 수 있다.

      다른 html 파일을 만들어도 <script src="greeting.js"></script>를 넣어주기만 하면 greeting.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

       

      라이브러리

      모듈과 비슷한 개념

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

      좋은 라이브러리를 선택하고 잘 사용하는 것은 프로그래밍의 핵심 

       

      <body>
	<ul id="list">
    	<li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input type="button" value="execute" id="execute_btn">
    // 타입은 버튼, html태그를 실행, id값은 execute_btn
    <script type="text/javascript">
    // $('#list li').text('codig every body')
    // id 값이 list인것을 가르킨다. list중에서도 list의 하위태그인 li를 가르킨다.
    // 이 한줄이 호출되면 이 한줄로 인해서 id값이 list인 태그 하위에 있는 li안에 있는 텍스트 들이 전부 다 codig every body라는 텍스트로 한번에 변경이 된다.
    	$('execute_btn').click(function(){
        	$('#list li').text('codig every body')
        })
        // execute라는 버튼을 눌렀을때 li태그가 codig every body로 변한다.
    </script>
</body>

       

      'javascript' 카테고리의 다른 글

      javascript4  (0) 2023.04.17
      javascript3  (0) 2023.04.17
      javascript2  (0) 2023.04.13
      javascript 1  (0) 2023.04.10

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바