한빛출판네트워크

제공 : 한빛 네트워크
저자 : Bill Lubanovic
역자 : 유일호
원문 : Migrating Web-Based PHP Applications to Ajax

[이전 기사 보기]
웹 기반 PHP 애플리케이션을 Ajax로 마이그레이션 하기(2)
웹 기반 PHP 애플리케이션을 Ajax로 마이그레이션 하기(1)

버전 3: Ajax 서브밋, JSON 리턴

이번 방법에서는, PHP가 데이터베이스 쿼리로부터 데이터 배열을 구성하고, JavaScript에게 JSON 포맷으로 돌려준다. jQuery 는 이 JSON 스트링을 jQuery 오브젝트로 변환해서 콜백 함수로 전달한다. 콜백 함수는 옵션들(options)을 위한 HTML을 구성하고 적당한 페이지 엘리먼트에 집어넣는다. 이 예제는 people3.js 가 포함된다는 것을 제외하면 people2.html 과 동일하다.:

people3.html:






People







First Name
Last Name
Dance
Pie



 
 
 
 

우리는 다른 방식으로 컨테이너를 채울 것이다. 이 버전에서는 getJSON에 세가지 인자를 주어 호출한다.:

• URL
• name:value 쌍 사전
• JavaScript 콜백 함수

GET URL은 URL과 name:value 인자로부터 만들어 질것이다. 그리고 반환된 JSON 스트링은 JavaScript 오브젝트로 변환 될 것이고, 콜백 함수로 넘겨질 것이다.

people3.js:
 $(document).ready
        (
        function()
                {
	// DOM이 사용가능일 때 이것을 호출한다:
                $.getJSON("people3.php",
                        { cmd : "init" },
                        make_menu);
	// 사람이 선택되면 이것을 호출한다:
                $("#people").change(function()
                        {
                        var user_id = $(":selected").val();
                        $.getJSON("people3.php",
                                { cmd : "info", id: user_id  },
                                make_info);
                        });
                }
        );
function make_menu(obj)
        {
        var str = "";
        var len = obj.length;
        str += "(select a person)n";
        for (var i = 0; i < len; i++)
                {
                var user = obj[i];
                str += "" +
                        user["fname"] + " " +
                        user["lname"] + "n";
                }
        $("#people").html(str);
        }
function make_info(info)
        {
        var str = "";
	// info.name 혹은 info[“name”]으로 값을 얻을 수 있다
	// 첫번째 방법으로 이름을 얻어보자.
        str += "" + info.fname + "";
        str += "" + info["lname"] + "";
        str += "" + info["dance"] + "";
        str += "" + info["pie"] + "";
        str += "n";
        $("#info").html(str);
        }

이번 버전의 PHP 스크립트는 people2.php보다 더욱 더 간단하다. 데이터베이스 리턴 값으로부터 HTML만드는 대신에 PHP 데이터 배열을 JSON 포맷형식으로 만들어서 내보낸다.:

people3.php:

json_encode 함수는 PHP 5.2버전부터 정식으로 지원하고 있다. 그 이전 버전은 PHP JSON 매뉴얼 섹션을 참고하기 바란다. 만약에 당신이 우리의 친구인 Alfredo를 메뉴에서 골랐다면 다음과 같은 JSON 데이터가 리턴 됐을 것이다.:

{"id":"1","fname":"Alfredo","lname":"de Darc","dance":"tango","pie":"blueberry"}

JSON 스트링은 jQuery에 의해 JavaScript 오브젝트로 변환되고, info 인자와 함께 make_menu 함수로 넘겨진다.

개선의 평가

이 새로운 버전들에서 주요한 선택은 어디에서 결과물을 만들어내냐는 것이다: PHP(버전2) 또는 JavaScript(버전3). 다른 주된 요인은 데이터에 대해서 어떤 목적을 가지고 있는가 일 것이다. 버전3에서는 HTML을 만든 후에 info 로 던지는 대신에, 그것을 JavaScript의 전역변수에 두고서 나중에 다른 용도로 사용할 수 있었다.

이 새로운 버전들이 오리지널보다 나아 보이나요? 우리들이 약속했던 것들이 지켜졌는지 한번 살펴 보도록 하자:

정적인 내용으로부터 동적인 내용을 분리한다.
모든 정적인 내용은 HTML 파일 안에 있다. 그리고 PHP로부터 받은 동적인 데이터는 페이지 분배를 위해 JavaScript에서 처리 된다.

내용과, 스타일, 그리고 처리부분을 분리한다.
여기서 보여주지 못했지만, 개별적인 CSS 파일은 직접적으로 좋은 추가일 것이다.

함수 호출을 통한 클라이언트-서버 통신
Ajax

빠른 페이지 리로드 대신에 부분적인 패이지 업데이트
다시 Ajax

빠른 개발과 유지하기 쉬운 코드
이제 PHP는 데이터베이스로부터 데이터를 가져오면 되고 전체페이지 대신 부분적인 결과물(HTML or JSON)을 돌려준다.

빠른 로드 타임과 향상된 캐싱
people2.html, people2.js, people3.html, 과 people3.js 은 정적인 파일이며, 브라우저에 의해 캐쉬가 될 것이다(웹 서버측도, 애플리케이션을 좀더 가변적으로 만들 수 있을 것이다.). 전체 결과 페이지 또한 캐쉬가 된다. 오직 브라우저 내부의 JavaScript에 의해 바뀐 부분들이 나타날 것이다. 마지막으로, 우리는 people2.php 나 people3.php 의 뒤에 이어지는 모든 호출의 데이터베이스 탐색을 피하였다.

가장 중요한 이득은 이 새로운 접근법은 새로운 사람을 더하거나 이미 존재하는 사람의 데이터를 수정 하는 것과 같은 앞으로의 요구사항들에 따라 훨씬 더 확장될 것이라는 것이다. 그리고 그러한 새로운 요구사항들은 반드시 발생 할 것이다.

---

Bill Lubanovic는 70년대부터 소프트웨어 개발을 시작했고, 80년대에는 GUI, 그리고 90년대에는 웹 개발을 시작했다. 지금은 wind energy社에서 웹 시각화와 관련된 일을 하고 있다.

---

역자 유일호님은 현재 어느 중소기업의 소프트웨어 엔지니어로 근무하고 있으며, 잡다한 스킬덕에 여러 가지 개발관련 일을 맡아서 하고 있습니다. 이 기사를 번역하는 시점에는 Ajax를 이용한 프로젝트를 맡아서 진행하고 있습니다.