End-to-end Ajax 애플리케이션 개발, Part 1: Ajax 환경 설정 (한글)

문서 옵션 JavaScript가 필요한 문서 옵션은 디스플레이되지 않습니다. 영어원문  제안 및 의견 피드백

난이도 : 중급

Senthil Nathan, Senior Software Engineer, IBM

2007 년 7 월 18 일

Ajax (Asynchronous JavaScript + XML)는 브라우저에서 실행되는 웹 애플리케이션을 데스크탑용 소프트웨어 수준으로 끌어 올리는 방식으로 빠르게 대두되고 있습니다. Linux-Apache-MySQL-PHP (LAMP) 같은 오픈 소스 소프트웨어와 IBM® WebSphere® Application Server Community Edition 같은 오픈 표준 기반 Java™ 2 Platform, Enterprise Edition 미들웨어는 Ajax 웹 애플리케이션들을 개발 및 전개하는 탁월한 기능들을 제공하고 있습니다. 이 글은 오픈 소스 미들웨어 스택을 사용하여 엔드투엔드 Ajax 애플리케이션을 개발하는 방법에 관한 시리즈입니다. 여러분이 XHTML, CSS, JavaScript, PHP, SQL로 작성된 코드를 읽고 이해할 수 있는 신참 웹 개발자라면, 이 글이 도움이 될 것입니다. Ajax의 기본 개념과 3-티어 웹 애플리케이션 시나리오의 정황 속에서의 Ajax의 힘을 이해할 수 있을 것입니다.

Ajax는 오늘날 아키텍트, 개발자, 제품 매니저 및 웹 기반 애플리케이션의 고객들 사이에서 많은 관심을 받고 있는 Web 2.0 기술의 일부이다. Ajax 프로그래밍 기술은 XHTML, JavaScript, CSS, XML Http Request (XHR) 같은 입증된 기술들로 구성되어 있다. Representational State Transfer (REST)와 JavaScript Object Notation (JSON) 같은 대중적인 서비스 액세스와 데이터 교환 기술들은 Ajax 기술에 잘 맞는다. 클라이언트 티어에서 이와 같이 입증된 강점들은 PHP, Python, Ruby 같은 오픈 소스 기술들로 결합되어 Ajax 스토리를 멀티 티어 애플리케이션 개발로 확장할 수 있다. 여기에 데이터 티어에는 MySQL이라고 하는 오픈 소스 데이터베이스의 성공이 추가되었다.

Ajax 프로그래밍 기술과 잘 맞는 다른 것으로는 오픈 소스이며 무료로 다운로드 및 사용할 수 있는 Eclipse 기반 개발 툴들이다. 이들이 함께 결합하여 클라이언트 티어, 미들 티어, 데이터 티어 기술들은 웹 애플리케이션 개발을 시도 및 배울 수 있는 토대를 제공한다. 그런데, 엔드투엔드 Ajax 애플리케이션을 어떻게 개발 및 전개하는가? 세 편의 기술자료 시리즈를 통해서 그 해답을 찾아간다.

전형적인 엔터프라이즈 급의 웹 애플리케이션은 매우 강력한 요소들을 다루고 있다. 선별된 오픈 소스 오퍼링의 핵심 구현 블록에 대해 배운다고 해서, 본 시나리오에서 보안, 확장성, 가용성 같은 엔터프라이즈 수준의 중요한 특징들은 다루지 않을 것이다. 이 글에서 다루는 내용들은 본 시나리오에서 기술된 Ajax 애플리케이션의 특정 클래스에만 적용된다. 특히, 본 시리즈에서는 MySQL 데이터베이스 생성, PHP 런타임 환경에서 미들 티어/데이터베이스 로직 디자인 및 개발, JavaScript를 사용하여 진정한 싱글 페이지 Ajax 클라이언트 인터페이스 생성하는 방법을 설명한다. Eclipse에서 Ajax 애플리케이션을 개발 및 테스트 하고, Firefox (클라이언트 티어), Zend PHP (미들 티어), MySQL (데이터 티어)에 이를 전개하는 단계를 코드 샘플을 통해 설명한다. XHTML, CSS, JavaScript, XHR, DOM, REST, SOAP, JSON, XML, PHP, MySQL, Eclipse를 여러분의 애플리케이션에 통합하는 방법을 통해 오픈 소스 플랫폼에 구현된 많은 기능들을 알 수 있을 것이다. 본 시리즈에서는 애플리케이션 티어들을 완벽히 분리하여 깔끔하고 고급스러운 웹 애플리케이션 디자인을 만드는 방법을 설명한다.

머리말

제목에서 시사하듯, 본 세 편의 시리즈에서는 엔드투엔드 Ajax 스타일의 애플리케이션을 개발하는 핵심 특징들을 설명하고 있다. 다음과 같은 세 가지 애플리케이션 티어들의 특정 기술들에 대해서도 배운다.

