HTML52016.10.06 14:12


http://www.joshmorony.com/a-simple-guide-to-navigation-in-ionic-2/



Ionic1이나 Angular1 백그라운드가 다면 URL, state등으로 라우팅을 Ionic2에서도 사용은 가능하다 하지만 많은 주의가 필요하므로 권장하지 않는다.

Ionic2는 View를 push/pop하는 네비게이션 스택으로 운영된다.


이를 구현하는 방법을 배우기 전에 어떻게 동작하는지에 대해 먼저 이해해보자.


Push/Pop


root page가 고양이 그림이 그려진 종이가 테이블에 올려져 있다고 상상해보자.

이제 개그림이 그려진 종이를 올려보자. 그러면 개그림이 제일 위에 있게 된다. 그리고 고양이는 여전히 개그림 아래에 놓여져 있게 된다.

이번에 소그림이 그려진 종이를 올려보자. 소그림이 제일 위에 있고 고양이과 개그림도 여전히 놓여져 있다.

이제 개그림을 보려면 쌓여진 종이의 맨위 그림을 버리면 된다. 이어서 고양이그림을 보려면 한번더 맨위의 그림을 버리면 된다.

히스토리를 관리하는 아주 편리한 네비게이션방안이고 차일드뷰가 많은 경우 이해하기 쉽다. 하지만 항상 그런것은 아니다. 어떤 경우는 바로 이전페이지가 아니라 다른 페이지로 이동하고자 할 경우도 발생하기 마련이다(로그인 페이지에서 메인페이지로 이동하는경우).

이 경우 우린느 root page를 변경할 수 있다. 

위 예에서 소그림을 root page로 할 수 있다.


언제 push하고 언제 root page로 해야 하나?


현재뷰의 차일드로 전환하고자 하는 경우 또는 새로운 뷰에서 이전뷰로 돌아오기를 원한다면 push를 해야한다.

현재뷰의 차일드가 아니거나 애플리케이션의 다른 섹션으로의 이동이라면 root page를 변경해야 한다.

root page와 root component는 다르다. root component(보통 app.component.ts)가 root page를 정의한다. 


Ionic2 네비게이션 기초


NavController를 import해야 한다.


import { NavController } from 'ionic-angular';


그리고 생성자에서 inject해야 한다.


@Component ({

  templateUrl: 'home.html',

})

export clas MyPage {

  constructor(public navCtrl: NavController) {


  }

}


NavController의 레퍼런스가 생기고 클래스내 어디에서든지 사용이 가능하다. 이제 어떻게 push/pop을 하는지 보자


페이지를 push하려면 


this.navCtrl.push(SecondPage);


앞에서 inject한 navCtrl로 push하였다. 이렇게 하려면 SecondPage가 import되어야 한다.


import { SecondPage } from '../second-page/second-page';


이제 코드내에서 push를 호출하면 새로운 페이지가 표시될것이고 nav bar에 자동으로 백버튼이 생성이 될것이다.

pop을 언제 할것인지 고민하지 말라. 백버튼을 누르면 알어서 pop해줄것이다.


수동으로 이전 페이지로 이동하고자 한다면 명시적으로 pop을 호출한다.


this.navCtrl.pop();


이번엔 root page를 변경한는 방법이다. app.ts에 rootPage를 정의하였을 것이다.


rootPage: any = MyPage;


root component의 rootPage변수에 root page를 셋팅할것이다. root page를 변경하려면 NavController의 setRoot함수를 호출하면 그만이다.


this.navCtrl.setRoot(SecondPage);



Ionic2에서 페이지간 데이터 전송


모바일애플리케이션에서는 보통 페이지간의 데이터를 전달할 방법이 필요하다. Ionic2에서는 NavParams로 가능하다. push로 페이지 호출할때 파라메터를 생성하여 전달하는 방법이 있다. 이 방법은 setRoot시에도 동일하게 적용된다.


this.navCtrl.push(SecondPage, { thing1: data1, thing2: data2});


추가 파라메터가 더해진것 말고 이전과 사용법이 동일하다. 호출되는 페이지에서는 NavParams를 생성자에서 inject해야 한다.


import { Component } from '@angular/core';

