Links

모듈

모듈

재활용성을 높이고 유지보수를 할 수 있도록 단위로 조각조각 나눠서 구획화를 시켜서 모듈화 (파일을 분리) 것을 모듈이라고 한다.

모듈의 장점

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

호스트 환경

호스트 환경이란 자바스크립트가 구동되는 환경을 의미한다. 자바스크립트는 브라우저를 위한 언어로 시작했지만, 더 이상 브라우저만을 위한 언어가 아니다. 예를들어 node.js는 서버 측에서 실행되는 자바스크립트다. 이 언어는 자바스크립트의 문법을 따르지만 이 언어가 구동되는 환경은 브라우저가 아니라 서버측 환경이다.
// 모듈화
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<script>
function welcome(){
return 'Hello world'
}
alert(welcome());
</script>
</body>
</html>
// 모듈화
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
// 모듈화 시킴 위에 코드와 내용은 동일하다.
</head>
<body>
<script>
alert(welcome());
</script>
</body>
</html>
코드의 가독성을 높여주게됨.

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

라이브러리

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

제이쿼리 ( 대표적 라이브러리)

<!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');
// execute_btn을 클릭하면 list li내용이 모두 coding everybody로 변경된다.
// 간단한 코드로 내용을 변경시킬 수 있다.
})
</script>
</body>
</html>