[TIL] 0518

JS 성능&사용성 개선 방법

api호출 성능 최적화 방법

1. 디바운스 & 쓰로틀링
2. 브라우저 스토리지 캐시 (세션 스토리지)

사용성 개선

1. 자동 포커싱 - 값이 있으면 가장 뒤로가게
2. 창 닫았다 켜도 기존 상태가 유지되도록 (로컬 스토리지 이용)

input cursor 텍스트 가장 끝으로 자동 포커싱하기
input태그에 autofocus속성 적용 후
input.setSelectionRange(maxLength, maxLength)실행

새로 알게된 TS문법

여러 종류의 제네릭 타입

1. Partial

• 특정 타입의 부분 집합을 만족하는 타입을 정의할 수 있다.
• Partial<객체 타입>

2. Pick

• 특정 타입에서 몇 개의 속성을 선택하여 타입을 정의할 수 있다.
• Pick<객체 타입, 원하는 타입의 키>

3. Omit

• 특정 속성만 제거한 타입을 정의할 수 있다.
• Omit<객체 타입, 제거할 타입의 키>

keyof

• Object의 key들의 lieteral 값들을 가져온다.
• ts에서 객체의 key를 동적으로 사용하기 위해선 key의 타입을 기존의 string에서 keyof를 이용하여 string literal로 바꿔줘야한다.

커스텀 이벤트의 type 설정 방법

• WindowEventMap에 커스텀 이벤트의 타입을 추가해준다(전역으로 선언해줘야함).

  declare global {
    interface WindowEventMap {
      'route-push': CustomEvent<{ nextUrl: string }>;
      'route-replace': CustomEvent<{ nextUrl: string }>;
    }
  }