용우의 기타등등

아래 원문을 보고 간단히 번역해봤습니다.
(오역이 많으니 가능하면 원문을 보시는게 좋을것 같습니다.)
뭐 아래 같은 얘기는 많이 들어봤을텐데 다시 상기시키는 차원에서 보면 좋을것 같습니다.
개인적으로는 Smash같은 경우는 첨 들었고 "문법설탕(syntactic sugar)을 제거하였나요?" 이 부분은 뭔가 고민되네요.


원문: http://slowjavascript.com/

1. 스크립트 테그의 위치가 올바른가요?
2. DOM Monster에서 확인 해보셨나요?
3. 헤더에 캐시가 적용되었나요?
4. 여러개의 파일을 합치고 한줄로 만들어서 캐시하게 만들었나요?
5. 축소하고 압축(Gzip)하였나요?
6. Smash을 이용하여 css sprite와 favicon을 만들었나요?
7. 프래임워크를 확인해봤나요?
8. 잘못 사용하는 timer들은 없나요?
9. Dom을 최대한 효율적으로 사용했나요?
   • 노드 탐색
   • 이벤트 버블링과 캡쳐
   • innerHTML
   • 투명 이미지
     
   • 스타일
   • 복잡도
10. Ajax를 적절하게 사용했나요?
11. 코드를 간단하게 만들었나요?( 변수 할당, 연산자들, 리터럴들)
12. 지나치게 완벽하게 만든 코드들을 수정하였나요?(Strip out excessive cleverness)
13. 효율적으로 정규표현식을 사용했나요?
14. JSON을 사용했나요?
15. 정규식을 캐시하여 사용했나요?
16. 클로져, 전역변수, 리터럴들을 조심해서 사용했나요?
17. 가장 효율적인 구문을 사용했나요?
18. 가장 효율적인 반복문을 사용했나요?
19. 객체의 속성들을 가장 효율적으로 사용했나요?
20. 변수들은 캐시해서 사용했나요?
21. 메모리 릭을 최대한 제거했나요?
22. 효율적으로 arguments를 사용했나요?
23. 문법설탕(syntactic sugar)을 제거하였나요?
24. 루프를 사용하지 않고 펼쳐서 사용하거나 적절하게 사용했나요?
25. iPhone을 위해 최적화를 했나요?
    

DOM Monster
Thomas Fuchs(scriptaculs 제작자)와 AmyHoy(디자이너)가 만든 프로파일링 툴

Smash
이미지의 품질을 지키면서 용량을 줄이는 웹 도구.

문법설탕(syntactic sugar)
개발할때 코드를 읽기 쉽거나 사용하기 쉽게 하기 위해서  만든 문법을 말한다.
사용하기에는 편하나 성능면에서는 비효율적일수 있다.

지나치게 완벽하게 만든 코드들을 수정하였나요?(Strip out excessive cleverness)
- 이 부분은 제가 이해하기로는 "추후를 예측하여 현재 불필요한 코드를 만들어서 성능에 영향을 미치는 경우"와 같은 류를 말하는것 같습니다.

좀더 자세히 말하면 UI테스트가 불가능하다기 보단 자동화된 UI테스트가 불가능한것 같다.
사실 테스트만 잘되면 자동화하는 작업은 그렇게 힘들지 않는다고 생각한다.
하지만 UI쪽 테스트 자체가 힘들기 때문에 자동화된 테스트가 안되고 그렇기 때문에 테스트가 잘되고 있는것 같지 않다.
그래서 왜 UI쪽 테스트가 불가능한가 정리를 해볼까 한다.



개인적으로 UI개발의 테스트를 자동화 할수 있다면 정말 혁신적인 일이라 생각하고 아마 수많은 시간과 돈이 save될거다.
(지식이 부족한지 몰라도 내가 알기론 없다. 있다면 제발 누군가 알려줬으면 좋겠다.)
그럼 먼저 UI개발이란 말이 좀 명확하지 않으니  HTML, Javascript, CSS을 가지고 개발하는 것으로 정하자. Flash,Silverlight등은 제외.


첫째, 테스트 할 조건이 너무 많다.

