banana like sunshine RSS FEED

Laravel과 angularjs를 같이 이용하려고 하다 보니.. laravel의 template engine인 Blade와 angularjs 모두 이 double curly braces를 이용하는 문제가 있네요. ㅋㅋ

이럴 때에는 blade의 template에서 angularjs의 {{ }} 를 이용할 때 앞에 @를 붙여주면 간단히 해결됩니다. 아래처럼 말이지요.

@{{ 앞에 @가 있으면 blade가 치환을 안합니다  }}

데이터를 post 방식으로 php server로 보낼 때, 각 요소들을 파싱해서 application/x-www-form-urlencoded 방식으로 보낼 수도 있고, 아니면 application/json 방식으로 보낼 수 있습니다.

angularJS에서는 아래와 같이 보냅니다 :

        $http({
            method: "post",
            url: apiUrl,
            data: JSON.stringify(data),
            headers: {'Content-Type': 'application/json'}
        }).success( function(rtnData){
           //
        });

그리고 서버의 php script에서는 간단하게 다음과 같이 받습니다:

$foo = file_get_contents("php://input");

var_dump(json_decode($foo, true));

Ionicbox

1. vagrant 설치

2. Virtual Box 설치

Virtual Box는 Oracle에서 제공하고 있는 일종의 가상화 머신입니다. 

Mac OS X에 window 설치하고 Linux 설치하고 등등을 가능하게 해주는데, 여기에서는 개발환경을 일정하게 만들어서 외부 영향을 받지 않는 독립적이고 일정한 환경을 제공하기 위해 이용하고 있습니다.

다운로드는 https://www.virtualbox.org/wiki/Downloads 에서 받으시면 됩니다 :

설치도 간단합니다. 나중에 제 컴에 다른 OS 깔아야겠네요. bootcamp 다 좋은데 리부팅하기 귀찮았었는데.. ㅋㅋ

3.vagrant up

그 다음은 이제 본격적인 설치입니다.

github에서 https://github.com/driftyco/ionic-box 파일을 다운받아서 압축 해제한 후에 해당 폴더에서 터미널을 열고 다음 명령을 실행해줍니다. 

 vagrant up

처음 실행하면 이미지(?)를 다운받아와서 설치해야 해서 시간이 좀 걸립니다. 저는 한 5분 정도 걸리는 것 같습니다.

Ubuntu를 설치하네요. 설치 후에도 자잘한 파일들을 계속 받고 있습니다. 5분은 취소입니다. :-) 

커피 한잔 다 마셔도 안끝나고 있군요. 

4. vagrant ssh

이제 설치가 완료되었으니 가상박스에 한번 접속해 보도록 하겠습니다. 터미널에서 다음을 실행합니다 :

오. 이럴 수가. 대단합니다. @.@

시범삼아 ionic 앱 템플릿을 만들고 build까지 해보았습니다. 한번에 술술 되니 이상하군요. ㅋㅋ

새벽이라 여기까지만 해봐야겠네요.

ionic 에서 얘기하는 요지는, 하이브리드 앱 개발에서 가장 큰 걸림돌은 개발 환경을 구축하는 것이다.. 라는 겁니다. 

사실 앱 개발에 처음 접근하는 사람은 서버 다루고 터미널 다루고, 프로그래밍도 알고 하는 사람들 보다는 가볍게(?) 배워보려는 사람들이 더 많을텐데 이 사람들에게 시작도 하기 전에 node 깔고, cordova 깔고 SDK 깔고 어쩌고 하면.. 당연히 안한다는 거지요.

그래서 아예 가상머신에 OS를 설치하고 여기에 자기들이 모아놓은 개발환경을 일괄로 설치해줄테니 앱 개발만 해라 하는 것입니다.

조금 더 사용해보고 후기 다시 올리도록 하겠습니다.

angularJS의 ng-repeat directive에서 filter를 적용해서 입맛대로(!) 데이터를 뽑아내는 것에 대해서는 모두 잘 아실 것입니다.

오늘은 단순한 필터에서 한걸음 더 나아가서, 조금 더 처리를 해주어야 하는 필터를 만드는 부분을 보겠습니다.

예들 들어, 트리 구조의 다음과 같은 분식점 메뉴 데이터가 있다고 할 때 :

[{
        '_id': 'ramen',
            'price': '3000',
            'parent': null
    }, {
        '_id': 'gimbab',
            'price': '3500',
            'parent': null
    }, {
        '_id': 'gimchi ramen',
            'price': '3500',
            'parent': 'ramen'
    }];

