Rev. 2.73

오래전에 포스팅하려다가 이제서야 포스팅하게 되는군요. Prototype 버전1.6.x에서 제공되는 것으로 responseJSON을 이용한 JSON수신방법입니다. 아시다시피 Ajax를 이용하여 요청한 결과물을 받아올 때 서버로부터 여러가지 형식으로 응답받을 수 있습니다. HTML이나 자바스크립트 코드를 직접 받아 실행하거나 XML또는 JSON타입 등이 바로 그것입니다. 여기에서 JSON형식으로 자료를 수신하는 경우 responseJSON 프로퍼티를 이용하면 수신된 문자열을 이밸류에이션(evaluation)하거나 XML처럼 노드를 분석하여 변수로 할당하는 작업이 불필요하기 때문에 더욱 간결한 수신구조를 만들수 있게 됩니다. 아래의 예제를 봅시다.

서버-사이드: JSON 생성

{
  id: 1,
  name: 'firejune',
  city: 'seoul',
  contry: 'korea',
  birthday: 199724400000
}

여기에는 중요한 서버단 작업이 있습니다. 응답헤더의 Content-Type을 application/json으로 설정해야 합니다. 왜냐하면 Prototype은 이 해더값을 근거로 responseJSON에 객체를 자동으로 할당하기 때문입니다. php에서 헤더를 설정하는 방법은 아래와 같습니다.

<?php
  header("Content-Type: application/json; charset=utf-8");
?>

클라이언트-사이드: JSON 호출

new Ajax.Request("/lab/person.json.php", {
  onSuccess: function(transport) {
    var person = transport.responseJSON;  
    alert(person.city);
  }, method: "get" 
});

자, alert에는 무엇이 찍힐까요? 직접 확인해 봅시다. 그렇다면, Content-Type이 application/xml(또는 text/xml)인 경우에는 어찌될까요? 당연히 transport.responseXML에 할당되겠죠. JSON타입으로 사용될 때와 비교하기 위해서 위 상황을 XML타입으로 재현 해 보겠습니다.

서버-사이드: XML 생성

<?xml version="1.0" encoding="utf-8" ?>
<person type="object">
  <id type="number" value="1"/>
  <name type="string" value="firejune"/>
  <city type="string" value="seoul"/>
  <contry type="string" value="korea"/>
  <birthday type="number" value="199724400000"/>
</person>

클라이언트-사이드: XML 호출

new Ajax.Request("/lab/person.xml.php", {
  onSuccess: function(transport) {
    var xmlDoc = transport.responseXML.documentElement;
    var person = {};
    // xml to object
    $A(xmlDoc.childNodes).each(function(item) {
      if (item.tagName) person[item.tagName] = item.getAttribute('value');
    });
    alert(person.city);
  }, method: "get" 
});

결과는 동일합니다. 두 방식을 비교해 보면 JSON타입이 여러모로 유용하다는 사실을 알 수 있습니다.

Comments

얼마전 소개했던 프로젝트에 일손이 딸려 인력을 확충키로 했습니다. 주 담당업무는 UI 설계 및 구축, 브라우저 호환 작업 등이 될 것입니다. 서비스 개발 플랫폼은 자바이고 SVN, IDE, Trac 시스템 등의 개발 환경이 갖추어져 있습니다. 코딩 스타일은 서드파티 라이브러리 사용을 권장하고, 간결하면서도 일관적이며 직관적인 UI를 지향하며, 웹표준을 존중하고 첫째도 사용자요, 둘째도 사용자인 UCD(User Centered Design)을 목적으로 합니다.

자신의 일에 자부심과 열정을 가지고 있는 분이라면 모두 환영합니다. 음... 사실 경력자를 모시는지라 자부심과 열정만 있어서는 조금 곤란하고요. Ajax, HTML과 CSS를 껌으로 생각하시는 분이라면 더할나위 없습니다. 조금 더 보태자면, 소스리파지토리(SVN)로 팀웍 해 보신분, MVC 패턴을 잘 이해하시는 분, 웹2.0에 대하여 생각해 본 적이 있는 분, 참여정신이 투철하신 분, 빼어난 미모를 소유하신 분(;), 개인 블로그 또는 홈페이지를 열심히 운영하시는 분, 복사하기 붙여넣기 보다 타이핑이 빠르다고 생각하시는 분, 자신의 생각을 자신있게 말할 수 있는 분, 쪽팔리지 않을 정도의 영어실력을 소지하신 분, 이미지 클리핑(포토샵) 능숙한 분, 게임 이나 사진촬영 좋아하시는 분 그리고 무엇 보다도 Ajax사이트 구축 및 UI 컴포넌트 개발 경력이 있으신 분을 우대합니다.