• 클라이언트 티어
• 미들 티어
• 데이터 티어

클라이언트 티어에는 XHTML, CSS, JavaScript, XML Http Request (XHR)가 포함되어 있다. 이미 언급된 미들 티어 오픈 소스 기술들 중에서, 본 시리즈에서는 PHP를 사용한다. 단순하고 광범위하게 사용되고 있기 때문이다. MySQL 데이터베이스는 데이터 티어에 사용된다. 게다가, 본 시리즈는 REST, SOAP, JSON, XML 같은 웹 서비스 기술들도 사용한다.

다음 섹션의 단계들을 따라, 엔드투엔드 애플리케이션 개발에 필요한 런타임 및 개발 환경을 설치 및 설정한다. 유용한 Hello World 애플리케이션 대신, 뱅킹 시나리오를 분석 및 파악할 것이다. 이 시나리오에서는 가상의 은행, 이것의 백엔드 데이터베이스, 브라우저 기반 은행 고객 포털, 실제 서드 파티 금융 관련 웹 서비스의 정황 속에서 앞서 언급한 기술 컴포넌트들을 사용하는 방법을 설명할 예정이다.

필요한 소프트웨어 패키지

모든 애플리케이션 티어들로 확장되는 은행 시나리오를 개발 및 전개하려면 그러한 티어들에서 다음을 선택해야 한다.

• 웹 브라우저
• 데이터베이스 서버
• 웹 서버
• 미들 티어 서버
• 미들 티어 코드 개발용 IDE
• 클라이언트 티어 코드 개발용 IDE

모든 레이어에서 사용할 수 있는 많은 오픈 소스 오퍼링 중에서, 본 시리즈에서는 다음을 사용한다.

웹 브라우저: Mozilla Firefox 2.0.0.4 또는 이후 버전. Firefox의 장점은 가용성, 온라인 보안, 수백 개의 애드온 애플리케이션들을 통한 커스터마이징을 들 수 있다. Firefox의 브라우저 애플리케이션 디버거 애드온인 Firebug도 사용할 수 있다.

데이터베이스 서버: MySQL 5.0.41 또는 이후 버전. 클라이언트/서버 모드와 임베디드 모드에서 작동한다. C와 C++로 작성되었다. Enterprise 서버와 Community 서버 에디션에서 사용할 수 있다. Community 서버는 무료이고 본 글의 은행 시나리오의 필요에도 맞는다.

웹 서버: Apache Web server 2.2.2. 서드 파티 모듈로 설정 및 확장 가능하다.

미들 티어 서버: Zend Core 2.0.1 또는 이후 버전. 이 무료의 오픈 소스 서버는 PHP 5를 지원한다. 강력한 커뮤니티 지원을 받고 있다. Apache 웹 서버가 포함되어 있으며, MySQL, IBM DB2®, Oracle 같은 데이터베이스를 지원한다. Zend Core for IBM은 IBM DB2에 작동하도록 특별히 조정되었다. 그림 1은 Zend Core의 개요도이다.

미들 티어 IDE (Integrated Development Environment): Eclipse PDT 0.7 RC3 또는 이후 버전. PDT는 Eclipse 플랫폼용 PHP Development Tool로서 PHP 애플리케이션 개발에 필요한 모든 개발 컴포넌트를 포함하고 있다. PHP 디버깅은 이 IDE에서도 지원된다. Zend, IBM, 기타 기업들은 이를 오픈 소스에 기여하고 있다.

클라이언트 티어 IDE: Aptana Web IDE 0.2.8.14433 또는 이후 버전. Ajax 브라우저 애플리케이션들을 개발하는 무료의, 오픈 소스, 크로스 플랫폼, JavaScript 중심의 개발 환경이다. JavaScript, HTML, CSS용 코드 지원을 제공한다. JavaScript 디버깅을 지원하고 여러 Ajax 프레임웍들을 위한 빌트인 지원이 포함된다. 무엇보다도, Eclipse 기반이다.

다음 섹션에서는, 엔드투엔드 Ajax 애플리케이션을 개발 및 전개할 수 있도록 이 오픈 소스 패키지들을 설치 및 설정하는 방법을 설명한다. (주: 설치 및 개발 방법은 Microsoft® Windows® operating system 기준이다.)

Mozilla Firefox 설치하기

다음 단계는 Mozilla Firefox의 설치 단계이다.

