본문 바로가기

Programming

 (135)
ionic 하이브리드 앱 개발 - #5 navigation 네비게이션 ionic3에서는 모바일 환경을 중심으로 단순화되고 있으며, ionic3에서는 향상된 네비게이션 기능을 위해 @IonicPage 데코레이터가 도입되었습니다. 먼저 네이게이션 기능을 살펴보도록 하겠습니다. 기본 네비게이션src/app/app.html 파일을 열고 내용을 살펴보면, 아래와 같은 내용을 확인할 수 있습니다. ion-nav는 NavController의 하위 클래스 이며, 네이게이션 스택과 작업하기 위한 용도로 사용됩니다. ion-nav가 제대로 동작하려면 루트 페이지가 @component 인, 루트페이지를 초기에 로드하도록 설정해야 합니다. import {StartPage} from 'start' @Component({ template: '' }) class MyApp { // First pag..
[Ubuntu] inode full 해결을 위한 오래된 Kernel DATA 삭제 지난 포스팅에서 Ubuntu 서버의 최신 Kernel 적용 방법에 대해 알아보았습니다. 지난 포스팅 보러가기 그런데 몇개의 인스턴스를 업데이트를 진행 하다보니 Kernel 업데이트 도중 DISK 저장공간 부족으로 인해 업데이트가 불가능한 현상이 발생하였습니다. 실제 디스크 용량은 충분 하여 아래 명령어를 통해 확인해 보니 inode 가 100% 사용 중이었습니다. $ df -i cs 검색해 보니 inode 확보를 위해서 이전커널 데이터를 삭제해야 되는것을 확인할 수 있었습니다. /usr/src 폴더로 이동해 커널 정보를 확인해 보면 이전버전의 커널 데이터가 버전별로 줄지어 용량을 차지하고 있는것을 보실수 있습니다. 아래 명령어를 실행하여 이전버전 커널 데이터를 정리할 수 있습니다. $ sudo apt a..
ionic 하이브리드 앱 개발 - #4 Component 그리드 뷰의 레이아웃을 정밀하게 제어하기 위해 컴포넌트를 페이지에 배치하거나 정렬하기 위해 ionic에서는 그리드 시스템을 사용합니다. FlexBox기반으로 CSS Flexible Box Layout Module을 사용하여 구현합니다. 장점으로는 열을 고정시키지 않고 행안에 원하는 만큼의 자동으로 너비를 지정해서 만들 수 있습니다. 그리드 시스템은 12 개의 열로 구성되며 각 열은 col- 속성을 설정하여 크기를 조정할 수 있습니다. 소스보기 버튼버튼은 앱과 상호 작용하고 탐색하는 필수적인 방법이며 사용자가 탭을 클릭 한 후에 어떤 작업이 발생하는지 명확하게 알려야합니다. 버튼은 텍스트 및 / 또는 아이콘으로 구성 될 수 있으며 다양한 속성으로 향상 될 수 있습니다. 접근성을 위해 버튼은 표준 요소를 사..
ionic 하이브리드 앱 개발 - #3 TypeSCript 기초 TypeScript는 일반 JavaScriipt로 컴파일 되는 아니 정확히 말해서 변환되는 타입 혹은 유형을 가지는 상위 자바스크립트 언어입니다. TypeScript는 특징적으로 정적 타이핑, 클래스, 인터페이스, 제너릭 등을 제공하며 ES6 및 ES7의 거의 모든 기능을 지원합니다. 명시적으로 TypeScript 자체적으로 ES표준을 지원하는 것이 아니라 컴파일 과정을 거치 JavaScript코드 가 ES 표준을 지원한다는 것을 유의해야 합니다.TypeScipt 파일은 .ts 확장자로 저장됩니다. 타입이 지정된 JavaScript는 좀더 명확하게 코드를 이해할수 있으며, IDE를 통해 개발 시, Intelisense(자동완성) 기능을 사용할 수 있습니다 타입정의기본타입은 boolean, number, ..
intel CPU 보안취약점 발견에 따른 대처요령 얼마전 Google Project Zero 팀에서 Intel社, AMD社, ARM社 CPU 제품의 취약점이 발견 되었다고 발표한 이후 파장이 지속되고 있습니다. Google Project Zero 팀 블로그 바로가기 https://googleprojectzero.blogspot.kr/2018/01/reading-privileged-memory-with-side.html 문제가 된 내용은 아래 3가지 이슈로 Variant 1: bounds check bypass (CVE-2017-5753)Variant 2: branch target injection (CVE-2017-5715)Variant 3: rogue data cache load (CVE-2017-5754) 핵심은 CPU의 부채널 공격(side cha..
ionic 하이브리드 앱 개발 - #2 ionic 시작하기 1. ionic 설치하기먼저 Node.js가 설치되어 있어야 합니다. 그런 다음 최신 Cordova 및 Ionic 터미널에 아래의 명령어를 입력하여 설치하십시오. Android 및 iOS 플랫폼 가이드에 따라 개발에 필요한 도구를 설치하십시오. npm install -g cordova ionic 2. 앱 시작하기일반적으로 사용하는 앱 템플릿 중 하나를 선택하여 이오니아 앱을 만들거나 Blank 형태의 빈 앱을 만들수 있습니다. ionic 디자인 마켓을 방문하면 여러 형태의 템플릿 앱을 확인할 수 있습니다. https://market.ionicframework.com/starters/ v1 프로젝트의 경우, --type ionic1 플래그를 사용하십시오. ionic start myApp tabs 3. 앱 ..
Nodejs 날짜 관련 유용한 moment.js 안녕하세요. 남산돈가스입니다. 오늘은 제가 개인적으로 Node JS를 개발하면서 굉장히 유용하게 사용하는 모듈을 소개드리려고 합니다. 데이터들을 처리하는 과정에서 꼭 빠지지않는 것들이 날짜 데이터들이죠. 이 날짜 데이터들을 아주 유연하게 변경 및 비교, 계산까지 해줄 수 있는 것이 이 moment.js라고 할 수 있습니다. 지금부터 moment.js를 설치하고 사용하는 방법에 대해서 간단하게 소개드리겠습니다. 먼저 moment.js 모듈을 설치하기 위해서 npm 명령어를 실행합니다. npm install --save moment moment가 설치되었다면 이제 간단하게 사용법을 익혀보겠습니다. ◆ moment 선언 let moment = require('moment');◆ 현재 시각 console.log..
ionic 하이브리드 앱 개발 - #1 TypeScript 시작하기 TypeScript 설치TypeScript 도구를 얻는 방법에는 크게 두 가지가 있습니다. npm을 통해 (Node.js 패키지 관리자)TypeScript의 Visual Studio 플러그인 설치 Visual Studio 2017 및 Visual Studio 2015 Update 3에는 기본적으로 TypeScript가 포함되어 있으며, Visual Studio와 함께 TypeScript를 설치하지 않았다면 별도록 다운로드 할 수 있습니다. https://www.typescriptlang.org/#download-links npm 사용자는 터미널에 아래와 같이 입렵하여 설치할 수 있습니다. > npm install -g typescript TypeScript 파일 만들기편집기에서 greeter.ts에 다음..

티스토리툴바