parent === null 인 데이터만 보여주고 싶다고 하면 controller에 다음과 같이 필터를 생성해줍니다.

$scope.filterParentNull = function (category) {
        return category.parent === null;
 };

그리고 이제 template 쪽에 다음과 같이 넣어주면 되겠지요? ^^

html 파일

    

        
{{$index + 1}}
        
{{category._id}}
        
{{category.price}}
    

js 파일

angular.module('app', []);

function Ctrl($scope) {
    $scope.categories = [{
        '_id': 'ramen',
            'price': '3000',
            'parent': null
    }, {
        '_id': 'gimbab',
            'price': '3500',
            'parent': null
    }, {
        '_id': 'gimchi ramen',
            'price': '3500',
            'parent': 'ramen'
    }];

    $scope.filterParentNull = function (category) {
        return category.parent === null;
    };
}

전체 소스는 JSFIDDLE에 올려놓았습니다. 

이제 한참 NetBeans 가지고 AngularJS app 만드는 데 익숙해지고 있는데, 서버와 통신하는 부분 테스트하면서 고민이 되었습니다. CORS 이슈(요청하는 클라이언트와 서버가 다른 도메인이면 javascript에서 이를 허용하지 않지요) 때문에 데스크탑에서 테스팅하면서 작업하는데 한계가 생겼습니다. 그렇다고 서버 설정을 바꾸기도 좀 난감한 상황이었고.. 작업하는 데스크탑에 웹서버며 데이터베이스 등등을 얹기도 애매하고 했습니다. 

잠시 구글링을 해보니.. Chrome 브라우저에서는 꼼수로 이를 회피할 수 있는 방법이 있네요.

open -a Google\ Chrome --args --disable-web-security

이렇게 보안을 비활성화 시켜서 크롬을 실행시키면 됩니다.

물론 좋은 방법은 아니지만 작업환경을 풀로 세팅하기 어려운 상황에서 테스팅 용도로는 잘 사용할 수 있을 것 같습니다. 

아, 위 command는 Mac OSX 용입니다. 윈도용도.. 아마 있겠지요;;

UPDATE 09/15/2014 : 그러면 아래 그림처럼 경고창이 뜬 상태로 크롬이 실행됩니다. 보안과 편의성을 맞바꾼 거라 생각하시면 됩니다. 어차피 테스트용으로만 하니까.. 크롬은 NetBeans에서 바로 디버깅하면서 작업할 수 있으니까 크롬은 이 용도로 보안을 끄고 이용하고, 동시에 다른 웹 이용이 필요하면 Safari나 Firefox 켜놓고 작업을 하면 되니까 괜찮을거라 생각됩니다.

며칠째 angularJS 자료를 찾아보다 개발과정을 한눈에 딱 볼 수 있는 글이 있어 소개차(잊어먹지 않도록) 포스팅합니다. 글쓴이는 Matt Raible씨라고.. AngularJS 관련 자료 찾아보다 보면 동영상 강의나 프리젠테이션으로 많이 볼 수 있는 개발자입니다. 읽다 보면 삽질(?)한 이야기까지 써있어서.. 꽤 재미있습니다. ^^

1. Developing with AngularJS - Part I: The Basics
2. Developing with AngularJS - Part II: Dialogs and Data
3. Developing with AngularJS - Part III: Services
4. Developing with AngularJS - Part IV: Making it Pop

3. webapp 개발 환경 셋업

하면 이용가능한 generator들이 나옵니다. 처음 실행하시면 시간이 많이 먹히니 안 궁금하면 그냥 패스합니다.

그럼,

하고 기다리면 설치가 완료됩니다. 그 다음에 프로젝트 폴더를 만들고 그 폴더로 간 후에,

이제 그림처럼 필요한 요소를 정해주고 나면 커피 한잔 마시면서 뭐가 설치되고 있는지 느긋하게 보면 됩니다.

다 설치된 후에는 프로젝트 폴더의 app/ 폴더에 index.html이 있습니다.

이 화면이 나오면 정상적으로 설치된 것입니다.

혹시 이 화면이 정상적으로 나오지 않는다면 일부 요소들이 설치되지 않은 것이니, 에러 메시지가 있었는지 잘 살펴보시고요, 제일 많은 경우는 git이 설치되지 않았거나, 설치되었어도 PATH에 안 걸려있는 경우입니다. 

그럼, 다음에는 angularJS로 한번 가보도록 하겠습니다. ^^