1. c:\temp\dw-ajax라고 하는 임시 디렉토리를 만들어서, 여기에 다양한 소프트웨어 패키지들을 위한 설치 파일들을 저장한다.
2. 아래 참고자료 섹션을 참조하여 Mozilla URL에서 Mozilla Firefox 2.0.0.4 또는 이후 버전을 다운로드 하여 이것을 c:\temp\dw-ajax에 저장한다.
3. 다운로드 한 파일을 실행하여 Mozilla Firefox 2.0.0.4를 설치한다.
1. Mozilla 설치 마법사에서 Next를 클릭한다.
2. 라이센스 동의를 수락하고 Next를 클릭한다.
3. Custom을 선택하고 Next를 클릭한다.
4. DOM Inspector와 Quality Feedback Agent 옵션들이 모두 선택되었는지 확인하고 Next를 클릭한다.
5. 기본 설치 폴더를 수락하고 Next를 클릭한다.
6. 처음 두 개의 옵션들(On my Desktop과 In my Start Menu Programs Folder)이 선택되지 않도록 한다.
7. 설치가 완료되면, Launch Mozilla Firefox now 옵션이 선택되었는지를 확인한다.
8. Finish를 클릭한다.
9. Mozilla Firefox를 기본 브라우저로 하라는 프롬프트에서 Yes를 선택한다.
10. Firefox 브라우저를 시작하고 참고자료 섹션에 나온 Mozilla Firefox URL로 간다.
11. 페이지 위쪽에 있는 Add-ons를 클릭한다.
12. Firefox 웹 사이트의 검색 바에서 Firebug를 입력하고 Search를 클릭한다.
13. 검색 결과에서 Firebug를 클릭한다.
14. Install now를 클릭한다. 팝업 박스에서, Install now를 클릭한다.
15. Restart Firefox를 클릭한다.
16. Firefox에서, Tools->Firebug->Open Firebug를 클릭한다.
17. 브라우저 윈도우 밑에 Firebug 실행 불가를 나타내는 메시지를 보면 Enable Firebug를 클릭한다.
18. Firefox 브라우저를 닫는다.

MySQL 설치하기

다음 단계를 수행하여 MySQL 데이터베이스 서버를 설치한다.

1. 참고자료 섹션에서 MySQL URL로 간다.
2. MySQL Community Server를 클릭한다. (클릭하면 권장 GA 버전으로 바로 간다.)
3. 5.0.41 또는 이후 버전용 Windows (x86) Zip/Setup.EXE를 다운로드 하고 이를 c:\temp\dw-ajax 디렉토리에 저장한다. (.zip 파일에는 단 한 개의 파일만 포함되어 있는데, 이는 MySQL용 설치 파일이다.)
4. .zip 파일에서 MySQL 설치 파일을 추출하고 이를 c:\temp\dw-ajax 디렉토리에 저장한다.
5. 4단계에서 추출한 실행 파일(Setup.exe)을 실행한다.
1. Next를 클릭한다.
2. 설정 유형을 Complete으로 선택하고 Next를 클릭한다.
3. Install을 클릭한다.
4. Skip Sign-Up을 선택하고 Next를 클릭한다.
5. Configure the MySQL Server now가 선택되었는지를 확인하고 Finish를 클릭한다. MySQL Server Instance Configuration Wizard가 열린다.
6. Next를 클릭한다.
7. Detailed Configuration을 선택하고 Next를 클릭한다.
8. Developer Machine을 선택하고 Next를 클릭한다.
9. Select Multifunctional Database를 선택하고 Next를 클릭한다.
10. InnoDB Tablespace Settings에서, 기본 옵션을 수락하고 Next를 클릭한다.
11. Decision Support (DSS)/OLAP를 선택하고 Next를 클릭한다.
12. Enable TCP/IP Networking과 Enable Strict Mode 옵션이 선택되었는지를 확인하고 Next를 클릭한다.
13. Standard Character Set를 선택하고 Next를 클릭한다.
14. Install As Windows Service와 Include Bin Directory in Windows PATH 옵션이 선택되었는지를 확인하고 Next를 클릭한다.
15. 새로운 루트 패스워드로 webtech를 입력하고 Next를 클릭한다.
16. Execute를 클릭한다.
17. Finish를 클릭한다.

Apache 웹 서버와 Zend Core PHP 서버 설치하기

Zend Technologies Ltd.는 Zend Core를 무료로 제공한다. 여기에는 Apache 웹 서버가 포함되어 있다. 다음 단계를 따라서 Apache 웹 서버와 Zend Core PHP 서버를 설치한다.

Zend Core를 무료로 다운로드 하려면, Zend 웹 사이트에 등록해야 한다. 아직 등록하지 않았다면 Zend Core URL(참고자료)로 가서 등록하기 바란다.

