숍위즈[www.shop-wiz.com] - 오픈소스의 시작

Web	www.shop-wiz.com

[1536]














액션스크립트

웹은 계속 진화하고 있다. 하드웨어어의 발전속도는 훨씬 빠르다. 개인화 PC 의 성능은 이제 서버의 성능과 비교해도 크게 손색이 없을 듯하다. 이제는 비지니스 로직을 서버 프로그램에 의존했던 방식에서 벗어나 브라우저의 역량이 점점 중요해 지는 시점이 아닌가 싶다. 리치 클라이언트의 등장이다. 아직까지는 속도가 많이 느려서 불편한 점이 없지 않아 있지만...앞으로 프로그래밍의 주도권은 어떻게 전개될까? 스크립트에 가장 적합한 언어들(php, perl, ruby, common lisp)이 점점 주목을 받고 있는 걸 어떻게 봐야 할까?

4장까지 ajax 에 대한 기본적인 특징들을 예제를 통해서 살펴보았다. Ajax 로 개발한다는 것은 자바스크립트를 많이 사용한다는 의미이다. 따라서 이번 5장에서는 ajax 어플리케이션을 좀 더 쉽게 개발할 수 있는 몇가지 툴을 소개하기로 하겠다. 첫번째로 자바스크립트 코드의 다큐먼트를 생성해 주는 오픈소스 설치 및 사용법에 대해서 알아보자.

