[4팀 김수민] Chapter 4-2 코드 관점의 성능 최적화

[nimusmix]

과제 체크포인트

https://nimusmix.github.io/front_6th_chapter4-2/

과제 요구사항

• 배포 후 url 제출

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

• SearchDialog 불필요한 연산 최적화

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

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

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

과제 셀프회고

기술적 성장

사실 저는 React.memo를 써본 적이 크게 없고.. 실무에서 그렇게 필요하다고 생각해본 적도 없는데요!
dnd를 처음 다뤄보면서 이런 컴포넌트에서는 컴포넌트를 잘 쪼개고 메모이제이션하는 것이 참 중요하구나 생각했습니다!
준일 코치님이 처음에 과제로 내려고 하셨다던 웹 빌더 같은 경우도 이 부분을 최적화하는 것이 중요한 부분일 것 같아요
도메인마다 중요하게 여겨야 하는 부분이 다르다는 것을 깨닫게 되었습니다!

코드 품질

function createFetchWithCache() {
  const cache = new Map<string, unknown>();

  return async function fetchWithCache<T>(
    fetchKey: string,
    fetchFn: () => Promise<T>
  ): Promise<T> {
    if (cache.has(fetchKey)) {
      return cache.get(fetchKey) as T;
    }

    const result = await fetchFn();
    cache.set(fetchKey, result);
    return result;
  };
}

const fetchWithCache = createFetchWithCache();

export default fetchWithCache;

• 캐싱을하며 fetch하는 함수를 만드는 createFetchWithCache 함수를 구현했습니다.
• 뿐만 아니라 하단에서 해당 함수를 만들어서 싱글톤으로 사용했습니다.
• 추후 시간이 된다면 staleTime을 설정하여 cache된 데이터를 일정 시간 단위로 초기화할 수 있을 것 같습니다!

과제 피드백

어디에선가 프론트엔드 사이드프로젝트로 트렐로 만들기를 해보는 게 엄청 좋다!라고 이야기를 들어봤었는데요.
그걸 보면서 dnd를 어떻게 잘 컨트롤할까? 라는 생각을 많이 했었는데,
이번 과제에서 구현해보지는 않았지만 최적화하면서 경험해볼 수 있어서 좋았어요!
다음부터는 dnd를 직접 다뤄보고 싶습니다아ㅎㅎㅎ