1. Zend 웹 사이트에 등록되면, 참고자료 섹션에 나온 Zend Core URL로 가서 로그인 하여 다운로드 부분으로 간다.
2. Agree to EULA 체크 박스를 선택하고 Submit을 클릭한다.
3. Zend Core Generic 섹션에서, Zend Core Windows x86 (Version v2.0.1 또는 이후 버전)을 다운로드 하고 c:\temp\dw-ajax 디렉토리에 .zip 파일을 저장한다. (.zip 파일에는 Zend Core용 설치 파일만 있다.)
4. .zip 파일에서 Zend Core 설치 파일을 추출하고 이를 c:\temp\dw-ajax 디렉토리에 저장한다.
5. ZendCore-v2.0.1-Windows-x86.exe 또는 이후 버전을 실행한다.
1. Next를 클릭한다.
2. 라이센스 동의를 수락하고 Next를 클릭한다.
3. 설정 유형으로 Complete를 선택하고 Next를 클릭한다.
4. Skip Sign-Up을 선택하고 Next를 클릭한다.
5. 기본 위치를 수락하고 Next를 클릭한다.
6. Install bundled Apache 2.2.2를 선택하고 Next를 클릭한다.
7. 기본 포트80을 선택하고 Next를 클릭한다.
8. 기본 확장 제휴를 수락하고 Next를 클릭한다.
9. 관리 콘솔 패스워드를 webtech로 입력하고 Next를 클릭한다.
10. Zend Network Registration이 No로 설정되었는지를 확인하고 Next를 클릭한다.
11. Install을 클릭하여 설치를 시작하고 Zend Core가 완전히 설치될 때까지 기다린다. Zend Core 파일을 복사한 후에, 인스톨러는 Microsoft Visual C++ 의 재배포 가능 버전을 설치한다. 이후에 Zend Core 설치 프로그램은 Zend Core Administration URL의 메시지 다이얼로그를 디스플레이 함으로써 Zend Core 설치 프로그램을 종료한다.
12. OK를 클릭하고 메시지 다이얼로그를 닫는다.
13. Finish를 클릭하여 설치 완료 다이얼로그를 닫는다.
14. c:\Program Files\Zend\Apache2\bin 디렉토리로 가서 ApacheMonitor 프로그램을 더블 클릭한다. Apache Monitor가 트레이 아이콘 모양으로 태스크 바에 나타난다. 이 트레이 아이콘을 사용하여 Apache와 Zend 서버를 시작 및 중지한다.
6. Zend Core를 설정하기:
1. Windows Start Menu에서, Programs->Zend Core->Zend Core Administration Console을 선택한다.
2. 패스워드 webtech를 입력한다.
3. Configuration 탭(그림 2)을 클릭한다.
4. Extensions 탭을 클릭한다.
5. curl - cURL을 리스트에 배치하고 Enable/Disable 바의 빨간색 원 위를 클릭하여 빨간색 원이 녹색이 되게 한다.
6. 리스트에 mysqli - MySQL improved를 배치하고, enable/disable 바 위의 빨간색 원 위를 클릭하여 녹색이 되게 한다.
7. 페이지의 우측 상단 코너에 Save Settings를 클릭한다.
8. Logout을 클릭한다.
7. 태스크 바의 Apache 트레이 아이콘을 클릭하고 Apache2 HTTP Server->Restart를 선택한다.

Eclipse의 PHP Development Tool (PDT) 설치하기

이 글을 쓰고 있는 현재, PDT가 유일한 릴리스 후보이고, 아직은 Eclipse 플랫폼을 위해 완벽히 릴리스 된 플러그인은 아니다. 다음 단계들을 통해 Eclipse PDT를 설치 및 설정한다. (PDT는 Eclipse와 Zend 웹 사이트에서 사용할 수 있다. Zend 웹 사이트는 Zend용 PHP 디버깅 툴이 추가되었고 Eclipse 웹 사이트와 같은 버전을 제공한다.)

