본문 바로가기

Javascript

[Angular2.0] ng-show 사용하기 AngularJS 2.0 으로 올라오면서 ngIf 는 그대로 유지되었지만 ngShow 는 사라진 것 같다. (아마도) 둘의 용도는 조금 달라서 ngIf 로는 ngShow 기능들을 대체할 수 없을 때가 있다. 프로퍼티 바인딩 기능을 사용해 hidden 프로퍼티에 값을 설정하는것으로 ngShow 기능과 같은것을 구현할 수 있다. Show 더보기
[Angular2.0] ng-bind-html 사용하기 import {Component} from 'angular2/core' @Component({ selector: 'my-app', template: ` ` }) export class App { constructor() { this.value = 'hello world' } } AngularJS 1.x 버전대의 ng-bind-html 기능을 2.0에서 사용하고자 할 때는, 프로퍼티 바인딩 기능을 이용해 단순히 innerHtml 프로퍼티에 값을 바인딩하는것으로 해결할 수 있다. 더보기
[Ionic2] 스크롤 가능한 이미지가 있는 카드 만들기 ionic 2.0 에서 카드와 스크롤러를 조합하면 이미지가 스크롤되는 카드를 쉽게 만들 수 있다. 이미지의 크기가 서로 다를 수 있음에 주의해야 하며, 코드에서는 ion-slide 태그에 height:auto 속성을 주어서 작은 이미지는 수직으로 중앙에 위치하도록 설정하였다. 첫번째 사진은 height:auto가 설정된 이미지 두번째는 설정하지 않았을 때 세번째는 풀사이즈 A card which contains scrollable image container. You can scroll images left or right. 더보기
[ionic] 로컬 앱 OAuth2 인증 수행하기 로컬에서 동작하는 웹앱에서도 제공되는 REST API등을 사용하기 위해 OAuth 인증(구글, 페이스북 등)을 지원해야 하는 경우가 종종 있습니다. 기본적인 OAuth에서는 로그인 단계에서 로그인 제공자가 앱 개발자쪽으로 콜백을 주는 부분이 있는데 이를 별도의 서버를 두지 않고도, 인앱 브라우저의 이벤트를 구독하여 url을 받아 파싱하는것만으로 처리할 수 있습니다. 예제는 Quizlet.com 의 OAuth를 구현하는것으로 작성하였습니다.(https://quizlet.com/api/2.0/docs/authorization-code-flow) 예제를 실행하기 위해서는 InAppBrowser 플러그인을 설치해 주세요 // 로그인 버튼을 누르면 실행되야 하는 함수 $scope.login = function (.. 더보기
[Cordova] INSTALL_FAILED_VERSION_DOWNGRADE 에러 발생 시 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.apk2>Failure [INSTALL_FAILED_VERSION_DOWNGRADE] Visual Studio + Cordova 환경에서 개발 시, 위와 같은 에러가 발생하면서 디바이스에 앱을 올리는것이 실패할 때, 프로젝트 폴더 -> platforms/android/cordova/lib/device.js약 101번째 라인을 아래와 같이 수정한다 var cmd = 'adb -s ' + resolvedTarget.target + ' install -r -.. 더보기
[Ionic] ionic framework 스크롤 속도 문제 http://blog.ionic.io/announcing-ionic-1-2/ Native ScrollingBy 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.. 더보기
[Parse] background job 사용하기 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 하기 위해 명령줄 프로그램이 필요합니다. 위 링크.. 더보기
[node] Error: Cannot find module 'mongodb/node_modules/bson' https://github.com/Automattic/mongoose/issues/2718 로컬에서 잘 돌아가던게 Heroku에 올라가니까 안돌아가는 문제가 발생.몽구스 버전을 최신으로 업데이트하면 해결된다. 더보기
[js] JSONP & POST http://alotaiba.github.io/FlyJSONP/ JSONP 특성상 POST 요청은 수행할 수 없다. 하지만 몇 가지 트릭을 사용하면 JSONP의 장점을 살리면서도, POST요청을 보낼 수 있는데, FlyJsonP는 그러한 트릭을 구현한 구현체중의 하나이다.FlyJsonP 내부적으로는 YQL을 사용한다. (https://developer.yahoo.com/yql/) 즉, GET요청으로 야후 서버한테 정보를 넘겨주면, 야후 서버가 대신 POST를 날려서 결과를 알려주는 구조이다. 클라이언트가 직접 요청을 날리는것이 아니기 때문에 몇가지 케이스에서는 문제가 될 수도 있는 소지가 있지만, 대부분의 경우 괜찮다고 생각한다. 다만 한가지 주의할 사항이 있다. YQL에서는 몇몇 특수문자를 허용하지 않.. 더보기
[AngularJS] 커스텀 filter 제작하기 단일 값 필터 리스트 필터 리스트용 필터가 따로 존재하는것이 아니라, 그냥 첫번째 파라미터에 단일 값이 아닌 리스트가 넘어온다. 넘겨받은 리스트를 필터링해서 새로운 결과 리스트를 반환하면 된다. 이 때 filter 메소드를 사용하면 편리하다. ( filter는 IE9 부터 작동 ) 여러개 필터 사용하기 여러개의 바(|)를 사용하여 여러개의 필터를 동시 적용시킬 수 있다. 파라미터 전달하기 필터 옆에 콜론(:)을 이용하여 파라미터를 전달할 수 있다, 파라미터는 js쪽 filter에 전달된다. 해시태그 필터 제작하기필터와 정규식을 이용한 해시태그 필터 제작하기, html 태그는 기본 바인딩({{}})에 적용할 수 없기 때문에 ng-bind-html을 사용해야 한다. 더보기