(4) NPM 이란?

javascript가 제공하는 모듈 : ex.date, String, Array ..etc...

nodejs가 제공하는 모듈: http, os...etc...

javascript가 제공하는 모듈과 nodejs가 제공하는 모듈은 다르다.

이것들을 여러 방법으로 결합해서 사용할 수 있다는 것을 알아두자. 

nodejs가 직접 제공하는 모듈 외에 타인의 모듈 혹은 독립적인 소프트웨어를 사용하는 방법에 대해 알아보자.

npm이란: node package manager의 약자 -  설치, 삭제, 업그레이드, 의존성관리를 해주는 것이다. 

현재는 npm을 nodejs 에서만 사용하는 것이 아니라, nodejs를 사용하여 만들어진 소프트웨어이지만 여느 소프트웨어 프로그램에서도 npm을 이용하여 타인이 만든 소프트웨어를(플러그인, 라이브러리, 모듈 포함) 사용할 수 있다. 

uglify-js라는 플러그인(독립적인 앱)을 설치해 보자. 

uglify-js : 

가독성을 증가시키기 위한 줄바꿈 등과 같은 띄어씌기 공백들이(데이터들이 됨) 전부 사라지고 붙게 된다. 

javascript 파일을 전송할 때는 네트워크를 사용하기 때문에 코드의 내용이 많아지면, 그만큼 비싸지고 느려지게 된다.

이 때 uglify-js프로그램을 실행시키면 실제로 기계가 처리하는데 필요한 필수적인 코드를 제외하고는 나머지것들 전부 제거된다.

http://npmjs.com 에 들어가서 uglyfy-js를 설치하는 방법을 살펴보자. 

Installation and Typical Usage in Node

코드: npm install ugliy-js -g  (g는 global:글로버의 약자이다.)

g를 붙이게 되면 컴퓨터 전역에서 사용하는 독립적인 소프트웨어로 설치가 된다는 의미이고,

g를 붙이지 않을 경우에는 현재 npm을 설치한 패키지 내의 프로그램에서만 사용하겠다는 의미가 된다.

※ uglifyjs --help 을 해주면 uglifyjs 도움말이 나온다. 

pretty.js 에 코드를 작성한 후 해당파일을 위치시켜 놓은곳에

cmd를 통하여 cd C:\Users\Sean Park\dev\js\server_side_javascript 로 들어가서 

uglifyjs pretty.js 를 입력하여uglifyjs (플러그인)을 사용해보자.

위를 보면 알 수 있듯이 코드 중 공백이 사라진 상태의 코드가 나타난다.

 

uglifyjs 플러그인을 사용한 파일을 만들어보자.

uglifyjs pretty.js -o 새로만들 파일명 -m    

-o의 경우에 파일을 생성하기위함.

-m의 경우에는 파일내 변수명을 최대한 간단하게 한다는 의미. 예를 들어 var notification 이 있을 경우에 해당 변수를 o등으로 간단하게 변환시켜 코드를 만들게 한다. m 은 mangle의 이니셜  (여기서는 -m 기능을 볼 수 없다. )

해당 디렉토리에 가보면 uglified라는 이름을 가진 새로운 파일이 생성되어 있음을 볼 수 있다. 

일반적으로 파일명을 지어줄 때에는 해당 파일의 코드를 최소화 시킨다는 의미에서 원래파일명.min.js로 지어준다.

원래 파일명 : pretty.js

uglifyjs를 사용한 새로운 파일명 : pretty.min.js

 

해당 파일을 열어 uglifyjs 가 적용 됐는지 확인해 보자.

정상적으로 적용되었음을 확인 할 수 있다.