1. zend.com의 Eclipse PDT 다운로드 페이지로 간다. (참고자료)
1. Version 0.7 RC3 또는 이후 버전을 다운로드 하고 c:\temp\dw-ajax 디렉토리에 .zip 파일을 저장한다. (예: pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zip 또는 이후 버전.)
2. pdt-0.7.0.S20070401-RC3외 다른 PDT 버전을 설치한다면, 아래 명령을 따라 정확한 버전으로 바꾸고 Listing 1의 Zend 디버거 디렉토리 이름도 바꾼다.
2. Eclipse PDT Zip 파일을 c:\ (예: unzip.exe pdt-0.7.0.S20070401-RC3_debugger-0.1.7-all-in-one-win32.zip -d c:\에 압축을 푼다. c:\eclipse 라고 하는 디렉토리에 파일이 생긴다.)
3. Eclipse 워크스페이스 디렉토리를 만든다. (예: md c:\eclipse\workspace).
4. MySQL 라이브러리로 PDT를 설정한다:
1. MySQL PHP 커넥터 웹 사이트로 간다. (참고자료)
2. mysqli 확장 (PHP 5.2.0)용 링크를 클릭한다.
3. .zip 파일을 다운로드 하고(예: php_5.2.0_mysqli_5.0.27-win32.zip) c:\temp\dw-ajax 디렉토리에 저장한다.
5. c:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5 디렉토리 (Unzip.exe php_5.2.0_mysqli_5.0.27-win32.zip -d C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5)에 .zip 파일의 압축을 푼다.
6. C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5\php.ini 파일을 편집하고 이 파일의 내용을 Listing 1의 내용으로 대체한다. 다음과 같이 변경하고 파일을 저장한다:
1. php.ini 파일의 내용을 대체한 후에, [Zend] 섹션 아래의 처음 두 개의 라인들을 합병한다: extension_dir=C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5
2. 필요할 경우, 이것을 정확한 Zend 디버거 디렉토리 이름으로 수정한다.
7. c:\eclipse 디렉토리로 전환하고 eclipse.exe를 입력하여 Eclipse를 시작한다.
8. Workspace Launcher 다이얼로그 박스에서, 워크스페이스를 c:\eclipse\workspace로 바꾸고 OK를 클릭한다.
9. Eclipse IDE의 Welcome 탭을 닫는다.
10. Eclipse IDE에서 Window->Open Perspective->Other를 선택하고, PHP를 선택하고 OK를 클릭한다.
11. IDE의 왼쪽 하단 프레임에서, PHP Functions 뷰를 선택한다. 빌트인 PHP 라이브러리 함수 리스트가 보이는지를 확인한다.
12. Eclipse에서, Window->Preferences를 클릭한다.
1. 확장하여 PHP->Debug를 선택한다.
2. Break at First Line 체크 박스를 선택하고 Apply를 클릭한다.
3. 같은 PHP Debug 페이지에서, Debug Options 섹션에 나타나는 PHP Servers ...를 선택한다.
4. 리스트에서, Default PHP Web Server를 선택하고 Edit을 클릭한다.
5. Publish Projects to this Server 체크 박스를 선택한다.
6. Directory 필드에서, c:\Program Files\Zend\Apache2\htdocs를 검색하고 OK를 클릭한다. (그림 3.)
7. OK를 클릭한다.
8. OK를 클릭하고 Preferences 다이얼로그를 닫는다.
13. Window->Web Browser->Firefox를 선택한다.

                



; Remember to merge the first two lines below the [Zend] section



; to appear in one line.



; Otherwise, Eclipse PDT (PHP Development Tool) will not work properly.



; If needed, modify it with the correct Zend debugger directory name



; as in your Eclipse installation.







[Zend]



extension_dir=



  C:\eclipse\plugins\org.zend.php.debug.debugger.win32.x86_0.1.7\resources\php5



include_path="."



extension=php_mysqli.dll



zend_extension_ts=.\ZendDebugger.dll



zend_debugger.allow_tunnel=127.0.0.1/32



zend_debugger.allow_hosts=127.0.0.1/32



zend_debugger.expose_remotely=always



	      

Aptana 웹 IDE 설치하기

Aptana 웹 IDE 설치는 플러그인을 앞서 설치했던 Eclipse PDT에 추가하는 것과 다름 아니다. 이 글을 쓰는 현재, Aptana Web IDE 버전은 0.2.8.14433이다. 다음 단계를 따라, 최신 버전의 Ajax 개발용 Aptana Web IDE를 설치한다.

1. Eclipse의 Help 메뉴에서 Software Updates->Find and Install...를 선택하여 Install/Update 팝업 창을 연다.
1. Install/Update 팝업 창에서, Search for new features to install 옵션을 선택하고 Next를 클릭한다.
2. 업데이트를 검사할 새로운 원격 사이트를 설정하려면, New Remote Site... 버튼을 클릭하여 New Update Site 팝업 창을 연다.
3. New Update Site 팝업 창에서, Site Name 텍스트 박스에서 Aptana를 입력한다.
4. URL 텍스트 박스에서, Aptana 업데이트 사이트 URL: http://update.aptana.com/install/3.2/로 가고 OK를 클릭한다.
5. Finish를 클릭하여 Updates 창을 연다.
6. Update 창에서, Aptana update 체크 박스를 선택하고 Next를 클릭한다.
7. 옵션을 선택하여 라이센스 동의 조건을 수락하고 Next를 클릭한다.
8. Finish를 클릭한다.
9. Feature Verification 다이얼로그 박스가 뜨면 Install All을 선택한다.
10. Eclipse를 재시작 하라는 프롬프트에서, Yes를 클릭하여 재시작 한다.
2. Eclipse IDE에서, Window->Open Perspective->Other를 선택하고 OK를 클릭한다. Aptana 퍼스펙티브가 활성화 되면 설치는 성공한 것이다.

