| sitelink1 | |
|---|---|
| sitelink2 | |
| sitelink3 | |
| extra_vars4 | |
| extra_vars5 | |
| extra_vars6 |
개발과 디버깅: 기타
이 튜토리얼의 마지막 절에서는 Dojo 위젯 개발과 디버깅을 위해 가장 대중적인 두 가지 브라우저를 셋업하는 법을 다루고 Dojo 위젯 디버깅 과정에서 발견할 몇 가지 문제를 살펴보겠다. 그리고 필자가 Dojo 툴킷을 이용해 HTML 위젯 개발을 처음 시도하면서 겪은 몇 가지 경험을 소개하면서 마무리하겠다.
모질라 파이어폭스는 웹 응용 개발을 위한 최고의 브라우저로 인식되고 있다. 파이어폭스는 쓸만한 자바스크립트 콘솔과 통합된 DOM 검사기(DOM Inspector)와 수 많은 플러그인을 갖추고 있다. 파이어버그(Firebug)와 웹 디벨로퍼 툴바(Web Developer Toolbar)는 가장 인기 있는 웹 개발 도구다.
파이어폭스 설치시 언제나 "수동" 설치를 선택하고 "개발 도구"를 선택하라. 그렇게 해야 자바스크립트 콘솔과 DOM 검사기가 설치된다.
파이어폭스와 관련된 기법도 흥미롭다. HTML 페이지에서 한 영역을 선택, 오른쪽 클릭을 하고 선택된 소스(View Selection Source)를 누르면 대부분의 경우 Dojo 위젯에서 실제로 생성한 HTML을 볼 수 있다. 이것은 매우 유용한 기능이다. 파이어버그 플러그인도 HTML 렌더링을 잘 보여준다.
파이어폭스 관련 도구를 받고 싶으면 참고자료를 보라.
마이크로소프트™ 인터넷 익스플로러™는 여전히 대중적인 브라우저이다. 그렇기 때문에 웹 애플리케이션을 인터넷 익스플로러에서도 테스트해야 한다. 어떤 사람들은 파이어폭스보다 마이크로소프트 스크립트 디버거(Script debugger)를 선호한다.
인터넷 익스플로러 관련 도구를 받길 원하면 참고자료를 보라.
 |
|
Dojo 위젯이 있는 페이지를 실행할 때 두 위치에서 에러가 발생한다.
- 자바스크립트 콘솔(또는 인터넷 익스플로러의 팝업/스크립트 디버거)
- Dojo 디버그 패널
이 두 가지 다 살펴보는 것이 매우 중요하다.
디버깅을 사용할 수 없다면 로깅이라도 해야 한다. Dojo 디버그 패널에 메시지를 추가하는 dojo.debug("..."); 함수는 매우 유용하다. 또한 dojo.debugShallow(object);와 dojo.debugDeep(object); 함수를 자바스크립트 객체를 덤프하기 위해 사용할 수 있다.
만약에 오래된 파일(*.js나 *.css)이 캐시되어 문제가 발생한다고 생각하면 브라우저 캐시를 비우고(웹 디벨로퍼 툴바를 쓰면 더 빨리 할 수 있다) Ctrl 키를 누른 상태에서 페이지를 새로고침 버튼을 클릭하라(이론적으로는 Ctrl키와 함께 새로고침을 누르면 되어야 하지만 가끔은 그렇지 않을 때도 있다). 어떤 사람들은 브라우저 캐시 크기를 0으로 설정해 어떤 것도 캐시하지 못하게 한다. 이렇게 하면 파일 캐시만 막고 메모리 캐시는 막지 못하는 경우도 있다는 것을 명심하라. Ctrl+새로고침은 그런 경우 도움이 된다. 메모리 누수가 심각한 경우도 있다(윈도우에서는 작업 관리자(Task Manager)로 추적할 수 있다). 그런 경우에는 브라우저를 완전히 재시작하는 것이 최상의 방법이다.
Dojo 위젯 디버깅에 대해 더 알고 싶으면 참고자료를 보라.
|
|
Dojo 툴킷을 사용하며 경험했던 문제들을 소개하려 한다. 내 가정은 브라우저 기반 자바스크립트를 사용했던 이전 경험에 바탕을 두었다. 어떤 경험은 나에게만 문제였을지도 모른다.
공통적인 에러와 해결책
| 경험했던 문제 | 해결책 |
|---|---|
| 위젯을 정의하기 위해 사용한 DOM 노드의 속성이 사라진 것 같다(id. style). | 필요한 속성들은 예약하라. 오래된 형태의 자바스크립트 방법으로 위젯 접근하기와 내포 HTML을 보라. |
"this.domNode"의 의미는 무엇인가? | this.domNode는 HTML 템플릿의 루트 DOM 요소의 기본 결합점이다. |
| 위젯 생성시 변경자 메서드가 호출되나? | 아니다. postCreate()가 요소에 직접 동작한다. 더 자세한 내용은 Widget attributes을 참고하라. |
| 왜 속성은 위젯 생성시 전달되지 않을까? | 위젯 자바스크립트 코드는 기본값을 가지고 정의되지 않기 때문이다. |
<body onload="..."가 더 이상 작동하지 않는다. | 대신에 Dojo 이벤트 시스템을 사용하라. 더 자세한 내용은 오래된 형태의 자바스크립트 방법을 참고하라. |
| 내 CSS 스타일이 뒤죽박죽됐다. | CSS 클래스 이름은 전체 프로젝트에서 유일해야 하고 Dojo CSS 클래스 이름을 침범하지 말아야 한다. |
dojo.byId() 와 dojo.widget.byId()의 차이점이 무엇인가? | dojo.byId()는 document.getElementById()의 별칭이고 dojo.widget.byId()는 dojo.widget.manager.getWidgetById()의 별칭이다. |
dojo.require() 문장을 주석 처리했는데도 여전히 작동한다. | Dojo는 정규식을 사용하고 있다. 이것은 중요한 문제는 아니다. |