import { NavController, NavParams } from 'ionic-angular';


@Component ({ templateUrl: 'second-page.html'})

export class SecondPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {


  }

}


이제 파라메터에 접근하려면 아래와 같이 하면 된다.


this.navParams.get('things');


신고
Posted by 삼스
Linux2015.09.15 13:20


http://docs.gstreamer.com/display/GstSDK/Installing+the+SDK


GstreamerSDK는 리눅스배포판별로 바이너리 패키지셋을 제공한다. 배포판 중에 Ubuntu에 대한 자세항 설명을 기술할거다.

소스코드를 다운로드하고 직접 빌드해서 환경을 설정할 수 도 있다.


다운로드 및 SDK 설치


1. Ubuntu 12.04(Precise Pangolin) 설치

2. gstreamer-sdk.list를 apt source list에 추가

SDK의 repository정보를 apt source list에 추가해주어야 한다.

다운로드 후 다음 명령으로 추가한다.

sudo cp gstreamer-sdk.list /etc/apt/sources.list.d/

3. GPG key추가 및 레포지트리 리프레시

이어서 apt repository의 GPG key가 추가되어야 하고 목록이 리프레시 되어야 한다.

wget -q -O - http://www.freedesktop.org/software/gstreamer-sdk/sdk.gpg | sudo apt-key add -

sudo apt-get update

4. SDK 설치

이제 새 레포지트리가 활성화되었다. 아래 명령으로 SDK를 설치하면 된다.

sudo apt-get install gstreamer-sdk-dev


개발환경 설정


빌드시 컴파일러는 하이브러리드를 반드시 특정 위치에 있어야 한다.  시스템에 설치된 Gstreamer와의 충돌을 방지하기 위해 비표준 위치(/opt/gstreamer-sdk)에 설치 된다.  쉘스크립트인 gst-sdk-shell은 SDK로 빌드하기 위한 필요한 환경변수들을 설정해준다.

/opt/gstreamer-sdk/bin/gst-sdk-shell

한가지더 필요한 개발환경은 gcc compiler와 text editor이다. SDK로 앱 코드를 빌드할 때 gcc command에 아래 내용을 반드시 추가해 주어야 한다.

'pkg-config --cflags --libs gstreamer-0.10'

다른 gstreamer library를 사용하고 있다면 예를 들어 video 라이브러리 같은... gstreamer-0.10뒤에 추가해주어야 한다.

'pkg-config --cflags --libs gstreamer-0.10 gstreamer-video-0.10'

빌드 시 libtool이 필요한 경우 즉 automake/autoconf를 사용하는 경우라면 configure 스크립트를 gst-sdk-shell환경으로부터 실행해야 한다.

SDK경로를 포함시킬 수 있는 방법이 있는데 그렇게 하면 gst-sdk-shell로부터 실행할 필요가 없다. gcc옵션에 다음과 같이 추가하면 된다.

-Wl, -rpath=/opt/gstreamer-sdk/lib 'pkg-config --cflags --libs gstreamer-0.10'

libtool을 사용하는 경우라면 자동으로 -Wl과 -rpath를 추가해줄것이기 때문에 걱정이 필요없다.


튜터리얼 소스코드 받기


git clone git://anongit.freedesktop.org/gstreamer-sdk/gst-sdk-tutorials

/opt/gstreamer-sdk/share/gst-sdk/tutorials


튜터리얼 빌드하기


시스템과 충돌없이 올바른 라이브러리로 빌드하기 위해서 Gstreamer SDK shell로 먼저 진입해야 한다. /opt/gstreamer-sdk/bin/gst-sdk-shell 을 실행하여 쉘로 진입하라.

그리고 튜터리얼 코드가 있는 폴더로 이동해서 아래 명령으로 빌드하면 된다.


gcc basic-tutorial1-1.c -o basic-tutorial-1 'pkg-config --cflags --libs gstreamer-0.10'


사용하려고 하는 라이브러리에 따라서 pkg-config에 추가가 더 되어야 한다.  튜터리얼코드의 아랫부분에는 필요한 라이브러리들이 순서대로 기술되어 있을 것이다.


앱 배포

