웹개발을 하다보면 외부 JQuery 라이브러리 파일을 받아서 개발을 해야되는 경우가 있습니다.
그러면 보통 라이브러리화된 js 파일을 얻게되는데, 가끔 파일을 열어보면 내용이 빈칸없이 수많은 Javascript 코드로 빼곡하게 들어가 있는 파일들을 만나게 되는 경우가 있습니다.
이를 Minified 된 Javascript 코드라 하는데, 보통 우리가 보기 좋게 짜는 코드와는 달리 도저히 알아볼수 없는 형태로 코드화되어 있습니다.
Minify(Minified)는 말 그대로 작게 만들다, 축소시키다라는 의미를 담고 있는데, 코드의 공백을 모두 제거하여 용량을 최소한으로 만든 코드라고 보면 됩니다.
예를 들면 보통 아래와 같이 일반적으로 사람이 이해 하기 쉬운 구조의 코드를
var abc = function(a, b) {
var x = a;
var y = b;
var z = x * y * 100;
alert("The Rsultt is " + z);
}
Minify 하면 다음과 같습니다.
var abc=function(a,b){var x = a;var y = b;var z=x*y*100;alert("The Rsultt is "+z);}
단순히 반드시 필요한 공백을 제외하고는 무조건 붙여쓴 것이지요.
사실 위의 2개의 소스는 브라우저가 Javascript 코드를 분석하여 처리하는데에 있어서 100% 동일하게 동작합니다. 물론 코드 자체를 눈으로 보는 사람 입장에서는 첫번째 코드가 이해하기 더 쉽지만, 컴퓨터 입장에서는 1번코드나 2번코드난 이해하는 난이도는 동일합니다.
어떻게 보면 불필요한 공백들을 읽어 처리(무시)하는 시간이 줄어들기 때문에 오히려 2번의 코드가 컴퓨터 입장에서는 더 좋을 것입니다. 실제로도 그렇습니다!
그래서 많은 오픈 소스 및 상용 Javascript 라이브러리는 위와 같은 Minified 된 소스 코드도 함께 제공하는 경우가 많습니다. (라이브러리 파일 용량 자체도 줄어들고, 해석도 빨라집니다. 인터넷만을 통해 데이터 통신을 하는 웹 서비스의 처리 속도 개선을 위해서는 반드시 고려해야 하는 부분입니다.!)
보통 개발할 때에는 디버깅을 쉽게 하기 위해 일반 코드를 사용하고, 실제 서비스할 때에는 Minifed 된 코드를 사용합니다.
JQuery 1.7.2. (좀 예전 버전인가요? ㅎㅎ) 코드는 개발자가 이해할 수 있는 순수 Javascript 코드로도 제공되지만 아래와 같이 Minifed 된 코드도 함께 제공합니다.
(실제 JQuery 코드는 상당히 방대하며 실제 코드의 극히 일부분만 발췌해 본 것입니다.)
// jquery-1.7.2.min.js (보통 파일명 중간에 .min. 이 포함되어 있습니다.)
(function(a,b){function cy(a){return f.isWindow(a)?a:a.nodeType===9?a.defaultView||a.parentWindow:!1}function cu(a){if(!cj[a]){var b=c.body,d=f("<"+a+">").appendTo(b),e=d.css("display");d.remove();if(e==="none"||e===""){ck||(ck=c.createElement("iframe"),ck.frameBorder=ck.width=ck.height=0),b.appendChild(ck);if(!cl||!ck.createElement)cl=(ck.contentWindow||ck.contentDocument).document,cl.write((f.support.boxModel?"<!doctype html>":"")+"<html><body>"),cl.close();d=cl.createElement(a),cl.body.appendChild(d),e=f.css(d,"display"),b.removeChild(ck)}cj[a]=e}return cj[a]}function ct(a,b){var c={};f.each(cp.concat.apply([],cp.slice(0,b)),function(){c[this]=a});return c}function cs(){cq=b}function cr(){setTimeout(cs,0);return cq=f.now()}function ci(){try{return new a.ActiveXObject("Microsoft.XMLHTTP")}catch(b){}}function ch(){try{return new a.XMLHttpRequest}catch(b){}}function cb(a,c){a.dataFilter&&(c=a.dataFilter(c,a.dataType));var d=a.dataTypes,e={},g,h,i=d.length,j,k=d[0],l,m,n,o,p;for(g=1;g<i;g++){if(g===1)for(h in a.converters)typeof h=="string"&&(e[h.toLowerCase()]=a.converters[h]);l=k,k=d[g];if(k==="*")k=l;else if(l!=="*"&&l!==k){m=l+" "+k,n=e[m]||e["* "+k];if(!n){p=b;for(o in e){j=o.split(" ");if(j[0]===l||j[0]==="*"){p=e[j[1]+" "+k];if(p){o=e[o],o===!0?n=p:p===!0&&(n=o);break}}}}!n&&!p&&f.error("No conversion from "+m.replace(" "," to ")),n!==!0&&(c=n?n(c):p(o(c)))}}return c}function ca(a,c,d){var
...
그런데 종종 어떤 라이브러리들은 Minifed 된 파일만 제공하는 경우가 있습니다.
내용 자체를 도저히 파악할 수가 없습니다. (물론 개발자가 코드를 한줄한줄 보면서 다시 이해할 수 있는 버전으로 복구시킬 수는 있겠지만, 위와 같은 JQuery코드를 복구하려면 몇일은 걸리지 않을까 싶습니다.)
보통 유료 상용 라이브러리 같은 경우가 Minifed 된 파일만 제공하는 경우가 많습니다.
그런데 이를 아주 빠르고 쉽게! 사용자가 이해할 수 있는 코드로 복원하여 주는 사이트가 있습니다.
링크 : http://minify.avivo.si/#results
아주 간단히, 어떤 Language를 변환할 것인지 설정하고, 축소화된 코드를 입력만 하면 바로 복원 해 줍니다. 이 사이트에서는 복원하는 것을 Beautifying(아름답게 하다) 라고 말하고 있는데, 실제 이런 용어를 개발 쪽에서 사용하는지는 잘 모르겠습니다. Minifying 이란 말은 들었지만, 그 반대의 개념으로 쓰이는 Beautifying 이란 용어는 개발쪽에서 이런 의미로 쓰이는지는 이 사이트에서 처음 접하였거든요^^
일단 방법은 다음과 같습니다.
1) 사이트에 접속합니다. http://minify.avivo.si/#results
2) Step 1 : 데이터 소스를 선택합니다.
JavaScript 외에도 CSS, CSV Code 에 대한 처리가 가능합니다.
* 참고 : 실제 CSV Code 를 변환하는 것은 사용한 적이 없는데, 사이트에서는 CSV Code 를 Microsoft 의 Transaction-SQL Insert 구문으로 변환하여 준다고 설명하고 있습니다. 즉, 엑셀의 CSV 형태의 데이터 파일을 바로 MS-SQL DB 테이블에 삽입할 수 있는 INSERT SQL구문을 생성해 주는 것으로 보입니다.
3) Step 2 : 입력된 소스 코드를 Minify 할 것인지, Beautify 할 것인지 선택합니다.
다시 말하면 Step 3에 원 소스 코드를 입력하여 압축(Compress)하여 min 형태의 코드로 만들 것인지, 아니면 이미 Minifed 된 코드를 복원(Decompress)하여 원래 형태의 소스 코드로 만들 것인지에 대해 선택하는 것입니다.
4) Step 3 : 실제 코드 내용을 입력하고, Generate(생성) 합니다.
내가 만든 코드를 실제 배포할 때에는 압축해서 배포하고 싶다한다면 Minify를 선택 후(Step 2), 내 코드를 입력한 다음 Generate 버튼을 클릭합니다.
Javascript 라이브러리를 받았는데 Minified 되어 있고, 실제 코드 소스를 보면서 공부해보고 싶다 하면, Beautify를 선택 후(Step 2), 해당 코드를 입력한 다음 Generate 버튼을 클릭합니다.
* 참고 : Step 2 에서 Beautify (decompress) 옵션을 선택하면 아래와 같이 좀 더 상세한 옵션이 나타납니다.
- 1) 들여쓰기를 Tab, 2 Space, 3 Space, 4 Space 공란으로 할 것인지.
- 2) 괄호 { } 를 별도의 라인을 배정하여 표시할 것인지, 이전 코드랑 연결하여 표시할 것인지
// 1
if( a > 0 ) {
...
}
// 2
if ( a > 0)
{
...
}
- 3)빈 줄을 보존할 것인지
- 4) 배열 인자 들여쓰기를 할 것인지.
var a = [ "1", "2", "3" ]
]
var a = [
"1", "2". "3"
]
JQuery 의 Minifed 된 코드를 Beautifying 하니, 아래와 같은 코드가 생성되었습니다.
훨씬 보기 편하고, 이해하기 쉬운 코드로 변환되었네요.^^
※ 참고로 일반적인 경우, 위와 같은 Client 처리부의 Javascript 코드는 복호화하여 이를 개발자가 직접 코드를 분석 및 자신에게 맞는 형태로 개선하는 것이 가능하지만, 보통 상용 라이브러리는, 주요 핵심 코드가 서버측 코드에 존재하거나 라이선스 키(Licensce) 등을 통해 제한하고 있는 경우가 대부분입니다.
'개발&컴퓨터 > JQuery & JS' 카테고리의 다른 글
| Javascript 일반 함수, 인라인(Inline) 함수 그리고 익명(Anonymous) 함수 (0) | 2015.03.18 |
|---|---|
| 자바스크립트 타이머 - setTimeout, setInterval, clearInterval 함수 (9) | 2015.03.17 |
| jqGrid 에서 레코드 수 (Row count) 정보 가져오기. (6) | 2014.12.16 |
| [Javascript] 숫자만 입력 받기 (4) | 2014.11.04 |
| JQuery를 통해서 레이어 팝업 항상 화면 가운데에 띄우기 (1) | 2014.10.23 |