지금까지 모든 것이 실행된다면, XHTML, JavaScript, XHR, PHP, MySQL 코드 같은 은행 시나리오 애플리케이션 생성물들을 개발, 테스트, 디버깅 할 때 사용할 수 있는 Eclipse IDE가 생긴 것이다. 여러분의 Eclipse IDE는 Zend Core PHP 서버에서 작동하도록 설정된다. Eclipse와 Zend Core의 동적인 결합은 모든 Ajax 개발과 전개의 필요를 채운다. 이제, 이러한 강력한 환경에서의 개발 및 전개 시나리오를 살펴보도록 하자.

Ajax-PHP 기반 시나리오

그림 4는 Ajax-PHP 환경에서 뱅킹 관련 함수들을 제공하는 시나리오를 묘사하고 있다. 이 시나리오에서는 일부 기술 컴포넌트를 소개하고 다음과 같은 세 개의 티어로 확장함으로써 전통적인 아키텍처 스타일을 따른다.

• 클라이언트 티어
• 미들 티어
• 데이터 티어

클라이언트 티어에서, 이 시나리오는 싱글 페이지 XHTML 사용자 인터페이스 엘리먼트와 XHR과 JSON을 통해 실행되는 브라우저 기반 컨트롤을 사용한다. 미들 티어에서, SimpleXML, Services_JSON, HTTP 요청 프로세서, PHP SOAP 클라이언트 같은 PHP 기술을 사용한다. 데이터 티어에서, SQL과 ODBC를 사용한다.

본 시나리오는 적용된 기술 컴포넌트에 따라 나뉠 수도 있다.

• 브라우저
• PHP 서버
• PHP 웹 서비스 클라이언트
• 데이터베이스 서버
• 인터넷에 호스팅 된 .NET 기반 서드 파티 웹 서비스

여러분도 보듯, 본 시나리오는 기본적이고 중요한 Ajax 측면을 만족시키고 있다. 많은 기술 솔루션들 중에서, 여러분의 잠재성을 확대화 하는 특정 구현 방식을 선택하게 될 것이다. 전체적인 디자인 목표는 클라이언트 티어에 불필요한 플래시 스크린들을 제공하여 시나리오를 복잡하게 하지 않는 것이다. Eclipse IDE (PDT와 Aptana)와 Zend Core의 콘텍스트 내에 다양한 시나리오 생성물들의 개발과 전개에 개입된 상세를 더욱 쉽게 이해하기 쉽도록 조치를 취했다. 게다가, 본 시나리오는 인터넷에 호스팅 된 .NET 기반의 실제 웹 서비스에 대한 PHP 웹 서비스 클라이언트를 포함시킴으로써 상호 운용성을 드러낸다. 앞서 언급했듯이, 선택된 오픈 소스 오퍼링의 핵심 구현 블록에 초점을 맞추기 위해서, 본 시나리오에서는 보안, 확장성, 가용성 부분은 다루지 않는다. 이 부분은 따로 시간을 내서 스스로 공부하기 바란다.

시나리오 상세

그림 4를 참고로 하여 다음 섹션에서는 시나리오 상세를 설명하도록 하겠다. 본 시나리오는 Ajax와 PHP 환경에서 구현된 일반적으로 사용되는 은행 출납 기능의 구현에 초점을 맞춘다. 본 섹션에서는 본 시나리오의 다양한 모듈들을 분석한다.

은행 데이터 (MySQL) - 데이터

은행의 고객 관련 정보는 데이터베이스 테이블에 저장된다. 이 테이블을 MySQL 데이터베이스에 만들 것이다. 크기는 작지만 강력한 커뮤니티 에디션 서버이다. 모든 고객 데이터는 데이터베이스 테이블에 한번에 배치될 것이다. 이후에, 저장된 고객 데이터는 Zend Core에서 제공하는 ODBC 드라이버를 통해 검색 및 업데이트 될 수 있다. 읽기 또는 쓰기 같은 데이터베이스 액세스 유형은 은행 출납 기능의 특성에 기반하여 결정된다.

은행 로직 함수(PHP 코드) - 모델

은행 출납 기능을 제공하는데 필요한 핵심 은행 로직에 대해 생각해 보자. 이 시나리오에서 다음과 같은 은행 텔러 함수들을 지원해야 한다.

• 은행의 모든 고객에 대한 계좌 정보를 가져온다.
• 특정 계좌에 돈을 예금한다.
• 특정 계좌에서 돈을 빌린다.
• 특정 계좌용 통합 포트폴리오 리포트를 가져온다.

이러한 네 개의 함수들은 데이터베이스로 액세스해야 하므로, 필수 데이터베이스 함수를 제공하기 위한 PHP 파일이 생성된다. 미들 티어 로직의 나머지로부터 데이터베이스 함수들의 캡슐화가 가능하다. 이러한 방식으로 핵심 은행 출납 함수들을 노출함으로써, 이러한 함수들의 모든 콜러에 대해 공통 방식으로 데이터베이스 결과를 압축할 수 있다. PHP 제휴 어레이(associative array)는 핵심 은행 로직의 결과를 제공한다.

