AngularJS 2.0 으로 올라오면서 ngIf 는 그대로 유지되었지만 ngShow 는 사라진 것 같다. (아마도)

둘의 용도는 조금 달라서 ngIf 로는 ngShow 기능들을 대체할 수 없을 때가 있다.


프로퍼티 바인딩 기능을 사용해 hidden 프로퍼티에 값을 설정하는것으로 ngShow 기능과 같은것을 구현할 수 있다.




'Javascript > AngularJS 2.0' 카테고리의 다른 글

[Angular2.0] ng-show 사용하기  (0) 2016.02.17
[Angular2.0] ng-bind-html 사용하기  (0) 2016.02.16
Posted by pjc0247




AngularJS 1.x 버전대의 ng-bind-html 기능을 2.0에서 사용하고자 할 때는,
프로퍼티 바인딩 기능을 이용해 단순히 innerHtml 프로퍼티에 값을 바인딩하는것으로 해결할 수 있다.


'Javascript > AngularJS 2.0' 카테고리의 다른 글

[Angular2.0] ng-show 사용하기  (0) 2016.02.17
[Angular2.0] ng-bind-html 사용하기  (0) 2016.02.16
Posted by pjc0247

ionic 2.0 에서 카드와 스크롤러를 조합하면 이미지가 스크롤되는 카드를 쉽게 만들 수 있다.

이미지의 크기가 서로 다를 수 있음에 주의해야 하며, 코드에서는 ion-slide 태그에 height:auto 속성을 주어서 작은 이미지는 수직으로 중앙에 위치하도록 설정하였다.

첫번째 사진은 height:auto가 설정된 이미지
두번째는 설정하지 않았을 때
세번째는 풀사이즈



Posted by pjc0247
로컬에서 동작하는 웹앱에서도 제공되는 REST API등을 사용하기 위해 OAuth 인증(구글, 페이스북 등)을 지원해야 하는 경우가 종종 있습니다.

기본적인 OAuth에서는 로그인 단계에서 로그인 제공자가 앱 개발자쪽으로 콜백을 주는 부분이 있는데 이를 별도의 서버를 두지 않고도, 인앱 브라우저의 이벤트를 구독하여 url을 받아 파싱하는것만으로 처리할 수 있습니다.


