[펌] Javascript 개발시에 유용한 Editplus 사용자도구 설정

출처: http://www.yangkun.pe.kr/115

 

Javascript 로 개발시에 두가지 도구를 사용해 왔습니다. 바로 Aptana 와 Editplus 인데요 Aptana 는 Eclipse를 기반으로한 IDE이기 때문에 수많은 Plugin 과 파워풀한 기능들이 제대로 IDE인 점은 부정할 수 없지만 저의 경우에는 몇가지 단점 때문에 Editplus로 자꾸 손이갑니다.

• 리소스를 너무 많이 차지합니다.
• 그래서 기동이 많이 느리고 제 컴퓨터에서는 가끔 버벅거립니다.
• 모든 소스는 Workspace - Project 의 구조로 관리됩니다.

그럼에도 Aptana는 아주 훌륭한 웹개발도구임에는 틀림없습니다. 다만, 저에게 사랑을 받지 못할뿐... 어쨌든 이 포스트가 Aptana, Editplus 를 비교하자는 글이 아니니 여기까지 하겠습니다.

이 포스트에서는 Editplus 를 사용해 Javascript 개발할 때 사용할 수 있는 몇가지 유용한 도구 설정을 알려드리려 합니다.

 

코드 하이라이트

제가 사용하는 Javascript Syntax 파일을 공유합니다. Syntax 파일은 아래와 같은 구성으로 돼있습니다.

• Reserved Keywords : 예약어
• Built-in method : 기본 제공되는 method
• Object : Array, RegExp 등 기본 제공되는 객체들
• Collections : options, arguments 등 기본 제공되는 컬렉션들
• Predefined Properties : styles, style 등 기본 제공되는 프로퍼티들
• Event : onclick, onload 등 이벤트 이름들
• Style Properties : backgroundColor, fontSize 등 Javascript 에서 접근하는 CSS 이름들
• moo function : MooTools 에서 제공하는 method
• moo object : MooTools 에서 제공하는 Class 들과 plugin 들

 

 

적용예

js.stx

다운로드

Editplus 의 사용자도구

사용자도구는 Editplus에서 외부 도구를 실행할 수 있도록 하며, 외부 도구로 넘길 수 있는 인자로는 편집중인 파일, 선택한 부분 문자열 등등이 있습니다. 사용자 도구그룹은 유사한 도구들을 묶을 수 있게 합니다. 아래는 사용자도구 설정 예입니다.

 

• 그룹이름 ... : 현재 선택한 그룹의 이름을 변경합니다.
• 추가 >> : 새로운 도구를 현재 선택한 그룹에 추가합니다. 프로그램, CHM, HLP 파일등을 지정할 수 있으며 저장된 매크로를 지정할 수 있습니다.
• 제거 : 현재 선택한 도구를 제거합니다.
• 위 / 아래 : 선택한 도구의 표시 순서를 변경합니다.
• 메뉴 제목 : 도구의 이름
• 파일 이름 : 추가>> 옵션에 따라 실행할 파일경로 혹은 CHM, HLP, MAC 파일의 경로를 지정
• 인수 : 실행 파일로 전달할 인수. 현재문서경로, 선택한 텍스트, 커서가 위치한 단어 등 다양한 인수를 설정할 수 있습니다.
• 디렉토리 : 해당 도구를 실행할 초기 디렉토리
• 출력 내용 캡쳐 : 도구의 실행 결과를 별도의 출력창에 표시합니다.
• 출력 패턴 : 출력창에 표시되는 내용중에 에디터와 상호작용할 수 있는 부분을 설정합니다.
• 종료시 창 닫기 : 콘솔용 프로그램에 해당되며 도구의 실행이 끝나면 자동으로 콘솔을 닫습니다.
• 텍스트 필터로 실행 : 도구를 실행할때 에디터에서 선택한 텍스트가 표준 입력으로 전달이 되고 도구의 실행 결과가 선택한 텍스트 대신 삽입됩니다.
• 열려진 파일 저장 : 도구를 실행하기 전에 현재 편집중인 파일을 저장합니다.
• 출력창에 텍스트 필터 출력 : 텍스트 필터로 실행은 같으나 도구 실행 결과를 선택한 텍스트대신 삽입하는게 아니라 별도의 출력창에 표시합니다.

 

Javascript Reference

Javascript 코드를 작성중 실행하면 CHM 파일이 열리면서 커서가 위치한 단어에 대해 색인을

조회합니다. 먼저 Javascript Reference CHM 파일을 다운로드 합니다.

JavaScript150.chm

다운로드

Editplus 에 아래처럼 설정합니다.

 

사용자 도구 설정에서 [ 추가 > HTML 도움말 파일 (*.chm) ] 을 선택해 위에서 다운로드한

CHM파일을 지정합니다.

 

도구 설정 후 에디터에서 특정 단어에 커서를 위치한채 도구를 실행하면 CHM 파일이 열리고 선택한 단어에 대해서 색인을 보여줍니다.

 

Javascript Packing

Javascript 코드를 암호화하면서 용량을 줄입니다. 이 기능을 수행하기 위해서는 dean edwards packer 가 필요합니다. 여기서 다운로드 하십시오. 이 Packer 는 mootools에서 사용하는 압축방법이기도 합니다. 저는 PHP5 가 설치되어 있으므로 PHP5 버전을 다운로드 했습니다.

