이클립스(Eclipse) JQuery 개발 시 자동 완성 기능 JSDT 플러그인 사용하기

이클립스(Eclipse) JQuery 개발 시 자동 완성 기능 JSDT 플러그인 사용하기

 

프로그램 개발할 때 자동 완성 기능은 필수 입니다. 일일이 함수를 다 외우지 않아도 되고 개발 생산성을 아주 높일 수가 있습니다. 이클립스에서 자바스크립트 개발할 때 설치하는 플러그인 중 JQuery 용이 있습니다. JSDT JQuery 플러그인을 설치하면 인텔리젼스 기능을 사용할 수 있습니다.

 

▼ 먼저 플러그인을 설치하기 위해 마켓플레이스로 이동합니다. Help 메뉴로 가시면 마켓플레이스 팝업창을 열수 있는 [Eclipse Marketplace] 가 있습니다. 

 

▼ 마켓플레이스 팝업창에서 Find 검색창에 JSDT 라고 입력합니다. 찾은 목록 중 JSDT jQuery 를 볼 수 있을 겁니다. 오른쪽 하단에 [Install] 버튼을 클릭해서 바로 설치합니다. 설치 과정은 특별한 것이 없으며 끝나면 재 시작을 해야 합니다

 

▼ 설치 후 Java EE perspective 로 화면을 변경합니다. 그럼 프로젝트 폴더 목록에서 JavaScript Resources 를 볼 수 있습니다. 오른 마우스나 Alt + Enter 를 눌러 속성 정보로 창을 엽니다.

▼ JavaScript Resources 팝업창에서 다운받은 JSDT jQuery 라이브러리를 추가해야 합니다. 오른쪽 메뉴 중 [Add JavaScript Library] 를 클릭합니다.

 

▼ [Add JavaScript Library] 클릭하시면 팝업창이 하나 뜨는데 목록에 jQuery Library 라고 있을 겁니다. 선택 후 Next 를 눌러 다음 단계로 넘어갑니다.

 

▼ 다음 단계에서 jQuery Library 의 버전을 선택합니다. 이것은 프로젝트 환경에 맞춰서 결정하시면 되겠죠.

 

▼ jQuery 버전까지 결정하셨다면 Finish 를 눌러 창을 닫습니다. 그럼 Libraries 목록에 추가한 jQuery 라이브러리가 나타납니다.

 

▼ 이제 라이브러리를 추가했으니 제대로 자동 완성 기능이 작동하는지 테스트해 봐야겠죠. 아래 그림처럼 객체 뒤에 “.” 을 찍으면 사용 가능한 함수들이 뜨게 됩니다. 이상으로 jQuery 개발 시 필히 추가해야 되는 플러그인에 대해 알아 보았습니다.