ionic 하이브리드 앱 개발 - #5 navigation 네비게이션

ionic3에서는 모바일 환경을 중심으로 단순화되고 있으며, ionic3에서는  향상된 네비게이션 기능을 위해 @IonicPage 데코레이터가 도입되었습니다. 먼저 네이게이션 기능을 살펴보도록 하겠습니다.

기본 네비게이션 src/app/app.html 파일을 열고 내용을 살펴보면, 아래와 같은 내용을 확인할 수 있습니다.
<ion-nav [rooot]="rootPage"></ion-nav> ion-nav는 NavController의 하위 클래스 이며, 네이게이션 스택과 작업하기 위한 용도로 사용됩니다. ion-nav가 제대로 동작하려면 루트 페이지가 @component 인, 루트페이지를 초기에 로드하도록 설정해야 합니다.

import {StartPage} from 'start' @Component({ template: '<ion-nav [root]="rootPage"></ion-nav>' }) class MyApp { // First page to push onto the stack rootPage = StartPage; } 다음으로 각 page 에서 네비게이션 Controller 에 접근하기 위하여 생성자를 통해 NavController를 주입받아 사용할 수 있습니다. page component는 셀렉터가 필요하지 않으며, ionic page는 자동으로 추가 될 수 있습니다.
@Component({ template: ` <ion-header><ion-navbar><ion-title>Login</ion-title></ion-navbar></ion-header><ion-content>Hello World</ion-content>` }) export class StartPage { constructor(public navCtrl: NavController…

[반려동물 이야기] 산으로 가는 (사료)광고

이미지
안녕하세요, 이프입니다!
오늘은재미있는사료광고 CF가있어서소개해드리려구요!
광고이야기이지만제품개발이나회의에서도비슷한장면이많이보이는것같은느낌적인느낌이드네요ㅋㅋ
엘스야, 너도저런광고에출연하면좋겠... 아얼굴도못나오겠구나ㅋㅋ


[반려동물 이야기] 고양이가 좋아하는 것 12가지

이미지
고양이가 좋아하는 것 12가지


1. 눈키스
고양이가 느리게 눈을 깜박이는 것을 눈키스라고 한다. 자신을 사랑해달라는 의미가 담겨 있다. 대답하려면 고양이 눈을 비스듬히 바라보면서 눈을 천천히 감았다 뜨면 된다.

2. 머리 쓰다듬기
고양이는 사람이 자신의 몸을 만지는 것을 싫어하지만 유일하게 머리 부분은 싫어하지 않는다. 특히 귀와 귀 사이, 콧등, 뒷통수 등을 만져주면 매우 좋아한다. 운이 좋으면 그르릉 소리도 들을 수 있다.

3. 캣닢
허브의 일종인 캣닢은 고양이 마약으로 불린다. 코에 살짝 갖다 대면 마약에 취한 듯 행복해하는 고양이의 모습을 볼 수 있다. 4. 박스 고양이는 자신의 체형에 맞는 밀폐공간에 있을 때 안정감을 느끼는 습성이 있다고 한다. 5. 비닐봉투 고양이는 비닐봉투의 바스락거리는 소리를 매우 좋아한다. 비닐봉투를 흔들면 구석에 숨어있던 고양이가 달려올지도 모른다. 6. 깃털 장난감 깃털이 달린 장난감은 고양이가 좋아하는 장난감 중 하나다. 깃털이 달린 낚시대를 흔들면 고양이가 마구 흥분하며 낚시대에 달려드는 모습을 볼 수 있다. 7. 통조림 캔 사료에는 보통 참치나 연어, 게맛살 등이 들어가는데 향과 맛이 강해 고양이들이 선호한다. 자주 먹이면 비만과 치석을 유발할 수 있어 주의해야 한다. 8. 스크래쳐 고양이는 긁으면서 영역 표시를 하거나 반가움을 표현한다. 또 근육 단련과 발톱 갈이를 위해서 발톱 긁기를 하기도 한다. 스크래쳐 위에 캣닢을 솔솔 뿌려두면 행복해한다. 9. 일광욕 고양이는 햇빛을 쐬면서 비타민 D 를 합성하고 털도 살균한다. 또 햇빛은 곰팡이 방지와 우울증 예방에도 도움이 된다. 11. 수면바지 고양이가 꾹꾹이를 하는 것을 보고 싶다면 수면바지 위에 올려놓으면 된다. 고양이는 수면바지 특유의 부드러운 촉감을 매우 좋아한다.

[Ubuntu] inode full 해결을 위한 오래된 Kernel DATA 삭제

이미지
지난 포스팅에서 Ubuntu  서버의 최신 Kernel 적용 방법에 대해 알아보았습니다.

지난 포스팅 보러가기

그런데 몇개의 인스턴스를 업데이트를 진행 하다보니  Kernel 업데이트 도중

DISK 저장공간 부족으로 인해 업데이트가 불가능한 현상이 발생하였습니다.

실제 디스크 용량은 충분 하여

아래 명령어를 통해 확인해 보니 inode 가 100% 사용 중이었습니다.

$ df -i cs





검색해 보니 inode 확보를 위해서 이전커널 데이터를 삭제해야 되는것을 확인할 수 있었습니다.

/usr/src 폴더로 이동해 커널 정보를 확인해 보면 이전버전의 커널 데이터가

버전별로 줄지어 용량을 차지하고 있는것을 보실수 있습니다.







아래 명령어를 실행하여 이전버전 커널 데이터를 정리할 수 있습니다.

$ sudo apt autoremove cs





디스크 용량을 2,022 MB 확보할수 있다는 메시지가 표출 됩니다.
"Y" 를 입력하고 넘어갑니다.



작업이 완료되면 아래 그림과 같이 표출됩니다.






/usr/src 폴더의 파일을 확인해보면 최신 버전 이외에는
모두 삭제된 것을 확인 할 수 있습니다.


다시 inode 정보를 확인해 보면 가용영역이 늘어난 것을 확인할 수 있습니다.







<수동으로 오래된 커널 파일 삭제하기>

$ sudo apt autoremove cs


명령어 실행시 "apt-get –f install " 작업이 필요하다는 에러가 발생하는 경우가 있습니다.


$ sudo apt-get –f install cs

그런데 명령어를 실행하면 또다시 Disk 용량부족 에러 메시지를 보시게 될겁니다.


이럴 경우에는 수동으로 …

[AWS] Ubuntu instance Kernel Update

이미지
지난 포스팅을 통해서 Intel CPU 보안 취약점 발견에 따른 OS 별 대처방법에 대해 살펴보았습니다.

지난포스팅 보러가기

오늘은 AWS 에서 사용중인 Ubuntu 서버의 보안취약점 대응을 위한 Patch 작업을 진행해 보도록 하겠습니다.

우선 현재 운영중인 Ubuntu 섭서의 Kernel 버전을 확인해 보겠습니다.

Krenel 버전 확인을 위해 명령어를 입력합니다.


1 $  uname –r  cs




다음은 패키지 정보 리스트를 최신으로 업데이트 합니다.


1 $ sudo apt-get update cs



다음은 패키지 관리자 리스트에서 리눅스 커널의 이미지 버전을 검색합니다.

1 $ apt-cache search linux-image cs



AWS 환경에서 운영되은 Instance 이므로 AWS 용 Lunux 커널을 사용해야합니다.
linux-aws - Amazon Web Services (AWS) 시스템 용 Linux 커널linux-euclid - Intel Euclid 시스템 용 Linux 커널

AWS 시스템용 Linux 커널 중 최신 버전인 1049 버전을 사용해서 업데이트를 진행하도록 하겠습니다.


1 $ sudo apt-get install linux-image-4.4.0-1049-aws cs

업데이트 작업 시도중 위와 같이 에러가 발생한다면

아래와 같이 명령어를실행한 이후 다시 업데이트 작업을 진행 합니다.

1 $ sudo apt-get –f install cs


작업 진행 중 추가 디스크 용량이 필요하다는 메시지가 출력됩니다.
“Y” 를 입력합니다.



다시 커널 업데이트 작업를 진행 합니다.
작업이 완료후 서버를  재부팅  하면 최신 커널 버전으로 업데이트 되는것 을 확인할 수 있습니다.


ionic 하이브리드 앱 개발 - #4 Component

이미지
그리드 뷰의 레이아웃을 정밀하게 제어하기 위해 컴포넌트를 페이지에 배치하거나 정렬하기 위해 ionic에서는 그리드 시스템을 사용합니다. FlexBox기반으로 CSS Flexible Box Layout Module을 사용하여 구현합니다. 장점으로는 열을 고정시키지 않고 행안에 원하는 만큼의 자동으로 너비를 지정해서 만들 수 있습니다. 그리드 시스템은 12 개의 열로 구성되며 각 열은 col- <width> 속성을 설정하여 크기를 조정할 수 있습니다.소스보기버튼버튼은 앱과 상호 작용하고 탐색하는 필수적인 방법이며 사용자가 탭을 클릭 한 후에 어떤 작업이 발생하는지 명확하게 알려야합니다. 버튼은 텍스트 및 / 또는 아이콘으로 구성 될 수 있으며 다양한 속성으로 향상 될 수 있습니다.
접근성을 위해 버튼은 표준 <button> 요소를 사용하지만 ion-button directive(지시자)로 확장할 수 있습니다.Basiccolor 속성은 버튼의 색상을 설정합니다. Ionic에는 쉽게 재정의 할 수있는 기본 색상이 많이 포함되어 있습니다.<button ion-button color="light">Light</button><button ion-button>Default</button><button ion-button color="secondary">Secondary</button><button ion-button color="danger">Danger</button><button ion-button color="dark">Dark</button>Outline Style<button ion-button color="light" outline>Light Outline</button><button ion-button outline>…