자바스크립트의 가장 큰 단점 중의 하나는 가독성이 정말 떨어진다는 것이다. 첨부터 다시 코딩하는 것이 오히려 나을 정도로 자바스크립트는 코드를 읽는데 난해한 언어 중 하나이다. 따라서 자스크립트 소스를 보고 기능을 판단하기 보다는 주석을 보고 사용법을 익히는 것이 다른 개발자에 대한 배려라고 할 수 있겠다. 자바 언어에는 javadoc 이라는 명령어를 이용해서 주석을 html 로 작성할 수 있다. 지금은 대부분의 통합 IDE 툴에서 메뉴로 제공하고 있다. 이와 같은 기능을 구현해 놓은 JSDoc(http://jsdoc.sourceforge.net/) 이라는 Perl 로 제작된 오픈소스가 있다. 리눅서에게는 문제가 안되겠지만 윈도우 사용자들은 Perl runtime environment 를 설치해야 사용할 수 있다.

JSdoc 을 실행해 보기 위해서는 우선 아래와 같은 과정을 거쳐야 한다.

1. ActivePerl 설치

2. HTML::Template Perl module 설치하기

3. jsDoc 다운받기

1. ActivePerl 설치하기

오픈소스인 JSDoc 은 Perl 로 만들어 졌기 때문에 Perl 실행환경인 ActivePerl 을 설치해야 한다. 다음 url 에서 윈도우 용 AS Package 를 다운 받는다. http://www.activeperl.com/Products/Download/Download.plex?id=ActivePerl

ActivePerl-5.6.1.638-MSWin32-x86.zip 파일을 다운 받고 압축을 푼 후 install.bat 파일을 실행한 후 적당한 입력 파라미터를 입력하면 아래와 같이 설치가 마무리 된다.

Welcome to ActivePerl.

    This installer can install ActivePerl in any location of your choice.
    You do not need Administrator privileges. However, please make sure
    that you have write access to this location.

Enter top level directory for install [c:\Perl]: c:\Perl

The typical ActivePerl software installation requires 35 megabytes.
Please make sure enough free space is available before continuing.

ActivePerl 638 will be installed into 'c:\Perl'
Proceed? [y] y

    If you have a development environment (e.g. Visual Studio) that you
    wish to use with Perl, you should ensure that your environment (e.g.
    %LIB% and %INCLUDE%) is set before installing, for example, by running
    vcvars32.bat first.
Proceed? [y] y

Create shortcuts to the HTML documentation? [y] y

Add the Perl/bin directory to the PATH? [y] y

Copying files...
2455개 파일이 복사되었습니다.
Finished copying files...
Configuring Perl installation at c:\Perl
Translating C:\p4view\Apps\ActivePerl\MSI\data\ActivePerl\Perl to c:\Perl
editing c:\Perl/site/lib/ppm.xml
editing c:\Perl/site/lib/ppm-conf/Archive-Tar.pkg
editing c:\Perl/site/lib/ppm-conf/Compress-Zlib.pkg
editing c:\Perl/site/lib/ppm-conf/Data-Dump.pkg
editing c:\Perl/site/lib/ppm-conf/Digest-HMAC.pkg
editing c:\Perl/site/lib/ppm-conf/Digest-MD2.pkg
editing c:\Perl/site/lib/ppm-conf/Digest-MD4.pkg

editing c:\Perl/site/lib/ppm-conf/Digest-SHA1.pkg
editing c:\Perl/site/lib/ppm-conf/Digest.pkg
editing c:\Perl/site/lib/ppm-conf/File-CounterFile.pkg
editing c:\Perl/site/lib/ppm-conf/Font-AFM.pkg
editing c:\Perl/site/lib/ppm-conf/HTML-Parser.pkg
editing c:\Perl/site/lib/ppm-conf/HTML-Tagset.pkg
editing c:\Perl/site/lib/ppm-conf/HTML-Tree.pkg
editing c:\Perl/site/lib/ppm-conf/IO-Zlib.pkg
editing c:\Perl/site/lib/ppm-conf/libnet.pkg
editing c:\Perl/site/lib/ppm-conf/libwin32.pkg
editing c:\Perl/site/lib/ppm-conf/libwww-perl.pkg
editing c:\Perl/site/lib/ppm-conf/MD5.pkg
editing c:\Perl/site/lib/ppm-conf/MIME-Base64.pkg
editing c:\Perl/site/lib/ppm-conf/PPM-Agent-Perl.pkg
editing c:\Perl/site/lib/ppm-conf/PPM.pkg
editing c:\Perl/site/lib/ppm-conf/ppminst.bat
editing c:\Perl/site/lib/ppm-conf/SOAP-Lite.pkg
editing c:\Perl/site/lib/ppm-conf/Storable.pkg
editing c:\Perl/site/lib/ppm-conf/Test-Simple.pkg
editing c:\Perl/site/lib/ppm-conf/Tk.pkg
editing c:\Perl/site/lib/ppm-conf/URI.pkg
editing c:\Perl/site/lib/ppm-conf/XML-Parser.pkg
editing c:\Perl/site/lib/ppm-conf/XML-Simple.pkg
editing c:\Perl/site/lib/auto/XML/Simple/.packlist
editing c:\Perl/site/lib/auto/XML/Parser/.packlist
editing c:\Perl/site/lib/auto/Win32/.packlist
editing c:\Perl/site/lib/auto/Win32/AuthenticateUser/.packlist
editing c:\Perl/site/lib/auto/URI/.packlist
editing c:\Perl/site/lib/auto/Unicode/String/.packlist
editing c:\Perl/site/lib/auto/Tk/.packlist
editing c:\Perl/site/lib/auto/Text/Autoformat/.packlist
editing c:\Perl/site/lib/auto/Test/Simple/.packlist
editing c:\Perl/site/lib/auto/Storable/.packlist
editing c:\Perl/site/lib/auto/SOAP/Lite/.packlist
editing c:\Perl/site/lib/auto/PPM-Agent-Perl/.packlist
editing c:\Perl/site/lib/auto/PPM/.packlist
editing c:\Perl/site/lib/auto/PPM/Shell/.packlist
editing c:\Perl/site/lib/auto/Net/.packlist
editing c:\Perl/site/lib/auto/MIME/Base64/.packlist
editing c:\Perl/site/lib/auto/MD5/.packlist
editing c:\Perl/site/lib/auto/libwww-perl/.packlist
editing c:\Perl/site/lib/auto/IO/Zlib/.packlist
editing c:\Perl/site/lib/auto/HTML-Tree/.packlist
editing c:\Perl/site/lib/auto/HTML/Tagset/.packlist
editing c:\Perl/site/lib/auto/HTML/Parser/.packlist
editing c:\Perl/site/lib/auto/Font/AFM/.packlist
editing c:\Perl/site/lib/auto/File/CounterFile/.packlist
editing c:\Perl/site/lib/auto/Digest/.packlist
editing c:\Perl/site/lib/auto/Digest/SHA1/.packlist
editing c:\Perl/site/lib/auto/Digest/MD5/.packlist
editing c:\Perl/site/lib/auto/Digest/MD4/.packlist
editing c:\Perl/site/lib/auto/Digest/MD2/.packlist
editing c:\Perl/site/lib/auto/Digest/HMAC/.packlist
editing c:\Perl/site/lib/auto/Data/Dump/.packlist
editing c:\Perl/site/lib/auto/Compress/Zlib/.packlist
editing c:\Perl/site/lib/auto/Archive/Zip/.packlist
editing c:\Perl/site/lib/auto/Archive/Tar/.packlist
editing c:\Perl/site/lib/auto/ActiveState/Rx/.packlist
editing c:\Perl/site/lib/auto/ActiveState/RelocateTree/.packlist
editing c:\Perl/site/lib/auto/ActivePerl/DocTools/.packlist
editing c:\Perl/lib/.packlist
editing c:\Perl/lib/Config.pm
editing c:\Perl/lib/perllocal.pod
editing c:\Perl/bin/c2ph.bat
editing c:\Perl/bin/find2perl.bat
editing c:\Perl/bin/h2ph.bat
editing c:\Perl/bin/h2xs.bat
editing c:\Perl/bin/perlbug.bat
editing c:\Perl/bin/perlcc.bat
editing c:\Perl/bin/perldoc.bat
editing c:\Perl/bin/pl2pm.bat
editing c:\Perl/bin/pod2html.bat
editing c:\Perl/bin/pod2latex.bat
editing c:\Perl/bin/pod2man.bat
editing c:\Perl/bin/pod2text.bat
editing c:\Perl/bin/ppm3-bin.cfg
editing c:\Perl/bin/pstruct.bat
editing c:\Perl/bin/s2p.bat
editing c:\Perl/bin/splain.bat
cleaning out backups

Configuring c:\Perl/lib/Config.pm for use in c:\Perl...

Configuring Perl ...

Configuring PPM for use in c:\Perl...

Build directory is now C:\DOCUME~1\JYJ\LOCALS~1\Temp.

If you are behind a firewall, you may need to set the following
environment variables so that PPM will operate properly:

    set HTTP_proxy=address:port         [e.g. 192.0.0.1:8080]
    set HTTP_proxy_user=username
    set HTTP_proxy_pass=password
    set HTTP_proxy_agent=agent          [e.g. "Mozilla/5.0"]

Building HTML documentation, please wait...

This simplified installation program currently does *not*:

o set up MSWin32 file associations
o configure Perl for use with a Web Server

Refer to your Operating System and/or Web Server documentation for
details on how to to perform these modifications.

Thank you for installing ActivePerl!

윈도우에 Perl 설치가 끝나면 C:\Perl\bin 디렉토리를 패스에 걸어주자. 설치된 펄을 uninstall 하는 것은 아주 간단하다. 설치한 C:\Perl 디렉토리를 통째로 삭제하면 된다.

2. HTML::Template Perl module 설치하기

템플릿 펄 모듈은 아주 쉽게 설치된다.

C:\>ppm
PPM interactive shell (2.2.0) - type 'help' for available commands.
PPM> install HTML-Template
Install package 'HTML-Template?' (y/N): y
Installing package 'HTML-Template'...
Downloading http://ppm.activestate.com/PPMPackages/5.6/MSWin32-x86-multi-thread/
HTML-Template-2.7.tar.gz ...
Installing C:\Perl\html\site\lib\HTML\Template.html
Installing C:\Perl\site\lib\HTML\Template.pm
PPM> quit
Quit!

C:\>

3. jsDoc 다운받기

jsDoc 은 http://sourceforge.net/projects/jsdoc 에서 다운받으면 된다.

tar 형식의 파일을 풀면 jsdoc.pl 이라는 펄로 작성된 파일이 존재할 것이다.

이제 자바스크립트용 html 온라인 다큐먼트를 만들 준비를 모두 마쳤다. 다큐먼트를 만들 자바스크립트 파일(*.js) 을 jsDoc 이 설치된 디렉토리로 복사한 후 perl jsdoc.pl xxx.js 명령어를 입력하면 다큐먼트가 js_docs_out 라는 이름의 디렉토리 안에 생성된다. xxx.js 파일은 다큐먼트를 생성할 자바스크립트 파일의 이름이다.

4. jsDoc 샘플 실행하기

아래와 같은 명령어를 실행하면 html 다큐먼트가 생성된다.

E:\etc\JSdoc>perl jsdoc.pl jsDocExample.js
Loading sources from jsDocExample.js
Completed generating documentation

테스트용 jsDocExample.js 파일은 아래와 같다.

/**
* @fileoverview This file is an example of how JSDoc can be used to document
* JavaScript.
*
* @author Ryan Asleson
* @version 1.0
*/

/**
* Construct a new Person class.
* @class This class represents an instance of a Person.
* @constructor
* @param {String} name The name of the Person.
* @return A new instance of a Person.
*/
function Person(name) {
    /**
     * The Person's name
     * @type String
    */
    this.name = name;

    /**
     * Return the Person's name. This function is assigned in the class
     * constructor rather than using the prototype keyword.
     * @returns The Person's name
     * @type String
    */
    this.getName = function() {
        return name;
    }
}

/**
* Construct a new Employee class.
* @extends Person
* @class This class represents an instance of an Employee.
* @constructor
* @return A new instance of a Person.
*/
function Employee(name, title, salary) {
this.name = name;

    /**
     * The Employee's title
     * @type String
    */
    this.title = title;

    /**
     * The Employee's salary
     * @type int
    */
    this.salary = salary;
}

/* Employee extends Person */
Employee.prototype = new Person();

/**
* An example of function assignment using the prototype keyword.
* This method returns a String representation of the Employee's data.
* @returns The Employee's name, title, and salary
* @type String
*/
Employee.prototype.getDescription = function() {
    return this.name + " - "
        + this.title + " - "
        + "$" + this.salary;
}

<jsDocExample.js 의 전체 소스 코드>

위 jsDocExample.js 파일을 jsDoc 을 사용하여 다큐먼트를 생성한 결과는 아래와 같다.