방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 전체 글674 앵귤러 & 파이어베이스 CRUD 하기 기존에 사용했던 샘플코드를 통해서...수정 삭제 및 조건절 검색을 해 보려 하였으나 왠걸? 잘 안되고 에러를 뿜뿜하는 것이다.. 그러고보니 앵귤러 4, 5 , 6으로 넘어가면서 사용하는 문법 스타일이 조금씩 변해서 4에서 되는 코드가 6에서 안되는 경우가 있다. 대표적인 예로 Map 이라던지 filter라던지...이런 기능은 pipe를 통해서 사용해야 되는 것으로 바뀐것 처럼 말이다. 아무튼 간에..angularfire2를 활용해서 crud하는 예제를 앵귤러 6 기준으로 다시 작업하였고, 해당 기능은 서비르로 빼서 관리하는 형식으로 바꾸었다. import { Injectable, Host, Optional } from '@angular/core'; import { AngularFirestore, Angu.. 2019. 4. 28. Angular with firebase 앵귤러에서 파이어베이스에 접속하려면, firebase2 모듈을 활용해서 접속 하였다. 해당 모듈은 rxjs를 포함한 모듈로 간단한 설정만 한다면 쉽게 사용 할 수 있다. 먼저 패키지 인스톨러로 firebase 모듈을 설치한다. npm install @angular/fire firebase --save 그리고 메인 모듈에 임포트와 공급자를 통해서 설정 정보를 주입한다. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AngularFireModule } from 'angular.. 2019. 4. 28. 앵귤러 메모리 db서버 앵귤러로 개발하다보니 웹서버 연동을 하려면 해당 서버에서의 크로스 도메인 문제에 걸리지 않나라는 생각을 하였다. 이를 위해서, 앵귤러에서는 메모리 서버를 제공하는데, 이는 브라우저 캐쉬형태로 데이터를 저장하여 제공하는 일종의 가상서버를 의미한다. 메모리 서버는 http 요청을 중간에 가로채서 해당 역할을 대신 하여준다. 정식명칭은 memory-web-api로 되어 있다. 이를 구현하기 위해서는 패키지를 설치해야 한다. npm i --save angular-in-memory-web-api 콘솔에서 위 명령어를 통해 패키지를 설치하자. 이후, 데이터베이스 역할을 할 타입스크립트를 작성한다. import { Injectable } from '@angular/core'; import {InMemoryDbServ.. 2019. 4. 28. 앵귤러 ViewChildren과 ContentChildren의 차이 View로 시작하는 하위요소 탐색 기능과 Content로 시작하는 탐색기능의 차이를 익히느라 조금 해맸었다. ViewChildren으로 시작하는 요소는 자신의 테그 안에 있는 하위 엘리먼트에만 적용이 된다. 즉, 자기 노드의 자식을 탐색하는 기능이다. 아래 소스코드를 보면, --Html 내용-- parent works! -1111- --Html 내용-- import { Component, ViewChildren, ElementRef,QueryList, ContentChildren, ContentChild,OnInit } from '@angular/core'; import {ImChildrenComponent} from '../im-children/im-children.component'; @Compone.. 2019. 4. 28. 앵귤러 싱글톤 객체 사용법 앵귤러에서 객체를 싱글톤 형식으로 공유하여 사용하는 방법이 있다. 불필요한 객체 사용을 하지 않고, 자주사용하는 객체를 빼서 관리하는 방법이다. 방법은 어렵지 않다. 공통으로 사용 할 서비스를 만들어서 해당 서비스를 컴포넌트 끼리 공유하면 된다. 1. 서비스를 만든다. 2. 메인 모듈 컴포넌트에 서비스를 등록하고 공급한다. 3. 해당 서비스를 받아서 사용한다. 메인 컴포넌트 예제 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { ShareItemService} from './.. 2019. 4. 28. 앵귤러 시작하기 앵귤러를 시작하기 위해서는 먼저 Node.js를 설치하여야 한다. Node.js는 오픈 소스이며, 아래 홈페이지에서 다운받아 설치 할 수 있다. https://nodejs.org/ko/ 노드를 설치하고 나면, Node.js 언어를 사용하는 것이 아니고, Node.js에 있는 패키지 관리 도구를 활용하여 앵귤러 모듈을 설치한다. 아래 명령어를 활용 하여 타입스크립트를 설치 한다. npm install -g typescript 설치가 완료 되면 앵귤러를 사용하기위한 모듈, 앵귤러 CLI를 바로 설치 한다. npm i @angular/cli -g 여기서 npm은 Node.js에서 제공하는 패키지 관리도구 명령어 이며, -g는 글로벌 변수로 사용하겠다는 옵션이다. 프로젝트 생성 및 실행은 - ng new 프로젝.. 2019. 4. 28. 이전 1 ··· 101 102 103 104 105 106 107 ··· 113 다음
