From Learn About the Ext JavaScript Library

Contents 1 소개 2 소스 코드는 무엇인가? 3 Ext 소스 배포 4 어디서부터 시작할까? 5 어댑터 6 핵심 7 다음은 어디로

소개

처음 Ext를 사용하는 유저들은 그들의 위치에서 배워야 할 자료 API문서, 이 위키자료, 튜토리얼, 포럼의 글들, IRC채널의 방대함을 알게 될 것입니다. (이것들의 모든 세부사항을 위해서 Ext 사이트의 Learn 섹션을 보세요) 그 중 가장 좋은 자료는 Ext 소스코드 자체입니다.

또한 Ext 소스는 고급 자바스크립트 기술의 값어치 갖으며 소스는 오픈되고(Ext는 모두 오픈 소스 프로젝트입니다) 여러분의 코딩 기술을 향상시키는데 도움을 줄 수 있는 Best Practices 입니다.

소스 코드는 무엇인가?

자바스크립트는 인터프리터 언어입니다. 이것의 의미는 실행하기 전에 컴파일 되지 않는다는 것이고 여러분의 웹 사이트에 전송되어진 Ext코드는 사람이 읽을 수 있다는 것이다. 저는 theory(학설) 라고 말합니다. 왜냐하면 실제 원본의 소스코드는 파일들의 작은 숫자안에서 쇠사슬 처럼 연결된 자동화된 스텝을 통해 수행되고 파일 사이즈를 줄이고 불필요한 화이트 스페이스와 주석을 제거하고 변수명을 다시 부여한다.

만약 표준 Ext 코어의 하나인 ext-core.js 소스를 찾았다면 매우 긴 한줌의 소스를 볼 것입니다. 이 파일은 다음에 설명할 자동 프로세스의 결과물입니다. 브라우저를 위해서는 좋지만 사람이 코드의 작동원리를 이해하기 위해서는 전혀 그렇지 않습니다.

ext-core.js

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
 