은행 포털 사용자 인터페이스(Ajax) - 뷰

은행 출납용 사용자 인터페이스를 제공하여 네 개의 핵심 함수를 실행한다. PHP 코드로 캡슐화 된 핵심 은행 로직은 Thick 또는 Thin 클라이언트를 통해 액세스 될 수 있다. 이 시나리오는 은행 출납원을 위한 단일 페이지 기반 Ajax 브라우저 사용자 인터페이스를 개발하는 부분을 다룬다.

PHP가 미들 티어에 사용될 때, PHP 코드가 필수 XHTML, CSS, JavaScript 결과를 만들어 내는 것이 일반적이다. 이 시나리오에서, 우리는 PHP 코드가 어떤 클라이언트 사용자 인터페이스 코드도 만들지 않도록 할 것이다. 다시 말해서, Bank Portal과 관련된 모든 코드는 클라이언트 시작 동안에만 제공될 것이다. 여러분은 XHTML과 CSS로 모든 사용자 인터페이스 엘리먼트를, JavaScript로 클라이언트 측 로직을 코딩 할 것이다. 이러한 모든 생성물들(XHTML, CSS, JavaScript)에는 은행 시나리오의 Bank Portal 요구 사항을 만족시키는데 필요한 모든 사용자 인터페이스 엘리먼트가 포함된다. Apache 웹 서버는 클라이언트 사용자 인터페이스 관련 콘텐트를 브라우저에 단 한번 제공해야 한다. 브라우저로의 단 한번의 코드 전달은 은행 출납원이 이 애플리케이션용 URL을 방문할 때 수행된다. 이렇게 되면, Bank Portal 클라이언트는 XHTML, CSS, JavaScript 같은 프리젠테이션 콘텐트용이 아닌 데이터 교환 전용 서버로 연결된다.

이것은 클릭하고 기다리는(Click and Wait) 패러다임 관행의 시작이다. 여기에서, 브라우저는 미들 티어 서버로 연결하여 모든 사용자 액션에 프리젠테이션 콘텐트를 다운로드 한다. 단일 페이지 기반 Ajax 애플리케이션의 특출한 기능 중 하나는 프리젠테이션 콘텐트의 초기 다운로드에서 나오는 더 이상의 페이지를 수행하지 않는다는 것이다. 이 포인트 뒤에, 단일 페이지 기반 Ajax 클라이언트 애플리케이션은 애플리케이션 스팩의 데이터 교환만을 위해서 미들 티어 서버 로직과 연결한다. 따라서 프리젠테이션 콘텐트를 브라우저에 제공하는 추가 부담 없이 순수하게 비즈니스 로직에만 집중하는 미들 티어 로직이 생긴다. 이러한 방식은 애플리케이션 티어들을 분리하여 깨끗하고 고급스러운 웹 애플리케이션 디자인이라는 결과를 만들어 낸다.

은행 액션 모듈(PHP 코드) - 컨트롤러

은행 출납원에 의해 선택된 은행 액션이 네트워크를 통해서 수행되는 방법을 생각해 보자. 이 시나리오에서, 텔러가 선택한 Bank Actions 명령어와 필요한 인풋 데이터를 PHP 코드 모듈로 보내는데, 이는 브라우저와 PHP 모듈에 있는 핵심 은행 로직 간 중개자로서 작동한다. (이전 섹션 참조) Bank Actions PHP 모듈은 미들 티어에서 REST 스타일의 서비스 함수 호출을 지원하도록 설계된다. Bank Actions PHP 모듈은 Bank teller Action 명령어를 받고 Bank Logic PHP 모듈로의 함수 호출을 실행하여 필요한 결과를 얻는다. Bank Logic 모듈이 리턴되면, Bank Actions 모듈은 JSON 포맷의 데이터로 결과를 브라우저로 보낸다. Bank Actions PHP 모듈은 적절한 Bank Logic 함수를 호출하여 요청을 처리하는 은행 출납 요청을 위한 디스패처(dispatcher)로서 작동한다.

XML 웹 서비스 클라이언트(PHP에서 .NET으로의 SOAP 액세스) - 헬퍼

브로커/중개자가 되는 것 외에도, Bank Actions PHP 모듈은 PHP Web Service SOAP 클라이언트로서 작동하여 해당 고객 포트폴리오에 저장된 현재 주식 시세를 가져온다. 이는 PHP로 웹 서비스 클라이언트를 생성하는 것을 배울 수 있는 좋은 기회이다. 이 시나리오에서, Bank Actions PHP 모듈은 인터넷에서 실행되는 원격의 실제 웹 서비스로 SOAP XML 웹 서비스 호출을 한다. 웹 서비스는 .NET 기반의 웹 서비스로서, 여러분은 PHP의 상호 운용성 기능을 경험할 수 있다. 또한, PHP SimpleXML API를 사용하는 XML 파싱에 대해서도 배울 수 있다.

