TypeScript8

• [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.

• [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.

• 로컬스토리지에서 배열로 저장하는 방법 목차 목표 JSON Object를 활용하여 localStorage에 배열 형태로 값을 저장할 수 있습니다. 방법 JSON Object를 만들어 저장하고 불러오는 방식으로 구현하였습니다. Set 함수 구현 key에 대응하는 value를 배열로 갖는 JSON Object를 만든 후 JSON String으로 변환하여 localStorage에 저장합니다. function setArray(key, value, limitMax){ var str = localStorage.getItem(key); var obj = {}; try { obj = JSON.parse(str); } catch { obj = {}; } if(!obj){ obj = {}; obj[key] = []; } obj[key].push(value); .. 프로그래밍 & IT 정보/Javascript 2020. 7. 3.

• 자바스크립트 URL 및 E-Mail 링크 자동 생성 [목표] URL 및 E-Mail 입력 시 자동으로 태그 링크를 생성합니다. [방법] 아래와 같이 정규식을 활용하여 태그를 추가합니다. function autoLink(id) { var container = document.getElementById(id); var doc = container.innerHTML; var regURL = new RegExp("(http|https|ftp|telnet|news|irc)://([-/.a-zA-Z0-9_~#%$?&=:200-377()]+)","gi"); var regEmail = new RegExp("([xA1-xFEa-z0-9_-]+@[xA1-xFEa-z0-9-]+\.[a-z0-9-]+)","gi"); container.innerHTML = doc.replace.. 프로그래밍 & IT 정보/Javascript 2020. 7. 3.

• 자바스크립트 JSON 오브젝트 복사 [목표] Javascript에서 객체 원본을 그대로 유지하고자 할 때 복사하여 사용합니다. ※ 대입연산자(=)를 사용할 경우는 참조(Reference) 변수가 되기 때문에 주의가 필요합니다. [방법] 1. 기본으로 제공되는 함수가 없으므로 라이브러리를 구하거나 직접 만들어 써야합니다. function clone(obj) { if (null == obj || "object" != typeof obj) return obj; var copy = obj.constructor(); for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr]; } return copy; } 위와 같은 방법은 value가 object라면 복사가 되지 않고 .. 프로그래밍 & IT 정보/Javascript 2020. 7. 2.

• 자바스크립트 타임스탬프 날짜 변환 [목표] Javascript에서 Timestamp를 원하는 날짜 시간으로 표현합니다. [방법] 1. TimeStamp를 활용하여 Date 객체를 생성합니다. var sampleTimestamp = Date.now(); //현재시간 타임스탬프 13자리 예)1599891939914 var date = new Date(sampleTimestamp); //타임스탬프를 인자로 받아 Date 객체 생성 2. 생성한 Date 객체에서 년, 월, 일, 시, 분을 각각 추출합니다. var year = date.getFullYear().toString().slice(-2); //년도 뒤에 두자리 var month = ("0" + (date.getMonth() + 1)).slice(-2); //월 2자리 (01, 02 .... 프로그래밍 & IT 정보/Javascript 2020. 7. 2.