본문 바로가기

Dev Repository

[6] Ionic Camera 기능 구현 Ionic Framework & Firebase를 기용하여 현재까지 구현된 기능은 사용자 등록, 로그인, 사용자 리스트 출력 기능 입니다. 이번 포스팅에서는 Cordova의 Camera Plugin을 설치하여 갤러리에서 사진을 선택하고 Firebase Storage에 업로드하여 페이지에 출력해보는 임의의 사용자 프로필 화면을 구현해 보도록 하겠습니다. Camera Plugin 추가 (1) Plugin, Package 설치사진 찍기 및 업로드 기능을 구현하기 위해 Camera Plugin과 Package를 추가해야 합니다. $ionic plugin add cordova-plugin-camera --save$npm install --save @ionic-native/camera(2) 프로젝트에 Module .. 더보기
[5] Ionic & Firebase 사용자 리스트 출력 이전 포스팅에서 사용자 로그인 및 등록 페이지를 구현하고 Firebase console에서 등록한 사용자에 대한 기록을 확인 하였습니다. 이번 포스팅에서는 등록되어 있는 사용자리스트를 출력하는 사용자 리스트 페이지를 구현해보도록 하겠습니다. 사용자 리스트 출력 기능 구현프로젝트를 생성하면 기본적으로 추가되어 있는 list폴더에서 기능구현을 진행하도록 합니다. 사용자가 등록하는 시점에서 사용자 Email과 Uid 값을 Database에 저장하여 출력하는 과정입니다. 기존에 설치했던 angulrFire2 모듈에 포함되어 있는 AngularFireDatabase, FirebaseListObservable 기반으로 로직을 구현하게 됩니다. (1) list 페이지 구현 src/pages/list/list.html.. 더보기
[4] Ionic & Firebase 로그인 기능 구현 이번 포스팅에서는 Ionic Framework와 Firebase의 이메일 인증 서비스를 활용하여 로그인 기능을 구현하는 방법을 소개하고자 합니다. Firebase Console에서 이메일 로그인을 위한 설정을 한 후, 사용자 정보를 입력받아 등록하는 등록 페이지를 구성하고 등록된 정보를 이용하여 로그인하는 페이지를 구현하는 순서로 진행하도록 할 것입니다. Firebase 로그인 방법 설정Firebase Console로 이동하여 로그인 방법을 이메일/비밀번호 방식으로 설정하도록 합니다. Authentication 메뉴에서 '로그인 방법' 카테고리로 이동 하여 '이메일/비밀번호' 선택한 후 사용설정을 황성화 시켜주고 저장합니다. 본격적으로 로그인을 위한 화면 구성및 로직을 구현하고록 하겠습니다. ionic .. 더보기
[3] VS code에 Ionic 디버깅 환경 구성 Ionic 프로젝트를 좀 더 수월하게 진행하기 위해 Cordova Tools Extension을 설치하여 Emulator를 구동시켜 디버깅환경을 구성할 것입니다. VS code IDE 에서 Cordova Tools Extension을 설치하여 Cordova 구성요소를 추가하고 IOS 플랫폼 환경의 Emulator를 설치하고 실행시켜 보도록 하겠습니다. Cordova Tools Extension 설치Cordova Tools Extension: https://marketplace.visualstudio.com/items?itemName=vsmobile.cordova-tools 위의 주소에 Cordova 디버깅 환경에 대한 구성요소를 추가하도록 도와주는 Extension설치 방법이 명시되어 있습니다. 우선적으.. 더보기
[2] ionic 3 Ionic 3 & Firebase 연동 Ionic과 Firebase를 이용하여 가장 기본적인 기능들이 들어간 간단한 하이브리드 앱을 만들어 보는 것을 목적으로 포스팅을 진행하기로 하였습니다. Firebase는 모바일 앱 개발 백엔드 서비스를 제공하는 BaaS(Backend as a Service ) 플랫폼으로 사용자 관리, 푸쉬 알림, 데이터베이스 등의 백엔드 기능을 API 형태로 제공하여 비용과 시간을 최소화하여 개발 할 수 있도록 도움을 줍니다. 이번 포스팅에서는 Ionic 프로젝트에서 Firebase를 사용하는 방법과 Firebase 설정에 대한 부분을 다룰 것 입니다. Ionic 프로젝트에 Firebase 설치Ionic 프로젝트 경로에서 다음의 명령어를 통해 Firebase 및 Angular 공식 라이브러리인 AngularFire2를 .. 더보기
[1] Ionic 3 프로젝트 생성 및 실행 Ionic 3 & Firebase 를 이용하여 기본적인 기능을 구현한 앱을 만드는 과정의 첫번째 과정으로 Ionic 프로젝트 생성과 실행 방법을 포스팅하였습니다. 또한 이어질 Ionic & Firebase포스팅 목록은 2017년 8월 기준의 버전으로 작성된 글입니다. 작년에 다른 계정에 작성해 두었던 글을 옮겨 왔습니다. 이점 참고해 주시면 감사하겠습니다. Ionic 설치하기NPM을 이용하여 Ionic CLI와 Cordova를 설치하기 때문에 우선적으로 NodeJs가 설치되어 있어야 합니다. NodeJs 를 설치하면 NPM 또한 자동으로 설치됩니다. NodeJs 설치: https://nodejs.org/ko/ 이후 터미널에서 NPM 으로 Cordova와 Ionic CLI를 설치합니다. ionic은 내부적.. 더보기
ExpressJS::개발환경 구축과 실행 NodeJS를 위한 빠르고 개방적인 간결한 웹 프레임워크인 ExpressJS의 실습을 위한 간단한 개발환경 구축 및 실행방법에 대하여 정리해 보았습니다. NodeJS 설치하기Express를 위해서는 NodeJS가 우선적으로 설치가 되어 있어야 합니다. https://nodejs.org/en/ 에서 다운로드 받은 후 간단한 절차를 통해 설치가 가능합니다. terminal에서 node 버전확인을 통해 설치가 제대로 되었는지 알 수 있습니다. $ node -v node version: 6.10.2 프로젝트 생성하기개발툴에서 ExpressJS 실습을 위한 프로젝트를 생성해줍니다. 저의 경우 visual studio code(vscode)에서 started_express 라는 이름의 폴더를 생성해 주었습니다. 개.. 더보기
Javascript::Promise에 대한 이해 전통적인 callback 패턴function mySandwich(param1, param2, callback) { alert('Started eating my sandwich.\n\nIt has: ' + param1 + ', ' + param2); callback();} mySandwich('ham', 'cheese', function() { alert('Finished eating my sandwich.');});Colored by Color Scriptercs위와 같은 형식들로 자바스크립트에서 비동기 프로그래밍을 위한 패턴으로 callback을 사용했습니다. 하지만 이러한 전통적인 callback 패턴에는 몇가지 단점이 있습니다.비동기 처리 중에 발생한 오류를 예외처리 하기가 까다롭다. (http:/.. 더보기
D3 :: select(), selectAll()을 이용한 문서요소 만들기 D3는 'Data-Driven Document' 라는 이름에서도 알 수 있듯이 다양한 방법으로 쉽게 Data를 DOM element에 쉽게 바인딩 할 수 있기 때문이다. Data를 바인딩하여 출력물을 내는 간단한 예제를 통해서 D3의 기본적인 구조, selection 객체, select & selectAll 메소드 등을 알아본다. 현재 D3 v4가 release되었지만 v3, v4의 비교를 통한 공부를 하기위해 v3으로 진행한다. 기본개념에 대한 예제123456789101112131415161718192021222324252627 var theData = [1, 2, 3, 4 ,5]; var selection = d3.select("body") .selectAll("p") .data(theData) .e.. 더보기
Angular2 :: Data Binding(데이터 바인딩) 데이터 바인딩 이란? Data Binding 은 Angular에만 존재하는 개념이 아닙니다. 기존의 공학적 측면에서의 Data Binding은 응용 프로그램의 UI와 비즈니스 논리를 서로 연결하는 프로세스입니다. 마찬가지로 로직을 담당하는 컴포넌트와 UI를 나타내는 Template 를 구성요소로 하는 Angular에서의 Data Binding은 이 둘 사이의 '통신(커뮤니케이션)' 이라고 표햔하는 것이 조금더 자연스러울 수도 있을 것 같습니다. 결론적으로 Angular와 같은 Framework 관점에서 Data Binding은 데이터 및 템플릿과 비즈니스로직(컴포넌트) 간의 상호작용 입니다. 또는 모델과 뷰, 구성요소간의 데이터 동기화 라고 표현해도 좋을 것 같습니다. 동적 콘텐츠에 관련된 모든 것에는 .. 더보기

티스토리툴바