angular.js + node.js + express 로 JSONP 구현을 해보았다.

크로스도메인 문제(다른 사이트의 ajax를 호출할 수 없는 브라우저의 보안정책)를 피하기 위해 JSONP라는 대안이 있는데
angular를 이용해 간단하게 목록을 가져오는 외부 호출을 만들어보자.
http://docs.angularjs.org/api/ng.$http#jsonp
내용을 보고 참조하였다.

index.html
<!DOCTYPE html>
<html ng-app>
<head>
    <title></title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.1/angular.min.js"></script>
    <script type="text/javascript" src="todo.js"></script>
</head>
<body>
<div>
    <div ng-controller="listController">
        <ul>
            <li ng-repeat="list in lists">
                {{list.author}}
            </li>
        </ul>
    </div>
</div>
</body>
</html>

ng-app 을 설정하고 listController 에 lists 객체로부터 author 목록을 가져오게 하자.

todo.js

listController = function($scope,$http) {
    angular.extend($scope,{
        query:function() {
            $http.jsonp('http://jsbin.com/uqamef/1?callback=JSON_CALLBACK&a=bbb').success(function(data){
                $scope.lists=data;
            })
        }
    });
    $scope.query();
}

listController 에 데이터 바인딩을 위한 $scope와 ajax 호출을 위한 $http를 각각 인자로 두고
jsonp 호출 후 성공시 $scope.lists 에 결과값을 넣도록 한다.
URL은 해당 JSONP를 구현한 API URL과 "?callback=JSON_CALLBACK" 부분(중요!)
그리고 파라메터 값인 "&key=value..." 형태로 구성하여 $http.jsonp 메서드로 호출한다.

서버쪽은 오히려 간단한데
jsbin.com 같은 걸 이용해서 구현하면
html 쪽은 지우고 javascript 쪽에만 jsonp 형태의 데이터를 기술하여
http://jsbin.com/uqamef/1 처럼 테스트 데이터를 만들어 볼 수 있으며

실제 구현은 단지 res.json으로 결과를 던지면 된다.

... 전략 ...
app.get("/jsonp", function(req,res) {
  console.log(req.query.callback);
  console.dir(req.param("parameter name"));
  var result = [
    {"author":"spectrum"},
    {"author":"singajong"}
  ];
  res.json(result);
});
... 후략 ...

근데 요즘은 JSONP 잘 쓰나? 크록포드옹이 'Bad thing' 이라고도 말하기도 했고
실제로 펑션이 와리가리 하는 형태라서 보안문제도 있는데 말이지.

* 사족: 만일 express 3.0 이전버전을 사용한다면 JSONP형식이 아니라 JSON형식으로 나올 수 있다. 아래와 같이 app.configure 블록에 jsonp callback 을 사용한다고 명시하자


app.configure(function(){
  app.set("jsonp callback", true);
 ...
});