크게 OS는 window, Mac, Linux... 브라우져는 IE, Firefox, Safari, Opera... 어림 잡아 12가지이다. 근데 버전별로 하면.... 생각하기 힘들 정도로 많다. 게다가 프레임워크나 컴퍼넌트 같은 경우는 어떤 상황에서도 정상적으로 작동해야 하는데 DTD로 인해 영향을 미치는 경우가 있다. 그럼 또 경우에 수는 상상하기 싫을 정도로 많아진다.이렇게 많은 종류에 환경을 갖추고 테스트를 하기란 정말 힘들기 때문에 자동화된 테스트를 하기가 힘들다.

이정도 되면 UI개발자 입장에서 정말 세상에 단일OS와 단일 브라우져만 있다면 좋겠다라는 생각을 한다.

이렇게 테스트 할 조건이 많고 만약 테스트가 자동화 되지 않았다면 비용이 너무 많이 들어서 사실상 테스트 하는건 한계가 있다.




둘째, 테스트 자체가 불가능한 경우가 많다.

사실 첫번째 같은 경우 환경을 갖추기는 어렵지만 할수 있는 일이다.
돈과 시간만 있다면 몇대 PC에 버철머신 설치 해가면서 환경을 갖출 순 있다.
(testswarm, selenium grid같은걸로 하면 자동화 하면 되나 일반적으로 힘들다고 말하는것임)

환경을 갖춘다고 해도 테스트를 만드는것 자체가 힘든 경우가 많다.
먼저 자바스크립트 같은 경우는 일반적으로 테스트가 가능하다.
Ajax, Timer등의 테스트들 같은 경우 까다롭긴 하지만 mock을 사용하던지 테스트 가능하게 레이어를 올리던지 가능하다.

하지만 로직상 정상적으로 작동하지만 실제 브라우져에서 정상적으로 작동하지 않는 기능들 같은 경우는 힘들다. 대부분이 이벤트를 가지고 하는 작업들이 그렇다.
네이티브 브라우져 이벤트를 다루면 해결할것 같은데 이건 쉽지 않다. 예전에 selenium-ice라는게 이런 문제를 해결해 줄거라고 생각했는데 프로젝트가 더이상 진행되지 않는것 같아 정말 아쉽다.

또 디자인이 엮이면 힘들다.
예를 들면 로직상은 정상인데 css랑 엮이면서 디자인 자체가 일그러지는 현상들.
이런 현상들이 생각 보다 굉장히 많다.
그래서 자동화를 하기 위해 selenium에 capture기능을 써서 이미지를 떠서 비교를 하려고 했으나 쉽지 않았고 반자동화로 진행하려고 했으나 역시 쉽진 않았다.

CSS 자체는 테스트를 어떻게 해야 할지 감이 안잡힌다.
CSS가 변경이 되면 영향이 미치는 경우가 많다. 그래서 어디서는 이런 방법으로 테스트를 한다고는 하지만 실제로 보니 크게 도움이 될까?라는 의구심이 든다.
그리고 위에서 말한 capture기능도 생각보다 굉장히 비효율적이라 딱히 방법이 떠오르지 않는다.



정리하면.

1. 환경이 너무 많다.
2. 브라우져 자체에서 실행시켜야만 알수 있는 에러는 찾기 힘들다.
3. 렌더링에 따라 눈으로 발견하는 에러는 찾기 힘들다.
4. CSS를 어떻게 테스트 해야 할지 모르겠다.
   

이다.

계속 고민은 하지만 딱히 떠오르는 방법이 없다.-_-;
아무리 찾아봐도 없는걸 보면 아직 해답을 못찾았다고 생각하고 계속 실험하고 탐구해봐야 하는 영역인듯;;

참고로 일부가 불가능하다고 해서 안하는게 낫다라고 말하는게 아니다.
오해하지 마시길.

ps. TEST는 그렇다고 하고 과연 세계적으로 UI개발에 대한 퀄리티를 어떻게 측정하며 하는곳이 얼마나 있을까?

UI 개발을 한 후에 성능 테스트를 하려고 하면 쓸만한 도구가 없다.

물론 각종 프로파일링 툴로 확인도 하지만 매우 부족하다.

예로 처음 로딩시 초기 UI를 구성하기 까지 시간을 측정했을 때
네트워크 시간, javascript 시간, 랜더링 시간 이렇게 구분하려고 하면
상당히 원시적인 방법으로 해야했다.
(물론 내가 못본 툴이 있을수도 있겠지만 다들 만족스런 결과는 아니였다.)

그나마 지금 까지 본 툴중에는 젤 그럴듯 하게 지원하는 툴이 아마 dynatrace인것 같다.

