용우의 기타등등

간단한 자바스크립트 성능 체크 리스트.

Mixed — Wed, 21 Oct 2009 18:35:48 +0900

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

원문: http://slowjavascript.com/

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

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

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

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

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

UI테스트는 불가능한가?

Mixed — Mon, 12 Oct 2009 22:01:34 +0900

좀더 자세히 말하면 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기능도 생각보다 굉장히 비효율적이라 딱히 방법이 떠오르지 않는다.

정리하면.

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

이다.

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

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

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

UI단 성능 측정 도구 dynatrace.

Mixed — Tue, 06 Oct 2009 01:00:38 +0900

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

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

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

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

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

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

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

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

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

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

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

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

JS Test Driver플러그인.

Mixed — Thu, 13 Aug 2009 12:45:06 +0900

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Js Test Driver 사용기.

Mixed — Tue, 26 May 2009 23:27:02 +0900

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

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

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

http://js-test-driver.googlecode.com/svn/samples/hello-world 에서 checkout 한다.
properties가 가서 builders를 선택한다.
js-test-builder가 잡혀 있는데 edit를 누른다.
일단 checkout할때 프로젝트명을 똑같이(hello-world) 하지 않았다면 해당 부분을 Working Directory에 수정한다. 그리고 mac사용자가 아니라면 location에 jdk경로도 수정해야 한다.
그리고 나서 터미널(커멘드)창에 java -jar JsTestDriver.jar --browser open을 하면 기본 브라우져 창이 뜨면서 테스트가 실행이 된다.하지만 윈도우에서는 기본 브라우져가 뜨지 않는것 같다.mac에선 기본 브라우져가 뜬다.
다음 부턴 파일이 저장이 되면 매번 테스트가 실행되어 피드백을 IDE에서 받을수 있다.
또한 다른 브라우져에서 테스트를 하고 싶다면 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은 언제쯤 나오려나...