Angular.js16 @capacitor/filesystem, jsPDF 이용시, 앱에서 pdf 생성 안되는 오류 개요: 하이브리드 앱을 제작하며, 앱에서 @capacitor/filesystem 플러그인을 사용하였지만, jsPDF로 제작 한 pdf가 안열리는 오류가 생겼다. 문제점: 웹에선, jsPDF로 생성한 doc중 blob 형태의 데이터를 넘겨받아 pdf를 생성시킨다. 하지만 앱에선 blob 이 아닌 string형태로만 데이터를 받아 pdf를 제작할 수 있다는점! (@capacitor/filesystem 한정) 그렇다면 앱에선 jsPDF로 그림 및 그래프를 생성할 수 없나? => 아니오 blob 형태의 데이터를 string 형태로 인코딩 한 뒤, 인자값으로 넘겨주면, 앱 형태에서도 그래프나 그림을 제작 할 수 있다! 예시 // pdf 데이터를 doc 변수에 할당 doc = this.makeTable(); // .. 2024. 4. 1. [Angular.js] kakao map에 원하는 위치 마커 표시하기 개요: 재난배상책임보험을 갱신해야 하는 시설물을 marker 표시하여 설계사나 ga회사들의 영업을 돕기 위한 프로젝트를 진행 1. index.ts에 scripts 추가 2. map 을 넣을 div 생성 3. 지도 생성 및 원하는 x,y축 데이터를 받아와 마커 생성 export class FacilitiesLifeMapPageComponent extends SubscriptionBaseComponent implements OnInit { @ViewChild('mapRef', { static: true }) private mapRef: ElementRef; // html에서의 mapRef ngOnInit(): void { this.initializeMap(); } constructor( private ren.. 2024. 2. 20. firebase용 cloud functions - Firebase 기능과 HTTPS 요청에 의해 트리거되는 이벤트에 응답하여 백엔드 코드를 자동으로 실행할 수 있는 서버리스 프레임워크. - js 또는 ts 코드는 google cloud service에 저장되고 관리형 환경에서 실행 장점: 자체 서버를 관리하고 크기를 확장할 필요 없음 예시코드) Firebase Cloud Functions에서 Firestore의 'users' 컬렉션에 문서가 생성 또는 업데이트 될 때, 'userWrittenWithNotificationHandler' 함수를 실행하도록 하는 Firebase Cloud Firestore 트리거 // 코드 예시 import { userWrittenWithNotificationHandler } from './notification/user.. 2024. 1. 17. 전체적으로 사용되는 shared [뒤로가기] 버튼 제작 앵귤러에선 directive 라는게 있는데, directive란 html의 확장 기능으로, 앵귤러에서 특정 요소를 선택하고 해당 요소의 동작을 조작하기 위해 사용됩니다. 디렉티브는 html 요소에 앵귤러의 특별한 동작을 부여하는 역할을 하고, 디렉티브를 사용하여 웹 페이지의 동적인 부분을 생성하고 관리가 가능합니다. 내장 디렉티브 종류로는 ngFor 나, ngIf 가 있습니다. (vue.js 같은 경우엔 v-if 나 v-for 같은 디렉티브와 같은 움직임을 해요.) 이런 걸 나만의 라이브러리로 조금씩 만들면 어떨가 싶어서 만들어 보고 있는데, 첫번재로 뒤로가기 버튼 어디서든 이용할 수 있게 끔 뒤로가기 directive를 만들었습니다. import { Location } from '@angular/com.. 2023. 9. 14. 옵저버블을 promise로 변환하고 boolean 형태의 값 출력 우리 회사와 다른 회사 간의 B2B 계약을 맺었고, 계약을 맺은 직원들에게 우리 어플리케이션의 구독 서비스를 기간 동안 무료로 배포했습니다. 이에 대해 제작하고 적용한 기술에 대해 작성하겠습니다. 새로운 고객 중 계약 목록에 있는 고객들은 자동으로 구독을 시키고, 구독 만료 기간을 설정하는 기술을 제작했습니다. 이를 위해 우리 회사 제품의 프론트는 AngularJS로 제작되었으며, 많은 Observable 타입의 객체들이 있어 동기적으로 처리하기 위해 Promise로 변환하여 이용해야 했습니다. 아래는 Observable 타입을 Promise로 변환하는 예시입니다. import { Observable } from 'rxjs'; function convertObservableToPromise(observa.. 2023. 6. 13. Angular Guard에 대하여 Angular에서 Guard란.. 라우팅 시점에서 실행되는 중간 역할을 하는 기능 특정 조건을 검사하여 사용자가 특정 라우트로 진입할 수 있는지 없는지를 결정함 ex) 사용자의 권한, 인증상태, 데이터 로딩 등 Guard 사용법 1. Guard 클래스 생성 ng generate guard {guard-name} ng generate guard {guard-name} 2. CanActivate 인터페이스 구현 CanActivate 메서드는 라우팅을 허용할 지 여부를 결정하는 논리를 작성하는 곳 3. Guard 등록 Guard 클래스를 모듈에 등록하고, Guard 클래스를 사용하려는 라우터 또는 라우터 그룹에 등록해야 함. 일반적으로 RouterModule.forRoot() 또는 RouterModule.fo.. 2023. 5. 30. 이전 1 2 3 다음