배포할 앱은 반드시 필요한 라이브러리들이 함께 있어야 한다. 몇가지 옵션이 있다.

한가지는 shared sdk를 설치할거라면 앱은 /opt/gstreamer-sdk에 두고 .desktop파일을 /usr/share/applications에 만들어 두는 것이다. 문제없이 동작하게 하려면 -Wl, -rpath=/opt/gstreamer-sdk/lib 파라메터로 앱이 빌드되어 있어야 한다.

또는 wrapper script를 사용하는것이다. 이는 필요한 환경변수를 셋팅하고 나서 앱을 생성한다. 그리고 .desktop file을 /usr/share/applications에 생성한다. 가장 많이 사용되는 접근법이고 -WL, -rpath파라메터를 요구하지 않고 더 효율적이다. gst-sdk-shell파일을 둘러보아서 스크립트가 멀 하는지 알아보길 바란다.


신고
Posted by 삼스
iPhone 개발2015.08.31 14:53



호스트 연결전에 DNS Name resolving피하기


호스트에 접속하는 적절한 방법은 DNS 명을 받는 CFHost나 CFNetService같은 API가 있다. 앱에서 DNS name으로 리졸브된 ip주소로 접속을 한다고 해도 이 방법은 피해야 한다. DNS lookup은 보통 여러개의 IP주소를 반환하며 어떤 IP주소가 가장 좋은 연결을 제공하는지 알 수 없다.

최근의 대부분의 컴퓨터나 모바일디바이스들은 멀티홈을 가진다. 즉 WiFi + Ethernet이거나 3G + WiFi이거나 하는 환경이 많다. 하지만 모든 호스트가 모든 컨넥션에서 유효한것은 아니다. 예를 들어 iPhone으로 Apple TV를 제어하려고 하는 경우 App TV는 Wifi망에 있고 폰은 3G망에 있다면 이는 연결이 불가하다.

디바이스와 서버가 모두 멀티IP주소를 가지고 있다면 서버에 연결할 가장 좋은 IP주소는 어떤 네트웍에 연결되어 있느냐에 따라 결정된다. 예를 들어 가정의 멀티미디어 서버가 LAN과 WiFi IP주소를 모두 가지고 있다면 OS에서 더 빠른 네트웍을 감지할 수 있을것이며 프로그램이 이 주소를 통해 연결가능할것이다.

서버가 IPv4와 IPv6를 모두 지원하면 두 프로토콜을 사용함으로 인해 도달하지 못할 수 있다. host-name-basedAPI를 사용하여 OS는 동시에 시도를 할 수 있고 첫번째것으로 성공시킬수 있다. 앱이 먼저 찾아낸 IP주소가 어떤 주소냐에 따라서 연결이 안될 가능성 도 있다.

구형 서버로  IPv6를 지원하지 않는 경우에 AAAA형식의 IPv6주소로 접을을 요청하면 동기로 호출되는 DNS조회는 요청시간내내 블럭될것이다.(디폴트는 30초) . 만일 호스트명을 취하는 API를 사용하면 OS는 IPv4와 IPv6요청이 동시에 수행되는지 사용자가 알수 없게 할것이고 내부적으로 IPv4연결이 완성되면 IPv6연결시도는 취소할것이다.

Bonjours를 사용해서 서비스를 게시하는 경우(DHCP는 동작하지 않음) 앱이 해당서비스를 찾아서 IP주소를 얻어내었다면 해당 디바이스가 IP주소를 유지하는 동안에는 유효하다. 하지만 DHCP서비스가 다시 온라인이 되게 되면 IP주소는 변경되고 이전 IP주소는 더이상 유효하지 않게 된다. 만일 게시이름으로 연결을 시도하게 된다면 앱에서는 서버가 최종적으로 언어진 IP주소로 계속 연결을 할 수 있게 될것이다.

DNS Name 해결하기를 직접 피할수 없다면 먼저 CFHost API가 요구사항에 만족하는지 확인해보아야 한다. 이는 싱글주소 대신에 호스트에 주어진 모든 주소목록을 제공한다. CFHost가 만족시키지 못한다면 DNS Service Discovery API를 사용하라.



신고
Posted by 삼스

티스토리 툴바