Ext.DomHelper=function(){var _1=null;var _2=/^(?:br|frame...
 
Ext.Template=function(_1){if(_1 instanceof Array){_1...
...

만약 ext-core-debug.js를 보려면 잘 정리된 소스코드(파일명 끝에 –debug가 있는)를 발견할 것입니다. 이 파일은 Firebug처럼 line-by-line 코드를 통한 단계별 디버깅을 위한 디버거와 함께 사용하기 위한 파일입니다. 화이트 스페이스들과 긴 변수명들 때문에 이 파일의 크기가 거의 두배에 가깝다는 것을 알 것입니다.

ext-core-debug.js

/*
 * Ext JS Library 1.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://www.extjs.com/license
 */
 
Ext.DomHelper = function(){
    var tempTableEl = null;
    var emptyTags = /^(?:br|frame|hr|img|input|link|meta|range|spacer|wbr|area|param|col)$/i;
    var tableRe = /^table|tbody|tr|td$/i;
...

Ext 디버그 버전들은 Ext 라이브러리가 동작하는 것을 시험하기 위해 매우 좋으나 개발 시 놓친 몇몇 변수, 코드주석 등이 있습니다. 이것들은 원본 소스코드를 찾기 위해서 꼭 필요하다는 것을 알게 될 것입니다.

Ext 소스 배포

여러분이 압축된파일을 받았을 때 서브 폴더에 소스가 있고 또 다른 것들이 많다는 것을 알것입니다. 그 폴더 안에서 여러분은 Ext Commercial License와 Open Source LGPL 3.0 license 라이센스(라이센스 정보)를 따르는 Ext JS의 소스 전체를 알 수 있을 것입니다.(라이센스의 전체 내용은 여기) Ext 개발자들에게는 그다지 좋지 않겠지만?!

아무 소스나 즐겨쓰는 에디터(기왕이면 코드 하이라이팅 혹은 모든 기능을 갖춘 IDE) 에서 열어보시고 탐색해보세요.

어디서부터 시작할까?

Ext 코드는 수 많은 다른 파일을 포함해야 해서 시작하기도 전에 기가 죽을 수 있겠지만 운이 좋게도 Ext는 매우 잘 설계된 자바스크립트입니다. 로우레벨 코드는 크로스 브라우저의 DOM 제어와 같은 본질적인 세밀함을 보장하고 높은 레벨의 추상화에 동작하기 위해 높은 레벨 클래스를 지원합니다. (여기에서 말하는 용어적인 클래스는 Java와 C++ 처럼 여러분이 사용하는 것과는 같지 않습니다. 그러나 상속의 개념등은 여전히 유추가 가능(유사하게 구현이 가능)하기 떄문에 괜찮습니다. 객체 지향 자바스크립트에 관한 더 많은 정보는 Introduction to object-oriented (OO) JavaScript)를 보세요.)

이것이 의미하는 것은 밑에서 위로 아니면 위에서 밑으로 소스 코드를 탐색할 수 있는 방법을 말합니다. 높은 수준의 친근한 추상화로 동작하는 API와 관심에 따라 로우레벨에 동작도 원하는 데로 할 수 있습니다. 저처럼 정말 어떻게 동작하는지 알고 싶다면 소스의 밑 부분부터 시작하세요.

어댑터

여러분이 처음 보게 될 첫번째 소스 파일 이고 스스로 Ext 오브젝트를 생성하는 일을 하는 Ext.js 파일입니다.

Ext.js

Ext = {};

Ext는 Yahoo UI 라이브러리의 확장으로 시작하였습니다. 그때 Ext는 YUI에 의존한 로우레벨 크로스 브라우저 코드가 전부였습니다. 지금은 독립적인 JavaScript 라이브러리이지만 여러분에게 prototype, jQuery와 같은 다른 라이브러리들 그리고 YUI와 호환될 수 있도록 되어있습니다. 그 소스 파일들은 source/adapter 서브 디렉토리에 있고 다른 자바스크립트의 어댑터 역할을 로우 레벨에서 처리해줍니다. 웹 사이트에 사용하고 있는 핵심 라이브러리에 맞는 어댑터를 선택하여 추가하면 됩니다.

핵심

source/core 디렉토리에 파일들은 adapter API의 상위에 빌드된 최하위 레벨의 소스 파일들입니다. 이 파일들의 몇몇은 원래 독립적인 형태의 라이브러리입니다. 이것의 의미는 Ext 라이브러리의 나머지 부분에 관한 지식이 없이도 그것들의 전반적인 것들은 학습되고 이해될 수 있습니다. 가장 기초적인 레벨에서 Ext가 마법을 부리는 방법을 이해하기 위해서 source/core 디렉토리에 있는 각각의 소스 파일들을 직접 분석해야 보면 됩니다. :)

다음은 어디로

여러분에게 자바스크립트가 생소하다면 모듈 패턴의 사용이 상당히 난해할 것입니다. (왜냐하면 자바스크립트는 다른 언어에서 사용되어지는 것처럼 블록단위 유효범위가 아닌 함수 유효범위 갖기 때문입니다.). 모듈 패턴은 이 링크와 함께 좀더 자세히 보아야 합니다.

다음으로 여러분은 아마 Ext의 클래스 설계와 상속 메커니즘의 동작 원리에 대해 배우기를 원할 것입니다.

여러분의 코드 탐색을 계속 유지하는데 좋은 자료는 소스파일과 함께 의존적인 것들의 목록인 ext.jsb 파일이다. 이 파일은 Ext JS Builder에서 사용되어지고 언제 일을 끝낼지 어디서 시작할지 새로운 클래스 계층구조를 탐색할 때 정말 강력한 도구입니다.

일단 그렇게 하면 당신은 아마 사용자 확장기능과 최고의 사람들과 해킹(여기서 말하는 해킹은 Ext JS의 기본 동작을 바꾸거나 추가해 좀더 향상되거나 다른 동작을 하도록 하는 일들을 말함)할 것입니다. 행운을 빌고 포럼 혹은 #extjs 에서 뵙기 바랍니다.

--Patrick and Rhio