지원 방법은 이력서와 개발경력서를 이메일에 첨부하여 to[골뱅이]firejune[닷]com으로 날려주시면 됩니다. 1차 서류심사, 2차 기술면접, 3차 연봉협상 절차를 통해 이루어집니다. 이런, 너무 장황하게 늘어놨군요. 관심있으신 분은 너무 부담가지지 마시고 가벼운 마음으로 지원해 주세요~

Comments

cloud_logo_large_0.png

웹기반 서비스들이 날로 발전하면서 웹 개발 환경 역시 진화하고 있습니다. 근래(5월) 발표한 앱테나 클라우드(Aptana Cloud)는 개발과정을 더욱 간소화하여 시간과 비용을 절약할 수 있는 웹개발 솔루션입니다. 스크린케스트를 보고 놀라지 않을 수 없었는데요. 이 서비스는 IDE와 맞물린 웹호스팅의 크라우드화로 볼 수 있겠습니다. 앱테나 클라우드의 특징들을 보면, 최대 8개의 독립적으로 실생되는 Apache, MySQL, PHP 플랫폼 위에 Aptana Jaxer루비 온 레일스(추가예정) 개발환경이 갖추어진 호스팅 서비스를 지원하며, 프로젝트 파일관리와 DB 탐색기, 시스템 상태 알림 장치, 구글 Analytics, 원클릭 백업, 통계 및 로그 모니터 등 원격 프로젝트 관리환경 그리고 팀간 협업 시스템을 제공합니다. 정말 놀라운 것은 온라인 프로젝트 싱크(SmartSync)를 통해 SVN 리파지토리 서비스를 통합 제공하여 클라우드 IDE를 가능케 합니다. 앱테나는 서버 호스팅으로까지 사업을 확장하려는 음모를 꾸미고 있는 것입니다. 아무레도 그들이 만든 Jaxer 서버의 보급율을 가속화시키고자 웹 호스팅 시장에 직접 뛰어든 것으로 생각됩니다.

attachment
변경된 앱테나 웰컴 페이지

베타 서비스 기간동안은 공짜로 사용해 볼 수 있어서 직접 사용해 보기로 했습니다. 우선 클라우드 기능이 포함되어있는 앱테나 베타버전으로 업데이트 해야합니다. 아쉽게도 앱테나의 베타버전은 정품(라이센스가 있는) 사용자만 다운로드할 수 있습니다. 업데이트를 마치면 클라우드 서비스가 포함된 웰컴페이지를 볼 수 있습니다. 위 화면은 DAM이라는 이름의 프로젝트를 클라우드하는 과정을 담고 있는데요. 애플 스타일의 위저드 팝업에서 진행되는 클라우드 생성 과정 중에 결제화면이 나타나는데 이 때 실제 자신의 신용카드 정보를 입력하지 않아야 하며, 경고 표시줄에 명시되어있는 임의의 신용카드 번호를 사용하여 가상으로 결제를 마칠 수 있습니다. 파일 싱크를 마친 후 자체 제공하는 phpMyAdmin을 통해 DB를 물려 무사히 성공할 수 있었습니다.

독립된 프로세스가 할당된 Apache, MySQL 등의 서버 제공과 동시에 각종 관리도구와 연계하한 플러그인, 모듈들의 설치를 자동화 및 온라인화하고, 호스팅과 함께 소스 리파지토리까지 제공하는 매우 품격높은 호스팅 서비스는 높이 살만하지만, 응답속도가 매우 느리다는 점, 호스팅 서버의 파일 시스템이 한글을 지원하지 못하는 점, 그리고 파일 수가 많은 경우 SmartSync가 지나치게 버벅된다는 점은 시급히 해결해야 할 과제로 보입니다. 서버 세팅을 일일이 사람이하는 한국의 실정과는 매우 상반된 모습이군요. 앞으로 지향해야할 차세대 웹 호스팅 서비스인듯한 인상을 받았습니다.

Comments