과제 체크포인트

과제 요구사항

• 배포 후 url 제출 https://yhun940731.github.io/front_6th_chapter4-2/

• API 호출 최적화(Promise.all 이해)

• SearchDialog 불필요한 연산 최적화

• SearchDialog 불필요한 리렌더링 최적화

• 시간표 블록 드래그시 렌더링 최적화

• 시간표 블록 드롭시 렌더링 최적화

과제 셀프회고

기술적 성장

캐싱

캐시 적용을 위해 아래 캐시 클래스를 생성해서 export한다.

import { AxiosResponse } from "axios";
import { Lecture } from "../types";

class CacheStorage<T> {
  private storage: Map<string, T>;
  constructor() {
    this.storage = new Map();
  }

  get(key: string): T | undefined {
    return this.storage.get(key);
  }

  set(key: string, value: T): void {
    this.storage.set(key, value);
  }

  has(key: string): boolean {
    return this.storage.has(key);
  }

  clear(): void {
    this.storage.clear();
  }
}

export const cache = new CacheStorage<Promise<AxiosResponse<Lecture[], unknown>>>();

const fetchMajors = () => {
  if (cache.has(SCHEDULES_MAJORS)) {
    return cache.get(SCHEDULES_MAJORS);
  }

  const promise = axios.get<Lecture[]>(SCHEDULES_MAJORS);

  cache.set(SCHEDULES_MAJORS, promise);

  return promise;
};

const fetchLiberalArts = () => {
  if (cache.has(SCHEDULES_LIBERAL_ARTS)) {
    return cache.get(SCHEDULES_LIBERAL_ARTS);
  }

  const promise = axios.get<Lecture[]>(SCHEDULES_LIBERAL_ARTS);

  cache.set(SCHEDULES_LIBERAL_ARTS, promise);

  return promise;
};

// TODO: 이 코드를 개선해서 API 호출을 최소화 해보세요 + Promise.all이 현재 잘못 사용되고 있습니다. 같이 개선해주세요.
const fetchAllLectures = async () => {
  return await Promise.all([
    (console.log("API Call 1", performance.now()), fetchMajors()),
    (console.log("API Call 2", performance.now()), fetchLiberalArts()),
  ]);
};

이런식의 진행이 맞을지는 모르겠지만.. 캐싱처리를 시도했다..

Set 기반 검색

// Before: O(n) 배열 검색
grades.includes(lecture.grade);

// After: O(1) Set 검색
const gradesSet = useMemo(() => new Set(grades), [grades]);
gradesSet.has(lecture.grade);

// Before: O(n) 복잡도
const isSelected = selectedItems.includes(item);

// After: O(1) 복잡도
const selectedSet = useMemo(() => new Set(selectedItems), [selectedItems]);
const isSelected = selectedSet.has(item);

반복적인 코드에서 배열 순회를 최소한으로 하였다.

디바운싱

const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
};

검색어 타이핑 시 디바운스를 적용하여 리렌더를 줄였다.

학습 효과 분석

성능 최적화를 위해 뭔가 해보려고는 했는데, 결정적인 Dnd 리렌더, 다이얼로그 렌더링 최적화 등 부족함을 느끼고있다. 많은 시간을 할애하지는 못했지만, 나만의 최적화 노하우가 없는 기분...

앞으로 회사 프로덕션 코드도 자세하게 보면서 성능 최적화 방식에 대해 좀 더 노력해봐야할 것 같다.

리뷰 받고 싶은 내용

위에서 진행한 최적화 방식들이 정말 효과가 있을까 싶습니다. 성능을 해치던 가장 큰 원인은 Dnd와 스크롤링 같은데, 저런 자잘한 것도 영향을 끼치긴할까요... 브라우저 성능이 워낙 좋다보니 저렇게 사소한 것에는 조금 회의적인 입장입니다..