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

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

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


앵귤러, 리엑트, 뷰/앵귤러(Angular)14

Angular F5 404, Angular Refresh 404(앵귤러 새로고침 404, 앵귤러 F5 404 ) 앵귤러를 개발하다보면 F5키나 새로고침 키를 눌러서 404 오류가 나는 경우가 존재한다. 앵귤러에(2.0 이상)서는 페이지를 한번에 전부 로드하고 사용자에게 보여주는 방식이므로 새로고침을 누를경우 해당 동작중인 서버로 url을 호출하기 때문이다. 즉, 가상의 주소를 매핑해놨는데....새로고침 하면 실제 주소로 이동하기 때문이다. 이를 방지하기 위해서는 라우팅을 관리하는 모듈에서 아주 간단한 세팅만 해 주면 된다. 아래 라우팅과 관련된 샘플 모듈 코드를 보면, import { RouterModule,Routes} from '@angular/router'; //라우터 //.. 생략 const router : Routes = [ //통상적인 라우팅 객체 모습 {path : '' , component : 컴포넌.. 2019. 9. 17.
RXJS, Subscribe에 대한 중요 (무한구독의 방지) 앵귤러를 활용하여 개발하다보면 심심치 않게 나오는 메소드가 subscribe로 시작하는 메소드 이다. subscribe는 구독하다 라는 의미인데, 기능 또한 동일한 기능을 발휘한다. 대부분 subscribe로 시작되는 메소드는 Rxjs를 기반으로 만들어졌다. 파이어 베이스에 접속해서 데이터를 가져오는 모습을 예로 살펴 보자. private itemsCollection: AngularFirestoreCollection; //조회한 대상이 담긴 리스트 selectList(){ //리스트에 담는 메소드 this.itemsCollection = this.DataBase.collection('조회대상', (ref) =>ref); } alterItem(changeItem : any){ //데이터를 바꾸는 메소드 t.. 2019. 4. 29.
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.