본문 바로가기

Programming/Angular

 (26)
ionic 하이브리드 앱 개발 - #3 TypeSCript 기초 TypeScript는 일반 JavaScriipt로 컴파일 되는 아니 정확히 말해서 변환되는 타입 혹은 유형을 가지는 상위 자바스크립트 언어입니다. TypeScript는 특징적으로 정적 타이핑, 클래스, 인터페이스, 제너릭 등을 제공하며 ES6 및 ES7의 거의 모든 기능을 지원합니다. 명시적으로 TypeScript 자체적으로 ES표준을 지원하는 것이 아니라 컴파일 과정을 거치 JavaScript코드 가 ES 표준을 지원한다는 것을 유의해야 합니다.TypeScipt 파일은 .ts 확장자로 저장됩니다. 타입이 지정된 JavaScript는 좀더 명확하게 코드를 이해할수 있으며, IDE를 통해 개발 시, Intelisense(자동완성) 기능을 사용할 수 있습니다 타입정의기본타입은 boolean, number, ..
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. 앱 ..
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에 다음..
ionic API 호출하기 Ionic CLI를 사용하여 Ionic을 시작하고 실행하는 것은 웹 개발 경험이있는 사람에게 매우 익숙합니다. 이번에는 백엔드 API를 호출하는 방법을 살펴 보겠습니다. ionic 시작하기Ionic CLI의 ionic start 명령어를 사용하여, 빈 템플릿 앱을 만들 수 있습니다. ionic start apiApp blank ionic 앱의 프로젝트 구성은 Home page를 비롯하여 몇 가지 기본 골격이 있습니다. 새로운 Provider 생성하기API에 대한 HTTP 요청을하는 데 사용될 새 Provider(Service)를 추가하는 방법을 살펴 보겠습니다. ionic CLI 명령어에서 ionic g를 사용하여 자동 Provider를 쉽게 만들수 있습니다. 프로젝트 디렉토리 (cd apiApp)로 변..
ionic 데이터로 작업하기 : Service 와 Nav Params ionic앱 을 통해서 다른 페이지 혹은 컴포넌트로 데이터를 전달해야하는 상황이 생깁니다. 여러 뷰와 사용자의 상호작용으호 구성되어 단독의 페이지 혹은 뷰만 가지고는 다양한 기능을 구현할 수 없습니다. 서버의 REST API를 통해 가져온 데이터, 사용자의 입력 데이터, 혹은 클라이언트 환경에서 가져온 데이터등을 가져와서 여러곳으로 전달할 경우가 생깁니다. 이번에는 ionic 앱에서 service 및 navparams 의 파라메터 사용법을 살펴보도록 하겠습니다. Angular Service 사용하기Angular 2 의존성 주입 기능을 사용하여 IceCreamService를 주입가은한 형태로 만들어 보겠습니다. 첫째, 서비스의 골격은 Angular 's Injectable 선언하고 @Injectable 데..
Ionic 3 – Lazy loading & Page navigation Ionicframework는 하이브리드 모바일 앱 개발에 가장 많이 사용되는 프레임워크입니다. Ionic 3 릴리스부터는 프레임워크 자체적으로 page의 lazy loadingd을 제공합니다. 이 글에서는 하이브리드 모바일 앱에서 lazy loading page를 사용하는 방법에 대해 알아 보겠습니다. Lazy Loading 이란?간단히 말하면 Lazy Loading은 Component를 필요할 때 즉시 로드하는 방식이라고 말할 수 있습니다. Angular 2+ 를 사용하면 기존보다 모듈화되고 확장성이 뛰어난 웹어플리케이션을 쉽게 만들 수 있습니다. 웹어플리케이션을 여러 기능에 대한 모듈을 만들 수 있으며, 사용자가 어플리케이션을 참조할 때 즉시 로드 할 수 있습니다. 즉, 사용자가 필요없는 compon..
Ionic3 + three.js 로 AR 하이브리드 앱 만들기 기술검토 결과 중간리뷰 이번에 플랫폼사업팀에서는 애자일 방법론에서 쓰이는 플래닝 포커 앱을 만들기로 했는데요 플래닝 포커란? 이 링크 설명을 참고해보세요 :) 기왕 앱을 만드는 김에 새로운 기술에도 도전해볼 겸 AR 하이브리드 앱으로 만들어보는게 어떻냐는 제안을 하게 되었습니다. 일주일간의 기술검토 후, 한 달 정도의 기간으로 앱을 만들기로 했는데요 (하루에 한시간씩. 다른 업무를 하면서 만들어야 하기 때문입니다.)아직 성공하지는 못했지만 지금까지의 기술 검토 과정을 공유합니다. 플래닝 포커 앱을 AR로 만들면 어떨까 하는 생각은 조지아텍 학생들이 연구과제로 만든 듯한 이 앱, argon.js 를 보고 떠올렸습니다. (앱스토어에서 argon 으로 검색하시면 나옵니다) argon 앱의 샘플 중 한 장면 argon.js 는 간단히..
[Angular2+] 유용한 Angular2+ 라이브러리 모음 * 이 문서는 지속적으로 업데이트 될 예정입니다 이번에 Angular2 로 프로젝트를 진행하면서 레퍼런스가 없어서 많은 어려움을 겪었습니다. 다행히 능력자님들이 이미 만들어 배포해두신 Angular2+ Component 들이 많아서 큰 도움을 받았습니다. 그 중 몇 개를 소개하려고 합니다. Angular 2+ Components & Libraries http://laptrinhx.com/topic/26993/angular-2-components-libraries#ui-components 유용한 Angular2 컴포넌트 라이브러리들을 링크로 정리한 문서 (아래에 소개할 링크도 일부 포함되어 있습니다) 필요한 부분을 찾을 때 참조하면 좋습니다. Swiper https://github.com/ksachdeva..

티스토리툴바