해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.
자바스크립트 기본 문법 :: 모듈이란?
프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화합니다.
그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용되죠.
그 중의 하나가 코드를 여러개의 파일로 분리하는 것입니다.
이를 통해서 얻을 수 있는 효과는 아래와 같습니다.
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
순수한 자바스크립트에서는 모듈(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"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
console.log(welcome());
</script>
</body>
</html>
위의 코드는 아무런 문제가 없습니다.
하지만 welcome 함수가 자주 사용되는 것이라고 가정한다면,
이것이 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 되겠죠.
이럴 때 모듈이 필요한 것입니다.
이제 함수 welcome을 모듈로 만들어보도록 하겠습니다.
자바스크립트 기본 문법 :: 모듈의 사용
새로운 파일을 만듭니다. 이름은 greeting.js 입니다.
function welcome(){
return 'Hello world';
}
main.html의 내용을 다음과 같이 변경합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="greeting.js"></script>
</head>
<body>
<script>
console.log(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.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 (로드의 주체) 파일입니다.
require 를 이용하여 node.circle.js 파일을 포함시킵니다.
var circle = require('./node.circle.js');
console.log( 'The area of a circle of radius 4 is '
+ circle.area(4));
실행 창에서 node.demo.js 파일을 실행시키면 아래와 같은 출력이 나타납니다.
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 란 무엇인가 | JQuery 설치 | JQuery 기본 사용법
안녕하세요. 이번 포스팅은 JQuery 에 대한 포스팅입니다. 재작년에 아주 후루룩 라면 먹듯 JQuery를 배웠었는데, 프로젝트 하면서 한번 더 쓸 일이 있어서 정리하는 느낌으로 다시 포스팅을 하고
ffoorreeuunn.tistory.com