'uglify'에 해당되는 글 1건

  1. 2016.06.27 NPM이란 무엇인가?

Node Package Manager


일단 모듈이라는 개념이 있다.

모듈은 쉽게 말하면 어떤 작업을 하기 위해 필요한 부분? 부품? 이라고 할 수 있다.

노드js에서는 이 모듈을 사용하기 위해 require라는 것을 사용한다.

예를들어 노드js의 가장 대표적인 예제로 나와있는 서버를 생성하는 코드를 보게 되면,


const http = require('http');


const hostname = '127.0.0.1';

const port = 3000;


const server = http.createServer((req, res) => {

  res.statusCode = 200;

  res.setHeader('Content-Type', 'text/plain');

  res.end('Hello World\n');

});


server.listen(port, hostname, () => {

  console.log(`Server running at http://${hostname}:${port}/`);

});


이렇게 되어있다. 이 코드에서  맨 윗 줄...


const http = require('http');


이 부분이 모듈을 사용하겠다고 호출하는 부분이다.
즉, http 라는 이름의 모듈을 상수 http에 집어넣고, 이 상수를 통해 모듈을 사용하겠다는 의미이다.
이렇게 별도의 설치없이 require만으로 호출하는 것은 노드js 안에 내장되어 있는 모듈만 가능하다.

http os Date String Array Math 등등 이런것들은 JavaScript가 제공하는 모듈이다.

따라서, 노드js 뿐만 아니라 자바스크립트가 동작하는 모든 곳에서 사용할 수 있다.

하여튼, 하지만, 내장된 모듈만으로는 수많은 기능을 모두 표현할 수 없을 것이다.


기본적인(내장된) 모듈을 기반으로 해서 타인의 모듈을 사용하여 편리하고 발전된 기능이 가능하다.

그래서 나온것이 NPM이다.


NPM은 노드js에서 앱 스토어와 같다.

또한 매우 간단한 설치/삭제/업그레이드/의존성 관리가 가능하다.

NPM은 노드뿐만 아니라 노드js를 기반으로 한 수많은 언어에서 NPM을 그대로 사용할 수 있다.


npm Main Page


NPM를 독립적으로 설치하는 방법


 $ npm install -g uglify
// -g : global을 의미. 설치된 컴퓨터 전역에서 사용할 수 있는 독릭적 설치
// -g 생략 : 패키지 안에서



이렇게 되면 설치완료.

-g를 붙여서 설치했으므로 어떤 디렉토리에서든 uglify를 실행할 수 있다.

못 생기게 한다??


uglifyjs --help를 입력해서 사용법을 알아보도록 하자.


테스트를 하기위해 js파일을 하나 만든다. (Fun.js)



function hello(name){

  console.log('Hi, '+name)

}

hello("Sungho");



파일에 아무렇게나(난 위처럼 작성...) 작성 한 뒤, cmd명령어로 돌아와서 


uglifyjs Fun.js 을 입력해보자.

그럼 코드가 괴상망측하게 바뀐것을 볼 수 있다.


uglify... 말그대로 코드를 못 생기게 만들었다. 도대체 왜 그런걸까.


파일에는 줄바꿈, 띄어쓰기, 들여쓰기등이 완벽하여 가독성이 뛰어나다.

하지만, 가독성을 높이기 위해 사용된 이러한 것들이 데이터의 일종이기 때문에 

네트워크를 사용해서 자바스크립트 파일을 전송한다고 하면, 이러한 쓸데없는 것들이 데이터 양을 증가시켜 비용이 많이 발생하고 시간 역시 지연을 시킨다.


따라서 uglify는 이러한 불필요한 데이터들을 싹 없애주는 기능을 하는 NPM이다.

데이터를 더욱더 줄이고 싶다면


uglifyjs Fun.js -m


-m : mangle 수축? 지역변수와 같은 것들이 한 글자로 출력되어 더욱 데이터가 절약될 수 있다.

name이라는 변수가 o가 되어 출력되었다.


Posted by sungho88
,