예제는 Quizlet.com 의 OAuth를 구현하는것으로 작성하였습니다.
(https://quizlet.com/api/2.0/docs/authorization-code-flow)

예제를 실행하기 위해서는 InAppBrowser 플러그인을 설치해 주세요






***

또한 cordova를 위한 oauth 플러그인이 이미 준비되어 있습니다. 조금 유명한 서비스(깃허브, 구글) 등은 이곳에 이미 구현체가 작성되어 있으니 이걸 사용하시면 됩니다.

https://github.com/nraboy/ng-cordova-oauth


Posted by pjc0247

2>throw e;

2>^

2>ERROR: Failed to launch application on device: ERROR: Failed to install apk to device: pkg: /data/local/tmp/android-armv7-debug.apk

2>Failure [INSTALL_FAILED_VERSION_DOWNGRADE]

Visual Studio + Cordova 환경에서 개발 시, 위와 같은 에러가 발생하면서 디바이스에 앱을 올리는것이 실패할 때,


프로젝트 폴더 -> platforms/android/cordova/lib/device.js

약 101번째 라인을 아래와 같이 수정한다


'install -r ' 부분을 'install -r -d ' 로 교체


적용 후 빌드하면 다운그레이드 인스톨 옵션이 추가되어서 해당 문제가 발생하지 않게 된다.



참고

http://stackoverflow.com/questions/13400499/is-there-any-way-to-ignore-install-failed-version-downgrade-on-application-insta/13772620#13772620

Posted by pjc0247

http://blog.ionic.io/announcing-ionic-1-2/


Native Scrolling

By default, Ionic 1.2 will use native scrolling on all platforms. When we first built Ionic, native overflow scrolling was very buggy in the browser, and to bring parity with features we’ve come to expect from mobile apps, such as pull-to-refresh and virtual scrolling, we decided we needed to have full control over our scroll view, so we utilized a JS scrolling technique. Generally, this worked okay on iOS but was poor on Android.

A few months ago we released a new version of Ionic with many of the core scrolling-related features implemented to work with the modern overflow scrolling on new devices and browsers (including modern Web Views on Android and Crosswalk). Today we are taking it a step further and making native scrolling the default.

In general, this should be a pretty immediate and possibly significant performance and user experience improvement to your Ionic apps,especially on Android.

However, there’s a slight possibility that the change could impact your app or any external libraries that depended on the old scrolling method, so please test with the new version.

To force Javascript scrolling, use <ion-content overflow-scroll="false">. Note: collection repeat still uses Javascript scrolling which we will phase out in 1.3.


안드로이드 환경에서 엄청나게 버벅이던 스크롤 속도가, 1.2 버전에서 패치되었습니다.


단순히 기존 프로젝트에 ionic 버전을 교체하는것만으로도 엄청난 속도 향상을 불러올 수 있습니다.


직접 테스트해본 바로는
만들다가 스크롤 속도가 엄청 느려서 포기한 프로젝트에 버전만 교체하니 스크롤이 날아다닙니다.


Posted by pjc0247
TAG ionic, scroll


Parse SDK 에서 background job을 이용하여 일정 주기, 또는 일정 시점에 코드를 실행시킬 수 있습니다. (batch, cronjob 기능)

이 background job 기능을 사용하여 매일 24:00 시 마다 오늘의 유저 랭킹 등을 계산하는 기능을 제작하는것이 가능합니다. 또는 일정 주기마다 플레이어에게 돈을 주는 작업 (하지만 이런 작업은 백그라운드 잡이 아닌 다른 방법으로 구현하는게 좋다고 생각합니다.) 또한 수행할 수 있습니다.



parse command line tool 설치하기

https://github.com/ParsePlatform/parse-cli/releases/tag/release_3.0.3

먼저 서버 코드를 deploy 하기 위해 명령줄 프로그램이 필요합니다. 위 링크에서 플랫폼에 맞는 버전을 다운로드받습니다.

환경 변수 등을 설정한 후 실행 가능 상태가 되면 쉘에 'parse' 를 입력합니다. 아래와 같이 출력되면 성공입니다.


parse new
명령를 입력해 로그인 정보와, 앱 정보를 기입 후 로컬 파일 디렉토리를 지정합니다.

You can either set up a blank project or download the current deployed Cloud Code.
Please type "(b)lank" if you wish to setup a blank project, otherwise press ENTER:

위와 같은 메세지가 나오면 엔터를 누릅니다. 엔터를 누를 경우 기본적인 템플릿 코드가 같이 생성됩니다.
만약 b 키를 누르면 템플릿 코드 없이 클린한 환경이 구성됩니다.


이후에 템플릿 디렉토리가 생성되면 해당 디렉토리로 cd /cloud/main.js 파일을 오픈합니다.
이곳에는 베이스 코드가 작성되어 있지만, 이는 우리가 원하는 background job의 베이스 코드가 아닙니다.

코드를 아래와 같이 수정합니다. 이 코드는 parse doc의 background job 기본 예제의 변형입니다.

이 코드는 TestObject의 num 컬럼을 계속해서 1씩 증가시킵니다.




클라우드 서버에 코드 디플로이

parse deloy
명령어를 실행하면 자동으로 parse에 코드가 올라갑니다.


올라간 코드는 대시보드에서 확인할 수 있습니다.
대시보드에 접속하면 아래와 같은 화면이 표시됩니다. 여기서 코드가 정상적으로 올라갔는지를 확인이 가능합니다.




주기적으로 실행시키기

아직은 코드만이 deploy 됬을 뿐, 실제로 일정 주기마다 코드가 실행되지는 않습니다. 이를 위해 Jobs -> Scheduled Jobs에 들어갑니다.



Schedule a job 을 클릭하면 새 작업을 만들 수 있습니다.


Job에 대한 기본 정보를 설정합니다, 설명, 실행할 background job, 파라미터를 설정합니다.

우리의 job은 파라미터를 사용하지 않지만, 추후에 파라미터를 추가할 수 있습니다.


실행 시간 정보를 입력합니다. 매일 지정된 시간 또는, 지정된 분/시간마다 실행하도록 할 수 있습니다.

기본적으로 설정된 실행시작시간은 12:00 입니다. 이는 한국 시간이 아니기 때문에 설정에 주의하시기 바랍니다. 만약 설정 이후에 지정 주기마다 job이 시작되지 않으면 스타트 타임을 확인해 주세요.



등록이 완료되면 방금 추가한 정보가 job 목록에 새롭게 표시됩니다.

기본적으로 설정된 스케쥴에 맞게 실행되지만 Run now 를 눌러서 지금 당장 실행할 수도 있습니다.




실행 결과 확인하기

Job status 화면에서는 최근에 실행된 job의 실행 결과와 메세지, 실행 시각을 확인할 수 있습니다.

이곳에 표시되는 message는 job 코드에서 status.message() 함수를 통해 설정이 가능합니다.


Log 탭에서는 실행된 background job의 로그를 볼 수 있습니다.

'Javascript > Parse' 카테고리의 다른 글

[Parse] background job 사용하기  (0) 2016.01.27
Posted by pjc0247

https://github.com/Automattic/mongoose/issues/2718


로컬에서 잘 돌아가던게 Heroku에 올라가니까 안돌아가는 문제가 발생.

몽구스 버전을 최신으로 업데이트하면 해결된다.

Posted by pjc0247

[js] JSONP & POST

Javascript 2015.12.21 10:24
http://alotaiba.github.io/FlyJSONP/

JSONP 특성상 POST 요청은 수행할 수 없다. 하지만 몇 가지 트릭을 사용하면 JSONP의 장점을 살리면서도, POST요청을 보낼 수 있는데, FlyJsonP는 그러한 트릭을 구현한 구현체중의 하나이다.

FlyJsonP 내부적으로는 YQL을 사용한다. (https://developer.yahoo.com/yql/)
즉, GET요청으로 야후 서버한테 정보를 넘겨주면, 야후 서버가 대신 POST를 날려서 결과를 알려주는 구조이다. 클라이언트가 직접 요청을 날리는것이 아니기 때문에 몇가지 케이스에서는 문제가 될 수도 있는 소지가 있지만, 대부분의 경우 괜찮다고 생각한다.


다만 한가지 주의할 사항이 있다. YQL에서는 몇몇 특수문자를 허용하지 않는다. 쿼리 기호랑 겹치기 때문인데, 반드시 이스케이프 하고 사용해야 한다. (https://developer.yahoo.com/boss/search/boss_api_guide/reserve_chars_esc_val.html)

예를 들어 BASE64 인코딩한 결과물 중 + 기호가 들어있는 데이터를 이스케이프 하지 않고 parameters에 넣어서 보내면 문제가 발생할 것이다.



Posted by pjc0247
단일 값 필터


리스트 필터

리스트용 필터가 따로 존재하는것이 아니라, 그냥 첫번째 파라미터에 단일 값이 아닌 리스트가 넘어온다. 넘겨받은 리스트를 필터링해서 새로운 결과 리스트를 반환하면 된다.
이 때 filter 메소드를 사용하면 편리하다. ( filter는 IE9 부터 작동 )

 


여러개 필터 사용하기

여러개의 바(|)를 사용하여 여러개의 필터를 동시 적용시킬 수 있다.



파라미터 전달하기

필터 옆에 콜론(:)을 이용하여 파라미터를 전달할 수 있다, 파라미터는 js쪽 filter에 전달된다.


해시태그 필터 제작하기

필터와 정규식을 이용한 해시태그 필터 제작하기, html 태그는 기본 바인딩({{}})에 적용할 수 없기 때문에 ng-bind-html을 사용해야 한다.


Posted by pjc0247