[생활코딩] JavaScript 모듈 & 라이브러리

 

 

모듈(module)

모듈화(Modularization)란 수 많은 로직을 재사용할 수 있는 단위로 나누어,
별도의 모듈이 라는 형태로 떼어내 다른 프로그램에 부품으로 사용하는 기법이다.
그리고 그 결과물을 모듈이라 한다.
자바스크립트의 경우 긴 코드를 js파일에 따로 저장해서 프로그램 크기를 줄이는 것을 모듈화라고 한다.

예시) 분할된 파일을 불러오기 

<script src="greeting.js"></script>

 

- 호스트 환경

javascript는 웹브라우저를 위한 언어로 시작했지만(클라이언트), 

서버 측에서 실행되는 javascript도 있다(서버사이드 Node.js).
따라서 호스트 환경에 따라 모듈화 하는 방법을 알아야 한다.

- 모듈과 라이브러리의 차이 

모듈이 프로그램의 작은 부품이라 하면,
라이브러리는 자주 사용되는 부품을 재사용하기 편하게 잘 정리한 코드의 집합이다.
특히 라이브러리는 많은 사람들의 노력과 돈, 노우하우를 집중해 만들어 놓아 아주 완성도가 높다.

 

- library를 쓰는 이유

자기 혼자 만드는 것보다 다른 사람이 이미 만들어 놓은 부품을 사용해, 
내가 만들고자 하는 것을 조립해서 만들어 가는 것이 소프트웨어를 만드는 '기본 중의 기본' 이다.

 

- library와 framework의 차이

라이브러리는 소프트웨어를 만들 때 부품을 당겨 오는 것이면, (재사용하기 쉽도록 잘 정리정돈된 느낌)
프레임워크는 소프트웨어를 만들기 위해 그 프레임워크(반제품) 안에 들어가서 작업하는 느낌이 있다. 
(기본적인 것들이 잘 갖춰져있는 반제품을 통해 내가 원하는 것만 수정하는 느낌)


- jQuery

가장 유명하고 오래되었고 안정적인 자바스크립트 라이브러리이다.
HTML 파일에 아래와 같이 코드를 작성하면 jQuery 사용이 가능하다.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

$로 코드가 시작한다. 

ex) $('a') 여기있는 모든 a태그를 jQuery로 제어한다.

예시)

var Links = { 
  setColor:function(color){ 
    var alist = document.querySelectorAll('a'); 
    var i = 0; 
    while(i < alist.length){ 
      alist[i].style.color = color; 
      i = i + 1; 
    } 
  } 
} 

이랬던 코드가

var Links = { 
  setColor:function(color){ 
  $('a').css('color', color);    
    } 
  } 
} 

이렇게 간단하게 한줄로 바뀐다.

문법을 아는것도 중요하지만, 어떤 라이브러리가 있는지 알고 있는 것이 중요하다.