모듈(Module)

코드의 재활용성을 높이고 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중의 하나가 코드를 여러개의 파일로 분리하는 것이다.

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

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

호스트 환경이란?

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

어떻게 자바스크립트를 모듈화할 수 있는가?

자주 많이 쓰이는 함수가 있다면 별도의 파일로 만들어서 그 파일을 읽어오는 방식을 사용하면 복잡한 코드가 단 한줄로 바뀔 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="greeting.js">/.../</script><!--greeting.js라는 파일의 코드가 중간에 있는 것과 같은 결과가 나온다.-->
    <title>Document</title>
</head>
<body>
    <script>
        alert(welcome());
    </script>
</body>
</html>

아래는 greeting.js 파일이다. (단, 실제 사용할 때는 welocme 이라는 함수가 매우 길고 복잡한 함수라고 생각하면 왜 사용하는지 더 공감하고 이해할 수 있다.)

function welcome(){
            return 'Hello World'
}

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));

Previous객체(Object)Next라이브러리

Last updated 4 years ago