일단 무료다.-_-;
그리고 사용법은 이곳에 동영상을 보면 쉽게 이해 할수 있어서 스킵.

잠깐 이것 저것 해본 결과 괜찬다고 생각하는 기능 몇가지를 소개할까 한다.
(정확한지는 모르겠다)
1. graph로 어디가 병목인지 알게 쉽게 되어 있었다.

위의 그림에서 보면 이벤트, javascript, network 이렇게 3가지로 구분하여 비용현황을 볼수 있다.

2. 시간의 순서대로 페이지에 어떤일이 있어났는지 확인이 가능하다.


3. 무엇이 가장 시간이 오래 걸리는지 한눈에 확인이 가능하다.

여기에는 랜더링 시간, 함수 시간, ajax등 모두 포함되어 있다.

아직 윈도우에 IE만 지원한다.(추후 firefox지원 예정)
하지만 지금꺼 보아온 성능 툴과 비교하여 편하게 좋은 데이터를 볼수 있어 좋은것 같다.

혹시 UI개발에 성능 측정 도구가 필요하다면 dynatrace을 사용하라고 추천하고 싶다.

전에 봤던 JS Test Driver(이하 JTD)의 플러그인이 개발 되었다고 하여 한번 사용해 봤다.

먼저 JTD가 무엇인지를 알기 위해서는 전에 적은 JTD사용기를 읽어보길 바란다.

기존에도 js에 테스트 결과를 IDE에 볼수 있는게 편리 했는데 이번 플러그인은  JsUnit과 유사하게 보기 좋은 인스턴스 메시지를 보여준다.

JsUnit의 다른 점은 각 브라우져 별로 확인 가능하다는 사실이다.
정말 편하다.

아래의 그림을 보면 좀더 쉽게 이해가 갈것이다.


위에서 보듯이 각 브라우져별로 테스트 결과를 알수 있다.(다만 속도는 정확하지 않은듯)

JTD가 사용법이 바뀐건 아니니 간단히 플러그인 사용법을 적을까 한다.

먼저 이 플러그인은 eclipse에서만 작동된다.(aptana는 작동을 안함.)

