About Programming/jQuery2012.11.27 20:16

- JSDT 란?

JSDT(JavaScript Debug Toolkit, 이하 JSDT로 표기함)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다. JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.


JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
browser.png
- JSDT의 구조
실제로 JSDT를 실행해보기 전에 JSDT의 동작원리에 대해서 살펴보겠습니다.

JSDT는 HTTP 프록시 서버를 내장하고 있어, 디버깅 웹 브라우저는 HTML및 JavaScript와 같은 리소스를 프록시를 통해 참조하게 됩니다. 이 경우 HTML 및 JavaScript가 프록시에 따라서 JSDT에 디버깅하는데 필요한 JavaScript가 자동으로 포함되게 됩니다. 포함된 JavaScript 코드는 XHR를 통해 디버거 쪽으로 필요한 정보를 전달합니다.
structure.png
이러한 구조가 브라우저 쪽에 특별한 기능을 설치할 필요 없이 다양한 웹 브라우저에서 디버깅을 가능하게 합니다.
- JSDT 설치
이클립스 주노 버전의 Marketplace에서 검색해 보니 목록에는 나오지만 Install 버튼이 안보이네요. "Install New Software"를 통해 설치 합니다.
우선 이클립스 상단 메뉴 'Help > Eclipse Marketplace...'를 클릭 한 후 jsdt 로 검색 하면 두 번째에 'Javascript Debug Toolkit'에 대한 정보를 확인 할 수 있습니다.
Install 버튼이 없기 때문에 'Learn more' 를 클릭해서 Update site 확인 합니다. 또는 여기를 클릭해서 바로 이동합니다.
marketplace.png
JSDT 2.2.0은 이클립스 3.2 이상부터 지원하고 있네요. 화살표 모양의 클릭해서 Update Site 주소를 복사해 놓습니다.
jsdt2.2.0.png
이클립스 상단 메뉴 Help > Install New Software 클릭해서 설치 창이 뜨면 'Add...' 클릭해서 Repository Location 에 좀 전에 복사한 URL을 붙여놓습니다.(Name은 임의로 넣음)
repository.png
설치가 완료되면 이클립스가 재시작합니다. Debugger가 잘 작동되는지 간단하게 테스트 페이지를 만들어 보겠습니다.
간단하게 Test.html 페이지를 하나 만들고 breakpoint 를 찍은 후 F11 키로 debug 모드로 실행합니다. 아래와 같이 뜨면 Javascript Debug Toolkit을 선택을 하면 자바스크립트를 디버깅할 수 있습니다.
debug.png
test.png
원하는 만큼 깔끔하게 동작하지는 않지만 이정도면 아주 훌륭한거 같습니다. 근데 문제가 하나 남았네요. Javascript debug Toolkit으로 실행하니 UT-8로 작성된 화면들에 대해 한글 깨짐 현상이 발생합니다.
encoding1.png
그래서 다음과 같이 해결했습니다. 이클립스 홈 폴더에 있는 eclipse.ini 파일을 열어 vm argument로 파일 인코딩 파라미터를 추가했습니다.
위치는 -vmargs 바로 아래에 "-Dfile.encoding=utf-8"를 추가합니다.
eclipseini.png
이클립스 재시작 한 후 다시 한번 실행 시켜보니 한글도 정상적으로 잘 출력네요.
encoding2.png
신고
Posted by 달콩이 인생
About Programming/jQuery2012.11.22 08:58

이클립스 3.5(Galileo), 3.6(Helios) 버전에서 jQuery Code Assist를 지원하도록 설정하기 위해서는 jQueryWTP 플러그인을 설치해야합니다.

지금 사용하고 있는 이클립스 버전이 3.7(Indigo) 이상이면 여기를 참고해서 JSDT jQuery Integration 플러그인을 설치하세요.

[설치 방법]

1. 만약에 설치 전 이클립스를 실행하고 있다면 종료.

2. 다음 경로에서 jqueryWTP1.20foEn.jar 파일을 다운로드(가장 최근 버전이고 지금은 더 이상 업데이트되고 있지 않은듯 합니다.)

: http://code.google.com/a/eclipselabs.org/p/jquerywtp/downloads/list

3. 이클립스가 설치된 폴더에서 plugins 폴더 아래 org.eclipse.wst.jsdt.core_x.x.xxxxxx.jar 파일을 임의의 폴더에 복사(백업)

plugins.png

