본문 바로가기

TypeScript8

Non-Null assertion:: exclamation mark (!) after variable. 변수 뒤 ! 느낌표 The exclamation mark (!) is the non-null assertion operator in TypeScript. It tells the compiler that we are sure that the value returned by document.getElementById('root') is not null or undefined. const dom = document.getElementById('root')! // dom is not null 2023. 4. 8.
[type] keyof, typeof 를 사용해 type 지정 예시 const keyToPropertyMap = { 'on-off': 'active', name: 'name', appliedTo: 'level', frequency: 'period', }; type SortInfo = { key?: keyof typeof keyToPropertyMap; // asc: boolean; }; 질문 keyof typeof keyToPropertyMap? 답변 type:: keyof typeof keyToPropertyMap = 'on-off' | 'name' | 'appliedTo' | 'frequencyÏ' 설명 이 예에서 keyof typeo.. 2023. 4. 8.
[event] window.matchMedia - mobile detecting: 모바일 확인 하기 + React Hook 1. javascript window.innerWidth and window.innerHeight: to get size of mobile device navigator.userAgent : To check if a device is a mobile device function isMobileDevice() { const userAgent = navigator.userAgent; return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent); } function getScreenSize() { const width = window.innerWidth || document.documentElement.client.. 2023. 4. 6.
[디자인 패턴] Observer pattern export interface Observer { update(): void; } export interface Observable { count: number; map: Record; addObserver(observer: Observer): number; removeObserver(id: number): void; notifyAll(): void; } export class Subject implements Observable { count: number = 0; public map: Record = {}; constructor() {} notifyAll(): void { for (const observer of Object.values(this.map)) { if (observer === undef.. 2023. 3. 5.
DFS: 깊이 우선 탐색- iteration, recursion Chapter 7 DFS DFS - Depth first search function dfsRecursion(adjacencyList: Array, here: number, visited: boolean[]) { visited[here] = true; const currentEdges = adjacencyList[here]; for (let i = 0; i < currentEdges.length; i++) { const connectedVertex = currentEdges[i]; if (visited[connectedVertex] === true) continue; dfsRecursion(adjacencyList, connectedVertex, visited); } } function dfsIterat.. 2023. 1. 15.
1. React 이전 시작하게 된 이유 (수정 중) 기술 부채 + 최적화 현 상황 대시보드가 느리다. why? 기술 부채: Vue2, node 10 what? 무었 때문에 느리냐? Vue2 는 pub-sub 기반 상태 시스템 => destroy 시 모든 리스너들을 클리어 해야 한다 최신 기술 스택이 아니다 보니 virtual dom 등 최적화 부재 VueX 상태 관리 이전 시 장점 속도 향상: 최신 기술이 적용된 빠른 기술 시스템 긍정적인 개발 경험: 시장에서 필요하는 기술 역량 함양 구인이 수월해 진다 Why vue2 component destroy slow? In Vue 2, the process of destroying components in deeply nested structures might be slower due to several fac.. 2022. 12. 19.
가장 높은 우선순위: the highest precedence Precedence That is, the last override block in a config file always has the highest precedence. 시간 따위에서 앞서기 순서 따위에서 앞서기 2022. 12. 19.
Constructor overloading with default 변수 선언 후 생성자에서 할당 class Test { name: string; protected age: number; public id?: string; private password?: string; constructor(name = "", age = 0, id = undefined, password = undefined) { this.name = name; this.age = age; this.id = id; this.password = password; } }생성자에서 선언하고 변수 할당하기 => id, password class Test { name: string; protected age: number; constructor( name: string = "", age: number = 0, p.. 2022. 6. 25.