2020-02-06 모듈

생활코딩 JavaScript 강의를 듣고 내 나름대로 정리해본 내용이다.

https://opentutorials.org/course/743/4750

모듈 - 생활코딩

 

//모듈 1강 모듈이란?
크고 복잡한 프로그램은 수많은 로직과 코드들로 이루어져 있다.
이 과정에서 코드의 재활용성을 높이고, 유지 보수를 쉽게 할 수 있는 기법들이 사용된다.
그 중의 하나가 코드를 여러 개의 파일로 분리하는 것이다. => '모듈화'라 불린다.

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

//모듈 2강 모듈이 없다면?
모듈이 없는 애플리케이션을 하나 만들어보자. 파일의 이름은 main.html이다.

  
    
    
    
  
위의 코드는 아무런 문제가 없다. 하지만 welcome 함수가 자주 사용되는 것이라고 가정해보자.
이런 경우 이것이 필요할 때마다 이 함수를 정의해서 사용하는 것은 유지보수도 어렵고 낭비가 될 것이다.
이럴 때 모듈이 필요하다. 함수 welcome을 모듈로 만들어보자.

모듈의 사용
새로운 팔일을 만든다. 이름은 greeting.js다. 
greeting.js
function welcome( ) {
    return 'Hello world';
}

main.html의 내용을 다음과 같이 변경한다.


    
    
    // greeting.js 파일을 읽어서 그 안에 있는 코드들을   사이에 집어넣는다.

    


이전 예제와 비교했을 때 결과는 같다. 하지만 함수 welcome을 main.html의 외부 파일로 분리했다.


브라우저는 src 속성에 있는 greeting.js를 다운로드해서 실행시킨다.
greeting.js에는 함수 welcome가 정의되어 있기 때문에 main.html 안에 이 함수가 정의되어 있지 않음에도 실행할 수 있는 것이다.

//모듈 4강 라이브러리란?
라이브러리는 모듈과 비슷한 개념이다. 모듈이 프로그램을 구성하는 작은 부품으로서의 로직을 의미한다면 라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합을 의미한다.
라이브러리를 사용하기 위해서는 자바스크립트에 라이브러리를 가져와야 한다. 즉, 자바스크립트 파일을(모듈을) 자신의 웹페이지로 가져와야 한다.
API Documentation : 쉽게 말하면 사용 설명서이다.
API : 라이브러리가 제공하는 명령 리스트를 말한다.