4. 명령 프롬프트를 띄우고 2번에서 다운로드 받은 폴더로 이동한 후 jqueryWTP1.20foEn.jar를 실행

: java -jar jqueryWTP1.20foEn.jar

5. 아래 그림과 같이 화면이 뜨면 "Jar File"과 "Output Dir"에 각각 Browse...를 클릭해서 파일 또는 폴더를 선택 후 Generate 클릭

jqueryWTP실행.png

- Jar File : 3번에서 백업해두웠던 org.eclipse.wst.jsdt.core_x.x.xxxxxx.jar 를 선택

- Output Dir : 새로 생성될 jar 파일을 저장될 임시 폴더를 선택

6. Generate 버튼을 클릭하면 Output Dir에 지정한 폴더에 새로운 jar 파일이 생성

Generate.png

7. 6번에서 생성된 jar 파일을 이클립스 홈 아래 plugins 폴더에 붙어넣기(덮어씌움)함

8. 이클립스 실행 후 Dynamic Web Project 생성해서 확인

helios.png

신고
Posted by 달콩이 인생
About Programming/jQuery2012.11.22 08:08

- 들어가기 전

현재 이클립스 최신 버전은 주노(Juno, 어떤 소행성 이름) 입니다.

이클립스 새 버전 주노는 외형적으로 많은 변화가 있는데 심플하면서 색 톤도 회색에서 하늘색으로 변경 되었습니다.

추후 저희 제품에 반영될 디자인 작업이 한창인데 색 톤이 얼추 비슷한 느낌도 들어 왠지 친근감까지 느껴지네요.

jQuery를 이용한 웹 개발을 위해 여러가지 IDE 툴들이 있지만 저는 이클립스 주노에서 개발 환경을 구성해서 작업해

보려고 합니다(주노 버전이 느리다는 평들도 보이네요). 인터넷에서 찾은 내용이 주가 되겠지만 제가 알고

있는 내용 조금, 삽질한 내용(대부분) 등을 지금부터 공유해 보도록 하겠습니다.

- 본론

이클립스 버전 마다 jQuery Code Assist를 지원하도록 설정 하는 방법이 약간씩 틀리네요.

먼저 지금까지 출시된 이클립스 버전은 http://wiki.eclipse.org/Older_Versions_Of_Eclipse 에서 확인 할 수 있습니다.

  • Eclipse Europa Packages (2007 - v 3.3)
  • Eclipse Ganymede Packages (2008 - v 3.4)
  • Eclipse Ganymede SR1 Packages (v 3.4.1)
  • Eclipse Ganymede SR2 Packages (v 3.4.2)
  • Eclipse Galileo Packages (2009 - v 3.5)
  • Eclipse Galileo SR1 Packages (v 3.5.1)
  • Eclipse Galileo SR2 Packages (v 3.5.2)
  • Eclipse Helios Packages (2010 - v 3.6)
  • Eclipse Helios SR1 Packages (v 3.6.1)
  • Eclipse Helios SR2 Packages (v 3.6.2)
  • Eclipse Indigo Packages (2011 - v 3.7)
  • Eclipse Indigo SR1 Packages (v 3.7.1)
  • Eclipse Indigo SR2 Packages (v 3.7.2)
  • Eclipse Juno Packages (2012 - v 4.2)

1. JSDT jQuery Integration 플러그인 설치

이클립스에 JSDT jQuery Integration 플러그인 설치해서 Code Assist 를 지원하도록 설정합니다.

JSDT jQuery는 이클립스 버전 3.7, 3.8, 4.2 에서 지원하고 Eclipse Marketplace에서 설치 할 수

있습니다. (이클립스 4.2_Juno가 설치되었다고 가정함)

JSDT jQuery 1.5.0.png

[설치 방법]

1. 이클립스 상단 Help 메뉴 > Eclipse Marketplace 클릭

2. "JSDT jQuery" 로 검색 한 후 Install

JSDT jQuery install.png

3. Install 완료 후 이클립스 재시작 여부를 묻음에 Yes 를 클릭하고 재시작

4. Dynamic Web Project를 생성

5. Project Explorer View 에서 "JavaScript Resources" 클릭 후 Alt+Enter 또는 마우스 우클릭 해서 Properties 화면으로 띄움

5. Add JavaScript Library 클릭 후 jQuery Library 선택하고 Finish

JavaScript Resources1.png

6. 소스 코드에서 jQuery Code Assist 확인

Code Assist.png

신고
Posted by 달콩이 인생

티스토리 툴바