본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


앵귤러, 리엑트, 뷰108

Angular Firebase index 관련 오류 그리고 페이징 앵귤러와 파이어베이스를 연동하면서 인덱스 관련 오류를 만났다. FireStore에서 list를 가져 올 때 조건을 달아주면서 명령을 실행하였더니 Query에 Parameter가 많고 Index가필요하다며 문제를 일으켰다. private DataBase : AngularFirestore; private itemsCollection: AngularFirestoreCollection; private items: Observable; private items2 : BehaviorSubject = new BehaviorSubject([]); public list(db_name, param,operator,value){ this.itemsCollection = this.DataBase.collection(db_na.. 2019. 4. 29.
Angular Guard를 활용한 인터셉터 구현 앵귤러에서는 Guard라는 인터페이스를 통해서 통상 서버에서 사용하던 인터셉터 기능을 사용 할 수 있게 해준다. Guard를 사용하기위해서는 직접 코딩해도 상관없지만 명령어를 통해서 쉽게 만들 수 있다. ng g guard angular-aop 만들어진 클래스는 아래처럼 기본적으로 세팅되어 생성된다. import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class AuthGuard.. 2019. 4. 28.
The timestampsInSnapshots setting now defaults to true and you no longer need to explicitly set it 앵귤러를 하다보면 뭔놈의 라이브러리가 이렇게 수시로 바뀌고 업데이트되는지 따라가기가 조금 벅찬것 같다. 이번에 만난 에러는 파이어베이스와 관련된 모듈을 사용하다가 발생된 에러로.. 해당 Firestore라는 객체관련하여 곧 업데이트가 될 꺼니깐 에러에 준비하라는 오류이다. ​ 당장 사용하는데 문제는 없는데 조만간 종료할꺼다 그런의미 이다. ​ 방법은 2가지인데, 파이어베이스 관련된 라이브러리를 package.json에 있는 버전을 낮추는 방법이고, 다른 한가지 방법은 AppModule에서 Provide속성에 곧 사라질 녀석의 값을 대신 주입해 주는 방법이다. ​ 필자의 파이어베이스 관련된 모듈의 버전이 5.8.x버전이였고 이걸 5.7.0정도로 낮추면 해당 오류는 사라진다. 만약 5.8.x버전 이상 사용하.. 2019. 4. 28.
앵귤러 Directive, AppComponent cannot be used.. 앵귤러에서 Directive는 2.0버전 이하일 때는 Component에 포함되어도 정상적으로 작동 하였다. 마찬가지로 ng serve라는 명령어를 실행해도 문제없이 Directive가 잘 작동한다. 그런데, 컴파일을 하는도중 또는 컴파일이 완료된 이후 해당 소스코드를 실행하면 문제가 발생한다. 통상..오류는..Template parse errors 또는 ERROR in AppComponent cannot be used as an entry component 라는 오류가 나온다. 아래 코드를 보면, import { Component, OnInit, Directive } from '@angular/core'; @Directive({ // 2019. 4. 28.
앵귤러에서 파이어베이스 파일 업로드 앞선 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.