지금까지, 본 시나리오의 고급 디자인에 대해 살펴보았다. 무엇보다도, 이 은행 시나리오의 핵심 모듈을 개발, 테스트, 통합, 전개하는 부분을 상세하게 배웠다.

주요 시나리오 태스크

본 시리즈의 Parts 2와 Parts 3을 통해서, 다음과 같은 태스크를 수행하여 시나리오를 완성하고, Eclipse IDE에서 이것을 개발하고 Zend Core에 이를 전개하는 수준의 실력을 갖추게 될 것이다.

• Task 1: 은행 고객 계좌를 저장하고 있는 데이터베이스 테이블을 만든다.
• Task 2: 필수 비즈니스 로직과 DB 호출을 수행하는 PHP 코드 모듈을 만든다.
• Task 3: XHTML과 CSS 생성물들을 만들어서 단일 페이지 기반 Ajax 웹 사용자 인터페이스를 제공한다.
• Task 4: 모든 클라이언트 측 로직과 비동기식 통신 로직을 갖게 될 JavaScript 모듈을 만들어서 서버와 데이터 교환을 수행한다.
• Task 5: 원격 주식 시세 웹 서비스용 Web service SOAP 클라이언트 코드를 포함할 PHP 코드 모듈을 만든다.
• Task 6: 다른 두 개의 PHP 파일에서 비즈니스 로직에 대한 프론트엔드 호출에 대한 REST 서비스로서 작동 할 PHP 코드 모듈을 만든다.
• Task 7: 모든 생성물들을 통합하고, 은행 시나리오를 위해 만들었던 Ajax 솔루션을 전개 및 실행한다.

결론

전 세계 수 백만 사용자들은 단순하고 저렴한 혁신적인 웹 플랫폼을 가질 수 있는 기회가 많이 생기고 있다. 특히, 오픈 소스 Eclipse 툴과 Zend Core는 .NET 같은 상용 플랫폼에서 오픈 소스 플랫폼으로의 마이그레이션을 고려 중인 기업에 많은 가능성을 가져다 주었다. 이러한 오퍼링은 기존 상용 인프라스트럭처에 필적하면서도 무료라는 특징이 있다. 본 시리즈 Part 2에서는 Ajax-PHP 개발을 설명한다. 그때까지, Eclipse PDT, Aptana 플러그인, Zend Core 런타임을 공부하라.

참고자료

• Ajax 리소스 센터(developerWorks)에서 Ajax 관련 기술자료와 튜토리얼 보기.
  
  
• PHP 리소스 센터(developerWorks)에서 PHP 관련 기술자료와 튜토리얼 보기.
  
  
• PHP 매뉴얼 웹사이트에서 PHP API 관련 문서 보기.
  
  
• Eclipse PDT project
  
  
• Aptana Web IDE
  
  
• "Ajax: A New Approach to Web Applications" - Jesse James Garrett.
  
  
• Zend Core.
  
  
• W3C Working Draft(XMLHttpRequest)

• 모질라 다운로드 웹사이트에서 모질라 파이어폭스 브라우저 다운로드.
  
  
• MySQL 다운로드 웹사이트에서 MySQL 데이터베이스 서버 다운로드.
  
  
• Zend 다운로드 웹사이트에서 Zend Core 다운로드.
  
  
• Zend PDT 다운로드 웹사이트에서 이클립스 PDT (PHP 개발 툴) 다운로드.
  
  
• MySQL connector 다운로드 웹사이트에서 MySQL PHP 커넥터 다운로드.
  
  

필자소개

		Senthil Nathan은 뉴욕 IBM T.J. Watson Research Center의 소프트웨어 엔지니어이다. 소프트웨어 구현 경력 22년차 이며, 다양한 엔터프라이즈 애플리케이션들을 개발했다. SOA, Web services, Java 2 Platform, Enterprise Edition (J2EE), PHP, Ruby On Rails, Web 2.0, Ajax 개발 등에 관심을 갖고 있다.

기사에 대한 평가

보다 나은 서비스를 제공하기 위함이오니 잠시 짬을 내어 이 양식을 제출하여 주십시오. 귀하께서 원하시는 정보를 얻었습니까? 예 아니오 잘 모르겠음   이 페이지 개선을 위한 의견을 주십시오:   이 정보가 얼마나 유용했습니까? (1 = 전혀 도움이 되지 않음, 5 = 매우 유용함) 1 2 3 4 5

이 문서 북마킹 하기 mar.gar.in naver eolin del.icio.us

위로