그리고, 제공되는 예제 PHP 스크립트를 표준입력에서 javascript 내용을 입력받고 압축한 결과를 출력하는 PHP스크립트로 변경해야 합니다.

[code php]
require 'class.JavaScriptPacker.php';
$stdin = fopen('php://stdin', 'r');
$script = '';
while(false != ($line = fgets($stdin))) $script .= $line;
$packer = new JavaScriptPacker($script, 'Normal', true, false);
echo $packer->pack();
[/code]
아래처럼 설정합니다.

 

1. 추가 >> 에서 "프로그램"을 선택합니다.
2. 메뉴제목에 packing 을 입력합니다.
3. 명령에는 php 스크립트를 실행시킬 수 있는 파일을 선택합니다.
4. 인수에는 -q 위에서 수정한 php 파일 경로 $(CurSel) 를 입력해서 현재 선택한 스크립트를 php 스크립트로 전달합니다.
5. [텍스트 필터로 실행] 을 체크해서 현재 선택된 javascript 코드가 압축된 코드로 대체되게 합니다.

압축할 코드를 선택하고 도구를 실행하면

 

 

3,743 Byte 의 자바스크립트가

 

 

 

1/2 정도인 1,598 Bytes 의 코드로 변경됩니다.

 

Javascript 문서화

Javascript 의 간단한 기능들만을 사용하던 과거와 달리 점점 Javascript 의 역할이 커져가고 많은 부분 의지하게 되면서 Javascript 파일들이 많아지고 대형화 됐습니다. 이에 Javascript 에도 문서화를 요구하게 되는데요 이번에 소개해 드릴 도구는 Javascript의 문서화를 도와주는 도구입니다. 저는 NaturalDocs 을 사용했습니다. 이는 MooTools 에서도 사용하는 문서화 도구입니다. 아래는 사이트에서 소개하는 글입니다.

Natural Docs is an open-source, extensible, multi-language documentation generator.  You document your code in a natural syntax that reads like plain English.  Natural Docs then scans your code and builds high-quality HTML documentation from it.

여기에서 다운로드 하십시오. Natural Docs 는 Perl 을 사용하기 때문에 ActivePerl 등이 설치되어 있어야 합니다. Natural Docs 를 다운로드하고 설치 확인이 되었으면 Editplus 사용자 도구를 아래처럼 설정합니다.

 

 

1. 추가>> "프로그램"을 선택합니다.
2. 메뉴제목에 Natural Docs 를 입력합니다.
3. 명령에는 Natural Docs 에서 제공하는 배치파일을 선택합니다.
4. 인수에는 -i $(FileDir) -o HTML $(FilePath)\..\docs -p $(FilePath)\..\ndocs 를 입력합니다.
   
   • -i $(FileDir) : 현재 파일 디렉토리를 입력 폴더로 지정
   • -o HTML $(FilePath)\..\docs : 출력을 HTML로 설정하고 문서 파일들을 Javascript 와 같은 디렉토리의 docs 폴더에 저장
   • -p $(FilePath)\..\ndocs : 프로젝트 파일들을 Javascript 파일과 같은 디렉토리의 ndocs 폴더에 저장
5. 디렉토리에는 Natural Docs 가 위치한 디렉토리를 설정합니다.
6. 출력 내용 캡쳐를 체크해 Natural Docs 의 문서화 진행상황을 별도의 출력차에 표시하게 합니다.
7. 열려진 파일 저장을 체크해 문서화 하기전에 스크립트를 저장하도록 합니다.
   

아래와 같은 구조로 폴더가 구성됩니다. Javascript 파일들과 docs 폴더,

그리고 Natural Docs의 프로젝트 파일들이 저장될 ndocs 폴더가 있습니다.

 

문서화할 스크립트를 작성합니다. Natural Docs 로 문서화를 수행하려면 Natural Docs 에서 요구하는 포맷에 맞게 주석을 작성해야 합니다. 자세한 내용은 여기를 참고하세요. 아래는 제가 작성한 스크립트 예입니다. (이전 포스트에서 사용했던 스크립트입니다.)

 

도구를 실행하면 docs 폴더에 아래와 같은 문서들이 생성됩니다.

 

index.html 을 열어보면 아래와 같은 문서가 생성된것을 보실 수 있습니다.

 

다양한 옵션들을 통해 더욱 미려한 문서를 만들 실 수 있을겁니다.

자세한 내용은 Natural Docs 홈페이지를 참고하십시오.

사족

위에서는 제가 Javascript 작성시 사용하는 도구들 중 일부를 소개해드렸습니다. 이 포스트는 위에서 말씀드린 도구들이 가장 좋은 것이라는 것보다는 이런게 있다정도의  소개가 되겠습니다. 이 외에도 Ant를 사용하는 도구, Python 등으로 직접 만든 도구 등등이 있겠습니다만 중요한것은 실제로 이런 도구들을 찾고 시도해보고 사용하는 등의 생산성을 높이려는 노력이 아닌가 합니다.

 

JavaScript150.chm

0.33MB

js.stx

0.01MB