-
프로그램은 작고 단순한 것에서 크고 복잡한 것으로 진화하는데 그 과정에서 코드의 재활용성을 높이고, 유지보수를 쉽게 할 수 있는 다양한 기법들이 사용된다. 그 중 하나가 코드를 여러 개의 파일로 분리하는 것이다. 이를 통해 아래의 효과를 얻을 수 있다.
- 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 재활용할 수 있다.
- 코드를 개선하면 이를 사용하고 있는 모든 애플리케이션의 동작이 개선된다.
- 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있다.
- 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.
- 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다. (브라우저에서만 해당)
모듈이란
우선 모듈이 없는 애플리케이션을 하나 만들어보자. 파일의 이름은 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 이다.
function welcome(){ return 'Hello world'; }그리고 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 안에 이 함수가 정의 되어 있지 않음에도 실행할 수 있는 것이다.
라이브러리
라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다고 할 수 있다.
댓글
dallae_log
안녕 난 달래야🐣
