 | |
|
난이도 : 중급 Bradley Childs, 소프트웨어 엔지니어, IBM
옮긴이: 백기선 dwkorea@kr.ibm.com
2008 년 10 월 28 일 JSDT(JavaScript Development Toolkit)는 이클립스 플랫폼에서 사용할 수 있는 오픈 소스 플러그인으로 견고한 자바스크립트 프로그래밍 도구입니다. JSDT는 개발을 순탄하게 해주며, 코드를 단순하게 유지할 수 있고, 순수 자바스크립트 파일과 HTML에 내장된 자바스크립트의 생산성을 높여줍니다.
자바스크립트 개발은 쉽지 않다. 제각각인 웹 브라우저 호환성과 실망스러운 문서, 그리고 빈약한 도구가 문제를 구성한다. 다행히, 이클립스 플러그인 세트인 JSDT가 최근 발표되면서 도구 상황은 나아지고 있다.
이클립스는 오픈 소스 IDE 프레임워크로 확장 가능하며 유연한 아키텍처 설계를 가지고 있다. JSDT는 이클립스에서 가동되며 플러그인으로 제공된다. 이클립스에서 자바스크립트는 새로운 개념이 아니다. 이전에도 다른 플러그인을 통해 HTML과 몇몇 자바스크립트 지원을 했기 때문이다. 하지만 JSDT가 다른 것과 달리 눈에 띄는 장점은 이 도구가 제공하는 풍부함과 복잡도로, 웹 개발 생산성을 크게 향상시킨다.
JSDT는 JDT(Java Development Toolkit)에서 착안한 핵심 설계와 같은 많은 기능을 제공한다. JSDT는 WTP(Web Tools Platform) V3.0 배포판에 있는 자바스크립트 편집기를 대체할 예정이다.
IDE와 자바스크립트
왜 자바스크립트 IDE가 흔하지 않은지 궁금할 것이다. 웹 2.0의 인기와 더불어 많은 개발자들이 자신의 블로그와 커뮤니티 페이지에서 자바스크립트를 사용함에 따라, 새로운 자바스크립트 도구가 넘쳐날 것으로 생각했다. 하지만 대부분의 개발자가 노트패드와 브라우저 Refresh 버튼을 여전히 최고의 자바스크립트 개발 환경으로 사용하고 있다.
문제의 원인은 자바스크립트 언어의 해석(interpretation)에 있다. 자바(Java™)나 C 언어와는 달리, 자바스크립트는 느슨한 타입(loosely typed)이라 정확하게 모델링하는 것이 어렵다. 더 형식적인 언어들은, 컴파일된 코드의 효율성이 최우선이다. 따라서 언어의 유연함에 제약이 있다. 자바스크립트의 목적은 다르다. 개발자들이 플랫폼에 따라 다양하게 특화할 수 있기 때문에 언어 불일치라는 결과가 생긴다. 이러한 불일치는 도구 관점과 개발 관점을 복잡하게 만든다.
브라우저만 나쁜 게 아니다. 객체 지향 자바스크립트는 초점이라기보다는 추가적인 표현이다. Ajax 툴킷은 그것들을 기반으로 자바스크립트를 객체 지향으로 만들었지만, 그것들이 하는 작업은 다르다. 보통 객체와 클래스 구조를 식별하는 것이 불가능하진 않지만 힘들다. 더 안 좋거나 더 낫게 만드는 것은 누구에게 물어보느냐에 따라 달려 있다. 언어가 몇 개의 강력한 구멍을 가지고 있고 개발자들이 이 구멍을 사용해 다른 사람들은 모르는 똑똑한 트릭을 수행하기 때문이다. 이런 것 중 한 예는 많은 양의 코드를 감싸는 evalf(..) 함수로 오직 실행시에만 유효하다. 이것은 JSDT에서 모델 정확도를 다루는 데 있어 여전히 이슈가 되고 있다.
자바스크립트 IDE의 현재
지금도 일부 자바스크립트 도구를 활용할 수 있긴 하다. 하지만 다수의 유명한 도구들이 자바스크립트 언어 모델링 메커니즘의 부재 때문에 진정한 문맥을 인식하는 자동 완성(content assistance)을 제공하지 못한다. 모델이 없는 IDE에서, 자동 완성과 도구 활용은 가용한 타입 목록을 가지고 있는 정적인 일반 파일을 통해 사용한다. 이러한 타입은 일부 속성 타입에 기반을 두어 완전하지 못하며, 보통 코드에서 정의한 객체 멤버를 선택하지도 못한다. 자동 완성은 모델이 없으면, 무엇을 할 수 있는지에 매우 제한적이기 때문에 문맥을 인지하지 못한다.
언어 모델 없이, 문맥을 바탕으로하는 코드 활용은 어렵거나 불가능하다. 많은 프로그래밍 요소들이 코드의 문맥에 의존하고 있기 때문에, 문맥을 확정하는 것이 도구에 있어서 핵심적이다. 모델과 코드 문맥이 없는 IDE는 또한 전체 타입 분석과 검증, 스코프, 가시성 또는 개발을 편하게 해주는 모든 종류의 검증 요소들을 놓치게 된다.
JSDT 디자인
그림 1. JSDT 언어 추상화 스택
JSDT는 자바스크립트 언어를 모델링하고 클래스 구조를 실시간으로 반영한다. 따라서 새로운 접근 방법이 가능하다. 먼저 기본 언어 요소들을 구조화했다. 두 번째로, 추론 엔진(inference engine)이나 여러 엔진이 모든 클래스 구조와 언어의 차이를 채우는 데 도움을 준다.
기본 언어 모델
추론과 모델링 과정은 작업 수행 스택 과정으로 생각할 수 있다. 모델의 최상위는 자바스크립트 소스 코드다. 소스 코드는 이클립스 JDT와 비슷한 엔진을 사용하여 사적 언어 모델(private language model)로 변환된다. 언어의 이러한 순수 모델은 ECMA-3 표준을 따른다.
타입과 클래스 추론
일단 자바스크립트 언어 모델이 완성되면, 다음 과정은 타입과 클래스 추론을 관리하는 것이다. 많은 자바스크립트 기반 툴킷(예를 들어, Dojo, Rico, Prototype)이 각자의 기술을 사용하여 자바스크립트에서 객체 지향 프로그래밍을 가능하게 하고 있다. JSDT는 커스텀 툴킷을 인식하는 추론 엔진을 사용하여 클래스와 타입 구조를 툴킷을 사용하여 분석한다. 이러한 클래스와 타입들은 그 후에 언어 모델에 추가한다.
모델 노출하기
마지막으로, 사적 모델과 그 추론된 부분들은 공개 언어 모델(public language model)로 변환된다. 이 공개 언어 모델은 소스, 리팩터링, 그리고 여러분이 사용하는 도구가 이용한다. 여러 도구 중 하나가 자바스크립트 소스 일부를 변경하면, 그 변경은 공개 모델에 적용되고 자바스크립트 소스 코드로 변환된다.
변수와 멤버 스코프 관리하기
비록 언어 모델이 자바스크립트 소스와 문맥에 대한 기본 정보를 제공하지만 또 다른 중요한 것이 필요하다. 바로 환경 문맥이다. JSDT는 반드시 자바스크립트의 글로벌 스코프 실행 중에 있는 변수와 타입들을 이용할 수 있어야 한다. 이러한 변수와 타입들은 자바스크립트의 런타임 환경에 따라 다르다. 자바스크립트가 웹 브라우저 문맥에서 실행 중이라면, 화면과 브라우저 객체 데이터를 표현하는 객체, 타입, 필드를 글로벌 세션에서 사용할 수 있다. 코드가 브라우저가 아닌 곳에서 사용될 것이라면 가용한 전체 객체 집합은 달라질 것이다.
그림 2. JSDT 라이브러리 설정
JSDT는 라이브러리 메커니즘을 프로젝트에서 사용하여 흔히 사용하는 객체, 변수, 타입을 관리한다. 라이브러리를 프로젝트에 추가하여 사용자의 타깃 런타임 환경에 특화되어 있는 객체와 변수들을 제공할 수 있다. 두 개의 라이브러리에 출동이 생기는 멤버가 존재한다면, 그 멤버들을 모아 적절한 사용자 인터페이스를 통해 알려준다. 이러한 도움으로 여러 브라우저나 환경에서 사용할 수 있는 방법을 만들 수 있다.
유명한 브라우저에 사용할 라이브러리를 미리 패키징하는 것은 간단하다. 객체와 타입을 정의한 자바스크립트 소스 파일을 담은 플러그인에 라이브러리가 번들되어 들어있다. JSDT가 소스 편집기에서 열고 있는 파일을 모델링할 때, 파일의 소스 코드부터 모델링을 시작하고, 그 다음 각각의 소스 파일을 프로젝트의 해당 모델의 라이브러리 집합에 추가한다. 라이브러리 소스 파일들은 검증을 거치지 않고 오직 객체 구조를 정의하고 JsDoc을 말풍선 도움말(hover help)과 자동 완성에서 볼 수 있도록 하는 데만 사용한다.
라이브러리의 핵심 기능은 자바스크립트의 런타임 문맥을 관리하는 것이지만, 또 다른 중요한 기능을 제공한다. 크로스 소스 파일 레퍼런스를 지원한다. 순수 자바스크립트는 명시적인 include 기능이 없다. 개발자들은 함수를 여러 소스 파일에 걸쳐 작성하는 좋지 않은 습관이 있다. 라이브러리 설정 페이지는 소스 파일들 간의 내부 프로젝트 가시성을 관리하는 데 도움을 준다. 프로젝트 폴더가 소스 폴더로 표시되어 있다면, 그 폴더에 들어있는 모든 자바스크립트가 글로벌 스코프에 포함될 것이다. 제외 패턴(exclude patterns)을 사용하여 폴더를 제한할 수도 있다.
도구
높은 수준의 설계 관점에서, 이제는 기능들을 더 자세하게 살펴보자. JSDT의 약한 비주얼이지만 중요한 기능들인, 하이라이트(highlighting), 소괄호, 중괄호, 따옴표 자동 닫기, 자동 들여쓰기 등이 있다. 다음과 같이 말할 수 있겠다. "좋은 IDE가 제공해야 하는 것이 있다면, JSDT는 그것을 제공할 것이다."
자동 완성
그림 3. 자동 완성
자동 완성은 어디서든 Ctrl + Space를 치면 된다. 그림 3은 document 객체에 자동 완성을 사용한 모습을 보여준다. 자동 완성은 문맥을 인식하며 글로벌 스코프와 자바스크립트 모델을 기반으로 한다. 완성 요소로 필드 이름, 필드 타입, 필드의 선업 타입을 보여준다.
에러 확인과 수정
코드 에러를 활발하게 찾아 줄 때 IDE가 자장 유용하다. JSDT는 크게 세 종류의 에러를 찾아낸다. 문법/언어 에러, 타입/필드/메서드 가시성, 그리고 플로우나 로직 에러다. 모든 에러 경고 수준은 설정 페이지(preference page)에서 개인적으로 설정할 수 있다.
그림 4. 인식하지 못한 메서드
JSDT는 객체의 모든 필드와 메서드를 확인한다. 메서드가 인식되지 않으면 에러를 표시한다.
그림 5. 문법 에러
문법 에러 역시 찾아내고 표시한다. 여기서는, for() 문에 세미 콜론이 없어서 에러가 났다.
그림 6. 플로우 분석
그림 6은 플로우 분석을 보여준다. return 문 다음에 있는 코드에는 도달할 수 없기 때문에 에러를 표시했다.
그림 7. 퀵 픽스
몇몇 에러는 퀵 픽스를 가지고 있다. 그림 7에서 사용자는 인식하지 못한 필드 formyValue에 발생한 에러 표시를 클릭했다. JSDT는 이 에러를 바로 잡기 위한 몇 가지 방법을 제공한다.
코드 포맷
소스는 시간이 갈수록 지저분해진다. 처음에는 읽기 쉽고, 잘 구조화되어 있으며, 형식을 잘 갖춘 코드라도 문제는 개발과 디버깅을 할 때 코드 형식을 유지하는 것이다. JSDT는 설정 가능한 자동 들여쓰기와 문자 짝 맞추기 같은 다양한 포맷 기능을 제공한다. 이는 개발을 빠르게 하고 가독성을 높이는 데 도움을 줄 것이다.
받은 코드가 이미 지저분한 상태라면 어떻게 하겠는가? JSDT 코드 포매터는 마우스 클릭 한 번으로 지저분한 자바스크립트를 재구성할 수 있다. 포맷 엔진은 확장 가능한 형태로 설정할 수 있고, 설정은 팀에서 공유할 수 있도록 공개할 수 있다.
JSDT의 다른 기능들
JSDT가 위에서 살펴본 기능만 제공하는 것은 아니다. 다음은 JSDT 기능 전체 목록이다.
- 문법 하이라이팅
- 폴딩/라인 넘버
- 전체 아웃라이닝, 클래스 , 함수, 필드 보여주기
- 대응하는 소괄호/중괄호 확인하고 하이라이팅
- 소괄호, 중괄호, 들여쓰기 자동 완성
- Mark occurrence
- 주석 달기(한 줄, 블록)
- JsDoc 엘리먼트 생성하기
- do, for, try/catch, while 문으로 둘러싸기
- 사용자가 설정 가능한 템플릿 완성
- 함수 추출/함수 시그너처 변경
- 들여쓰기 바로잡기
- 선언 열기
- 타입 계층 구조 열기
- 호출 계층 구조 열기
- 코드 포매팅 커스터마이징
- 전체 검색
- 리팩터링/이름 바꾸기/이동하기
- 브레이크 포인트 기능 지원
- 파이어폭스, 인터넷 익스플로러, 그리고 ECMA-3에서 가용한 JsDoc으로 정의된 브라우저 라이브러리
- JsDoc과 자바스크립트 프로토타입 정의를 사용하여 사용자가 정의한 라이브러리 지원
- 라이브러리 이미지 지원
- ATF 프로젝트를 통한 디버깅 지원
결론
무료 웹 개발 환경이 필요하다면 이클립스가 가장 적당할 것이다. 최근 JSDT가 추가되어 이클립스에서 자바스크립트 기능은 시장에 나와 있는 모든 제품을 능가한다. 오픈 소스 프로젝트에 의한 빠른 성장에 고마움을 전하며, JSDT는 자바스크립트처럼 빠르게 성장할 것이다.
참고자료 교육
제품 및 기술 얻기
토론
- 이클립스 플랫폼 뉴스그룹은 이클립스 관련 질문이 있을 때 가장 처음으로 들려야 할 곳이다(이 링크를 클릭하면 기본 유즈넷 뉴스 리더 애플리케이션을 실행하고 eclipse.platform을 열 것이다).
- 이클립스 뉴스그룹에는 이클립스를 사용하고 확장하는 데 관심있는 사람들의 많은 참고자료가 있다.
- developerWorks 블로그에 가입하여 developerWorks 커뮤니티에 참여하라.
필자소개 | 
| | Bradley Childs는 텍사스 A&M 대학을 2004년에 졸업했다. Bradley Childs는 IBM에서 미들웨어 개발 관련 일을 얻었고 후에 통합 기술로 이동했다. JSDT를 개발한 Phil Berkland와 가까운 사이이며, 또한 Ajax 툴링 프레임워크 프로젝트에 활발하게 참여 중이다. |
기사에 대한 평가
|
| 이 문서 북마킹 하기
|
| |
