방문해 주셔서 감사합니다! 항상 행복하세요! - 문의사항은 메일 또는 댓글로 언제든 연락주세요. - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다. - 메일주소 : lts06069@naver.com 앵귤러, 리엑트, 뷰/앵귤러(Angular)14 앵귤러에서 파이어베이스 파일 업로드 앞선 angularfire2 라이브러리가 설치되어 있어야 한다. 메인 컴포넌트에서 AngularFireStorageModule을 임포트한다. import {AngularFireStorageModule} from 'angularfire2/storage'; //파일관련 임포트 ...(생략) @NgModule({ declarations: [ AppComponent ], imports: [ ...(생략) AngularFireStorageModule //파일업로드관련 객체 임포트 ], providers: [AngularFirestore], bootstrap: [AppComponent] }) export class AppModule { } 이후에 생성자를 통해서 AngularFireStorage를 받아서 사용한다... 2019. 4. 28. 앵귤러 & 파이어베이스 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. 이전 1 2 3 다음
