ionic5

• [Ionic4] ion-select customizing(커스터마이징) 방법 Ionic4에서 기본으로 제공하는 select component가 마음에 들지 않아서 변경해 보았습니다. 기존에 적용되어 있던 select icon을 제거하고 새로운 icon으로 대체했습니다. const ionSelects = document.querySelectorAll('ion-select'); let img = null; ionSelects.forEach((ionSelect) => { const selectIconInner = ionSelect.shadowRoot.querySelector('.select-icon').querySelector('.select-icon-inner'); if (selectIconInner) { selectIconInner.attributes.removeNamedItem(.. 프로그래밍 & IT 정보/Etc. 2020. 7. 4.

• [Ionic4] Scroll Event를 활용한 데이터 추가 로딩 방법 Scroll을 맨 아래까지 이동했을 경우 자동으로 데이터가 로딩되도록 하는 방법입니다. Ionic4에서 ion-infinite-scroll 태그를 제공하지만 원하는대로 동작하지 않는 경우가 있어서 직접 구현했습니다. 1. Scroll Event를 받아 처리하는 코드를 작성합니다. private scrollDepthTriggered = false; async scrollingToBottom($event: any) { if (this.scrollDepthTriggered) { return; } if ($event.target.localName != "ion-content") { return; } const scrollElement = await $event.target.getScrollElement(); c.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.

• [Ionic4] Android MainActivity.java 변경 필요 시 적용 방법 제공되는 Plugin이 없거나 불가피하게 Android의 MainActivity.java 변경이 필요할 경우 적용 가능한 방법으로 별도의 java 파일을 만들어 build 전 덮어 씌울 수 있습니다. 1. ~/scripts 경로에 적용하고자 하는 MainActivity.java 파일을 작성합니다. 보통은 기존 파일에 내용을 추가하거나 일부 제거하는 목적이므로 android로 build 후 해당 위치(~/platforms/android/app/src/main/java/~)로 가서 MainActivity.java 파일을 가져와서 수정합니다. 2. ~/scripts 경로에 updateMainActivity.sh의 이름으로 shell 파일을 생성합니다. #!/bin/bash cp scripts/MainActiv.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.

• [Firebase/Angular] Cloud Firestore Pagination Query Example Angular에서 Firebase Cloud Firestore DB 데이터 조회 시 Paging 처리를 좀 더 효과적으로 하고자 할 때 참고 바랍니다. import { AngularFirestore } from '@angular/fire/firestore'; import { first } from 'rxjs/operators'; import * as firebase from 'firebase'; export const dbRootPath: string = "rootPath"; // 조회 타입 정의 enum queryType { "init", "after" }; type QueryType = keyof typeof queryType; // 기본 셋팅 정의 export interface QueryConfig.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.

• [Firebase/Angular] Cloud Firestore Transaction Example Angular에서 Firebase Cloud Firestore의 Transaction 기능을 좀 더 효과적으로 활용하고자 할 때 참고 바랍니다. import { AngularFirestore } from '@angular/fire/firestore'; import * as firebase from 'firebase'; export const dbRootPath: string = "rootPath"; // 트랜잭션 타입 정의 enum transactionType { "set", "update", "delete" }; type TransactionType = keyof typeof transactionType; // 트랜잭션 아이템 정의 export interface TransactionItem { type.. 프로그래밍 & IT 정보/Etc. 2020. 7. 3.