1. 플러그인 사이트에서 인스톨을 한다.( http://js-test-driver.googlecode.com/svn/update/)
2. window -> show view -> other -> javascript -> JsTestDriver 선택 (위에 같은 그림의 패널이 나옴)
3. perferences에 가서 JS Test Driver에 port와 각 브라우져의 실행 파일을 지정한다.(위에 각 브라우져의 로고가 클릭이 가능함)
4. 희안하게 3번에서 적용후 끄고 켜야지만 적용이 됨.
5. 원하는 프로젝트에 run configuration을 들어가 JsTestDriverTest에 해당 프로젝트를 지정하면 바로 conf파일을 바로 읽음.(여기서 conf파일이 해당 프로젝트에 바로 밑에 있어야함.)
6. 다시 끈후 켠다.
   

위에 까지 하면 사용할 준비가 되었고 사용법은 간단하다.

1. 아래 그림에서 run버튼을 누른후
   
   
   
2. 위의 3번에서 지정한 브라우저의 로고를 클릭한다.(클릭을 하면 브라우져가 캡쳐가 됨)
3. 테스트를 돌리고 싶은 파일에 오른쪽 마우스를 클릭후 Run as로 들어가 JTD를 클릭하면 상단의 첫번째 그림처럼 결과가 확인 가능하다.

간단히 써본 소감은 기존에 비해서 인스턴스 메시지가 이뻐진듯.

다만 fail일 경우 몇가지 단점들이 보인다.
일단 에러메세지는 많이 난감하네 나온다.
또한 메소드를 클릭하면 해당 부분으로 점프 하는 기능이 있으면 좋을것 같다.

다른건 많이 안써봐서 잘 모르겠음 -_-;



자세한 사용법을 원하면 원글을 확인 하기 바란다.

얼마 전에 google test 블로그에서 js test framework가 소개가 됬다.

ui test에 대해서 나름 흥미를 가지고 있어서 한번 설치를 해봤다.

먼저 간단한 설치 방법을 설명한다. (eclipse,aptana를 기준으로 되어 있다.)

1. http://js-test-driver.googlecode.com/svn/samples/hello-world 에서 checkout 한다.
2. properties가 가서 builders를 선택한다.
3. js-test-builder가 잡혀 있는데 edit를 누른다.
4. 일단 checkout할때 프로젝트명을 똑같이(hello-world) 하지 않았다면 해당 부분을 Working Directory에 수정한다. 그리고 mac사용자가 아니라면 location에 jdk경로도 수정해야 한다.
5. 그리고 나서 터미널(커멘드)창에 java -jar JsTestDriver.jar --browser open을 하면 기본 브라우져 창이 뜨면서 테스트가 실행이 된다.하지만 윈도우에서는 기본 브라우져가 뜨지 않는것 같다.mac에선 기본 브라우져가 뜬다.
   
6. 다음 부턴 파일이 저장이 되면 매번 테스트가 실행되어 피드백을 IDE에서 받을수 있다.
7. 또한 다른 브라우져에서 테스트를 하고 싶다면 jsTestDriver.conf안에 server라고 적혀있는 주소로 들어가면 capture라는 링크가 보이는데 클릭을 하면 다음 부턴 해당 브라우져도 같이 테스트가 된다.

여기 까지가 설치 및 사용방법이다.
좀더 자세한 사용법이 필요하면 이곳을 참고 하길 바란다.

위와 같이 설치해보고 직접 사용해 보면 어떨까 하는 생각에 기존에 JSSpec으로 되어 있던 코드중 일부를 porting 하는 작업을 해봤다.

역시 장단점은 있었다.

먼저 단점은
첫번째.  jsTestDriver가 계속 풀링하고 있어서 리소스를 많이 잡아먹어 막 버벅인다.
두번째.  전혀 인간적이 않은 피드백 메세지. 굉장히 보기 힘들다.
세번째.  다소 불편한 사용법. js가 아닌 파일은 사용하지를 못한다. 가끔 HTML도 사용하게 되는데 body에 innerHTML로 삽입하는등 다소 희안한 작업을 해야한다.

장점.
첫번째. 기존 js test framework은 여러개의 브라우져를 띄워서 계속 ctrl+r를 누르거나 settimeout으로 계속 돌리는 작업해야 되는데 비해 쉽게 실행 시킬수 있다.
두번째. 비록 보기 쉽지 않지만 IDE에서 모든 브자우져의 피드백을 볼수 있는건 큰 메리트다.

마지막으로 가장 큰 장점은 추후에 추가될 커버리지,퍼포먼스 측정과 같은 기능이다.

사실 지금 상태로는 기존에 쓰고 있는 js test framework를 변경할 만큼의 메리트는 없지만 추후에 커버리지, 퍼포먼스 측정 및 단점들이 보안이 되면 충분히 기존에 js test framework에서 변경해도 좋을것 같다.

또한 소스를 보니 JsTestDriver안에 들어있는 unit test를 사용하는게 아니라 기타 다른 unit test tool로 변경이 가능할것 같았다.
 
내가 기존에 생각했던 자바스크립트 개발 환경과 굉장히 유사하다. 비록 지금은 다소 부족하지만 훌륭한 툴로서 성장하길 기대한다. ^^;

근데... 레식횽이 만들고 있는 testswarm은 언제쯤 나오려나...

한때 selenium이 acceptance test를 잘 해줄것 같아 뜯어서 구조도 보고 깨작거렸는데 실제로 해보니 많은 문제가 있었다. 간단한 웹에는 그닥 문제가 없지만 요즘 같은 인터렉션이 많은 웹어플리케이션에서 사용해보면 배보다 배꼽이 커버리는것 같았다.

중간 중간에 억지로 끼워 맞춘 settimeout들... 크로스 도메인 문제등... 어느 정도 해결은 가능했지만 생산성 측면에서 그렇게 좋게 느껴지지 못했다.

그래도 재작년에 2007년에 GTAC을 보니 selenium을 상당히 많이 사용하고 3rdparty로 많이 만들고 있어서 좀 더 다듬어지면 좋겠다는 생각을 하고 지났다.
그렇게 지내고 있다가 예전에 selenium ice 생각이 나서 개발이 어느 정도 되었나 확인차 검색을 좀 해봤는데 아직 많이 개발이 되있지 않았다. -_-;; 그래서 이왕 확인하는거 다른  3rdparty는 뭐가 있을까 검색을 해보니 몇 가지가 나와서 사용해보고 추후에 쓸지 모르니 메모나 남겨야겠다라는 생각을 했다.

첫번째. CubicTest.
두번째. bromine.
세번째. tseng.

이렇게 세가지를 사용해 보려고 한다.
먼저 CubicTest.

설치 방법은 간단하다.
이클립스에서 다운로드 사이트 등록하면 된다.
(http://www.cubictest.org/update) 물론 다운 받아서 해봐도 된다.

그리고 인스톨을 하게 되면 프로젝트생성에 아래와 같은 게 나타난다.











cubic test를 하나 생성을 하면 테스트 이름을 적게 되는데 이걸 만들게 되면 aat파일이 하나 생성이 된다.
aat파일이 하나의 테스트 라고 생각하면 될것 같다 그리고 aat파일을 생성할때 옵션이 3가지가 있다.
1. Extension start point
2. URL start point
3. Sub test start  point

첫번째는 test시점이 기존에 만든 aat파일의 특정 시점 부터가 된다.
   extension start point를 사용하려면 그전에 aat파일에 extension point를 지정해야 한다.
두번째는 URL를 시작 시점으로 하여 test가 진행된다.
세번째는 특정 시점과 관련없이 test를 만들때 사용한다.
   예를 들면 특정 행위가 서로 다른 부분에서 사용된다면 sub test start point로 빼서 관리하면 된다.

그렇게 해서 기존에 selenium에서 코드를 짰던 부분이  에디터에서 가능해진다.
(물론 기존 처럼 코드를 짜도 상관은 없다)

좌측 하단 판넬에 page element들로 페이지의 구성하여 아이디나 이름들을 할당하고 좌측 상단에 control 판넬을 이용하여 액션들을 정의 하면 아래와 같은 모습을 가지게 된다.


그리고 물론 기존에 selenium이 가지고 있는 녹화기능으로 에디터가 아닌 녹화가 가능하게 된다.

녹화를 사용하려면 판넬에 우측 마우스를 클릭하면 record가 있는데 이것을 클릭하면 녹화가 되고 해당 행위가 녹화가 되어서 위에처럼 플로우 차트 형식으로 표현이 된다.
좋은건 기존에 selenium은 firefox에서만 가능했지만 여기서는 다른 브라우져에서도 녹화기능이 된다.
(어떻게 녹화가 되는지는 소스코드를 좀 확인해볼 필요가 있을것 같다-_-;)

그리고 export기능이 있는데 selenium뿐만이 아니라 watir의 루비코드로도 변환이 된다.

실무에 사용한게 아니고 그냥 학습하기 위해 사용한거라 어떤 문제가 있을지는 정확히 파악은 안되나 잠깐 만져(?)본 결과 기존에 비인간적이던 html형식을 flow형식으로 보여주어 좀 더 보기 좋았고 sub point처럼 모듈을 나누어서 관리하는것도 괜찬은것 같았다.

그리고 selenium에 프로젝트로 등록되어 이름이 바뀐다고 하던데(어디서 봤는데 기억은 안남..-_-;) 좀더 좋은 쪽으로 발전될것 같다.

위에 내용은 좀더 자세히 알고 싶으면 여기를 찾으면 알수 있다.

팀에서 쓰는 웹사이트에서 그리스 몽키를 사용하려고 하는데 의외로 많은 분들이 모르고 있어 설치 방법 설명합니다.

그리스몽키에 간단히 말씀드리면 파이어 폭스에서 간단한 스크립트로 웹페이지를 조작할수 있는 플러그 인 입니다.사실 저도 열심히 공부한게 아니라 정확히는 모릅니다.;;

설치 방법
1. firefox를 설치 합니다.
2. 그리스몽키를 설치합니다.
3. 원하는 user script를 설치합니다.

저는 간단히 me2day에서 쓰는 user-script를 만들어봤습니다.
me2day를 쓰다보면 많은 사람들이 링크를 거는걸 실수 하는 경우가 많은데 좀더 쉽게 링크를 걸수 있는 user script입니다.

사용법은 그리스몽키를 설치한 다음에 이곳을 클릭하면 됩니다.
그리고 미투데이에서 ctrl + alt를 누르게 되면 confirm창이 뜨는데 거기에 url을 넣으면 링크로 바꿔줍니다.

끝 .

아마 자바스크립트로 unit test를 해본 사람이라면 늘 막히는 곳이 있게 마련인데
그중에 잘 막히는 부분은 set(Timeout|Interval)을 테스트 하는 것일겁니다..

예를 들면 아래와 같은 코드를 테스트 하고 싶다면 현재 자바스크립트의 특성상 일반적인 방법으로는 테스트가 불가능 합니다.

var result; function delay(time){ setTimeout(function(){ result = time+" delay"; },time); } /* test code */ function testDelay(){ delay(10); assertEquals(result,"10 delay"); }

자바스크립트는 단일 스레드 방식이기 때문에 testDelay 함수를 호출할때 testDelay함수가 호출이 끝나지 않고는 delay안에 있는 setTimeout에 할당한 함수는 실행하지 않습니다. 그렇기 때문에 testDelay는 테스트 절대 성공할수 없습니다,

안되는 문제의 원인을 보면 자바스크립트가 단일 스레드이기 때문에 그렇고
그래서 setTimeout과 같은 함수를 사용하면 테스트가 한 함수 스코프에서 불가능하다는 생각을 했습니다.
위에 문제점을 어떻하면 해결할수 있을까 고민을 했는데 방법은 두 가지가 떠올랐습니다.

첫 번째.단일 스레드라는 환경을 변경하면 됩니다.
즉,일반적으로 iframe방식을 사용하면 됩니다.(즉,selenium 같은 방식)
실제 코드가 실행하는 환경과 테스트 코드가 실행하는 환경과 분리하면 된니다.

 아래 그림을 보면 이해하기가 쉽습니다.

이 방법은 테스트는 가능하지만 약간 복잡해질 소지가 있습니다.

두 번째. setTimeout을 안사용하면 됩니다.
즉, Simulating Time in jsUnit Tests,라고 나온 방법입니다.
이 방법의 핵심은 어차피 우리는 setTimeout을 테스트를 하는게 아니고 주기적으로 함수가 호출될 경우 정상적으로 작동하는지만 확인 하는게 목적이기 때문에 setTimeout과 유사한 함수를 만들어서 테스트를 하면 됩니다,
(mock으로 만들면 됩니다.-Ajax도 유사한 방법으로 테스트 하곤 합니다.)

2가지중 여러가지 고민을 해봤지만 2번째 방법이 쉽고 좋은 방법이라고 생각합니다.
혹시 javascript로 unit테스트를 진행하는데 이런 부분이 고민이였다면 해결하셨으면 좋겠습니다.

요즘 javascript란 언어를 가지고 (unit|acceptance)테스트를 진행하다보면 여러가지 문제을 겪게 되는데 이런 문제를 해결하기위해 고민 중입니다.
몇가지는 해결이 되고 몇가지는 아직도 고민 중인데 시간이 되면 겪었던 경험들을 공유할수 있도록 노력하겠습니다.^^;

자바스크립트에서 arguments를 가지고 배열처럼 사용할때가 많다.

그러나 arguments는 배열이 아니다.-_-;

하지만 가끔 배열 처럼 사용하고 싶을때가 많아서 새 배열을 만들고 거기에  for문으로
넣을때가 있었다.

그러다가 jQuery인가에  아래와 같은 구문을 봤다.

var arg = Array.prototype.slice.apply(arguments);

처음엔 그냥 넘어갔는데 알고 보니 arguments를 배열로 만들어 주는 trick이였다.

기존엔 난 아래와 같은 방법을 썼는데 이제는 위와 같은 방법을 사용해야겠다.

var arg = []; for(var i=0;i<arguments.length;i++){     arg.push(arguments[i]); }


확실히 속도나 코드길이를 봐도 깔끔한 방법이다.^^

오늘 보니깐  John Resig가 prettyDate 을 만들었네요.
그래서 전 beautyDate을 만들어 봤습니다.-_-;;
사실 이걸 보고 만든건 아니고요;; (소스중 분기하는 방법은 보고 참고했습니다.^^;)
전에 모프로젝트에서 쓸려고 만들었는데 사용할 일이 없어 공개합니다.
사용법은 간단합니다.
기본적으로는 첫번째 처럼 작동하고요.
옵션을 통해 자신에 입맛에 맞게 설정하시면 됩니다.
beautyDate(new Date); ->2008/01/30 01:04 beautyDate(new Date,{format:"{yy}/{mm}/{0d} {ww} {ap} {hh}:{ii}:{ss}"}); ->08/01/30 Wed am 1:08:49
옵션에는 총 4가지가 있습니다.
위에서 본 format 과 monthFormat,weekFormat,ampmFormat 입니다.
간단히 보면 format은 나오는 문자의 포맷입니다.
기본적으로 "{yyyy}/{mm}/{0d} {0h}:{0i}" 이런 형식이고 아래의 형식으로 자신에 맞게
구성할수 있습니다.
{yyyy} - 4자리 년도
{yy} - 2자리 년도
{mm} - monthFormat에 지정된 월 포맷
{dd} - 일
{0d} - 일이 한 자리 일 경우 앞에 0을 추가
{ww} - weekFormat에 지정된 요일 포맷
{ap} - ampmFormat에 지정된 am/pm 포맷
{hh} - 12시간 포맷
{HH} - 24시간 포맷
{0h}  - 12시간 포맷일때 한 자리이면 0 붙임
{0H}  - 24시간 포맷일때 한 자리이면 0 붙임
{ii}    -  분
{0i}   -  분이 한 자리이면 0 붙임
{ss}  -  초
{0s}  -  초가 한 자리이면 0 붙임

그리고 3개의 포맷이 있는데
monthFormat은 달의 포맷이고
weekFormat은 요일의 포맷,
ampmFormat은 am/pm 포맷입니다.
기본적으로
["01","02","03","04","05","06","07","08","09","10","11","12"] ,
["Mon","Tue","Wed","Thu","Fri","Sat","Sun"],
["am","pm"] 이렇게 각각 등록되어 있는데 맘에 안들면 원하는 포맷으로 바꾼 후 옵션파라메터로 넘겨서 사용하면 됩니다.

이렇게 4가지 옵션이 있으며 각 옵션은 아래와 같이 지정하여 사용됩니다.
var options = {format:"{0d}-{mm}-{yy} ({ap}){0h}:{0i}", monthFormat :["Jan","Feb","Mar","Apr","May", "Jun","Jul","Aug","Sep","Oct","Nov","Dec"], weekFormat:["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], ampmFormat:["AM","PM"]} beautyDate(new Date,options); ->30-Jan-08 (AM)01:28

아래는 전체 소스입니다. 필요한 곳에 유용히 쓰세용.
/** * JavaScript beautyDate * * @author mixed <mailto:i . nevalose (at) gmail . com> * @license GNU * @blog http://mixed.tistory.com/ * * @param {Date} date * @param {Object} customOption * * @return {String} beautyDate */ function beautyDate(date,customOption){ if(arguments.length<1||date.constructor != Date){ return false; } var options = { format :"{yyyy}/{mm}/{0d} {0h}:{0i}", monthFormat :["01","02","03","04","05","06","07","08","09","10","11","12"], weekFormat :["Mon","Tue","Wed","Thu","Fri","Sat","Sun"], ampmFormat :["am","pm"] } customOption = customOption||{}; for(var i in customOption){ options[i] = customOption[i]; } options["rowData"] = [date.getFullYear()+"", date.getMonth(), date.getDate(), date.getDay(), date.getHours()<12?0:1, date.getHours(), date.getMinutes(), date.getSeconds()]; return options.format.replace(/\{([^{}]*)\}/g,function(type){ var coptions = options; function addZero(num){ return (num>=10)?num:"0"+num; } function twelveNotation(num){ return (num>12)?num-12:num; } var rowData = coptions.rowData; var monthFormat = coptions.monthFormat; var weekFormat = coptions.weekFormat; var ampmFormat = coptions.ampmFormat; return type=="{yyyy}"&&rowData[0]|| type=="{yy}"&&rowData[0].slice(2,4)|| type=="{mm}"&&monthFormat[rowData[1]]|| type=="{dd}"&&rowData[2]|| type=="{0d}"&&addZero(rowData[2])|| type=="{ww}"&&weekFormat[rowData[3]-1]|| type=="{ap}"&&ampmFormat[rowData[4]]|| type=="{hh}"&&twelveNotation(rowData[5])|| type=="{HH}"&&rowData[5]|| type=="{0h}"&&addZero(twelveNotation(rowData[5]))|| type=="{0H}"&&addZero(rowData[5])|| type=="{ii}"&&addZero(rowData[6])|| type=="{0i}"&&addZero(rowData[6])|| type=="{ss}"&&rowData[7]|| type=="{0s}"&&addZero(rowData[7])||"'"+type+":undefined type'"; }); }