장마가 끝나고, 더위가 시작되고, 말복도 지나갔건만 아직도 밖엔 비가오고 불볕더위가 기승을 부리며 밤잠을 설치게 하고있습니다. 쉽게 힘든 하루하루를 보내고 있습니다..ㅎㅎ
오늘은 좀 시간이 되서 포스트를 하나 할까 합니다.

제목에서처럼 "선택과 효율"입니다. 말뜻에서 보이듯이 잘사용하면 좋지만 잘못사용하면 독이되는 것들입니다.

다른프로젝트에서 효율적인것이 자신에게 적용하면 독이될 수 있음을 명심하시고 , 선택은 여러분의 몫입니다.

자바스크립트 파일을 하나의 파일로 합치기

대부분 Ajax어플리케이션들은 수많은 js를 포함하기 마련입니다. 허나 다른 리소스들(이미지와 같은)은 http connection이 모두 사용되어 다운로드를 하지만 유독 js만은 하나의 커넥션으로만 진행되게 됩니다. 즉, 하나씩 다운로드하여 파싱이되고 메모리에 적재됩니다. 그리하여 js 를 하나로 합쳐서 배포하면 그만큼의 시간단축이 되므로 합쳐봅시다.

이번에 알려드릴 툴은 다들 아실지도 모르겠지만 bash쉘을 이용하는 것입니다. bash의 cat을 사용하면 많은 js들을 손쉽게 하나의 파일로 생성할 수 있습니다.

cat script1.js script2.js script3.js > all.js

이렇게만 해주시면 끝입니다 ^^; 너무 쉽나요? 그렇다면 윈도우에서는 어떻게 해야할까요?
cygwin이라는  오픈소스를 이용하면 됩니다.
www.cygwin.com에서 패키지를 다운받으셔서 설치하시면 bash쉘의 명령어를 사용하실 수 있습니다.
그럼 하나로 합쳐서 배포했는데 js를 수정하려면 all.js를 수정해야할까요? 아닙니다.
아래의 화면을 보시죠

[배포용]
<script src="all.js"></script>

[개발용]
<!--script src="all.js"></script-->
<script src="script1.js"></script>
<script src="script2.js"></script>
<script src="script3.js"></script>

이런식으로 관리하시면 되겠지요.

그리고 팁으로는, js를 합치실때는 반드시 개별파일의 마지막 한줄이 있어야 합니다. 만약 없다면 파일들이 중첩되는 부분이 생겨 오류를 발생시킵니다.



압축툴로 자바스크립트 압축하기
예전에  js 어플리케이션을 하다보면 둘중에 하나는 포기해야했습니다. 충분한 주석을 달아서 나중에 유지보수를 편하게 하느냐, 아니면 주석을 제거하여 파일사이즈를 줄여 다운로드를 조금이라도 빠르게 할것이냐.
하지만 이제 그런고민은 필요없을듯 합니다.
dojo툴킷에 포함된 압축툴을 사용하시면 js에 포함된 주석은 알아서 제거가되고 js를 압축해주기 때문이죠.
http://alex.dojotoolkit.org/shrinksafe/ 이곳에서 다운로드 하시면 되고, 자세한 사용법또한 있습니다.
그리고 한가지, 반드시 jdk 1.4이상이 있어야 한답니다 ^^
java -jar custom_rhino.jar -c all.js > all_comp.js 2>&1
이렇게 해주시면 all_comp.js라는 파일이 생깁니다.


브라우져 자바스크립트 cache 문제
작업하시다 보면 브라우져 js가 캐시되어 새로운 js를 서버에 올렸음에도 불구하고 새로운 js가 적용되지 않는 문제점이 있습니다.
보통 <script src="script1.js></script> 이렇게 사용합니다. 허나 아래와 같이 사용하시면 이러한 문제는 없어집니다.

처음에는 이렇게 해주시고,
<script src="script1.js?v=001"></script>

다음에 새로운 js를 서버에 올리셨으면
<script src="script1.js?v=002"></script>
이렇게 해주시면 브라우져는 새로운 js를 다운받아 실행하고 기존에 받아두었던 js는 더이상 cache시키지 않습니다. 이유는 브라우져는 script엘리먼트에 src속성의 값을 하나의 값으로 판단하기때문에 js다음에 붙는 더미들을 포함하여 기억하고 있는것입니다. 하여, v=001과 v=002가 붙은 js를 다른 파일로 인식하여 새로 받는 것이지요.

오늘은 여기까지만 하도록하겠습니다. 다른 팁들도 몇개있는데 나중에 다시 소개하도록 하겠습니다

posted by blankus