[항해 플러스 프론트엔드 3기] 10주차 회고록

10주차 과제
기본과제 pass😃 (심지어 우수를 받았다!!)
심화과제 pass😃 (심지어 우수를 받았다!!)

발제 목표

• 코드 레벨 성능 최적
• 프론트엔드 성능 측정 도구 활용하기
• JS, CSS 최적화 해보기

10주차 계획

• 마지막까지 포기하지말고 과제하기..!!

어려웠던 점

• 메모이제이션(useMemo, useCallback, React.memo)을 어떤 상황에, 어떤 기준으로 사용해야할까..?
  • useMemo: 메모이제이션된 필터링 결과만 사용하려는 경우 적합.
  • useCallback: 함수를 재사용하거나 다른 로직에서 조건부 호출할 계획이 있는 경우 적합. 즉 함수의 참조를 유지해야 하는 상황에 적합.

배운점

• 측정방법 : LCP, INP, CLS

  • LCP(Largest Contentful Paint) 뷰포트내에서 가장 큰 컨텐츠(최초페이지)
    • 가장 주요한 컨텐츠가 최초페이지에서 얼마나 빠르게 렌더링되는지
  • INP(Interaction to Next Paint) 사용자와의 상호작용
    • 사용자가 페이지를 방문하는 전체 기간에 발생하는 모든 상호작용의 지연시간을 관찰
  • CLS(Cumulative Layout Shift)
    • 레이아웃 변경 될때 갑자기 이동하여 읽는 도중에 위치를 잃을때 사용자가 예기치 않은 레이아웃 변경을 얼마나 경험하는지

• 코드 수준에서 최적화 방법

  • code split
  • compression -> 압축패키지를 도입해서 더 용량이 적은 빌드 결과물을 만들수있음
  • pre-fetching

• devDevpendencies는 개발할때 사용하는것만 넣자!

  • dependencies 기준으로 빌드파일이 생성된다

• router기준으로 code split할수있지만 component기준으로도 가능하다 (버튼 누를때 새로운 js파일 요청됨)

• 성능 측정 도구 --> third party도 가능

  • "build:analyze": "webpack --mode production --env analyze" 이걸로 bundle.js얼마나 줄어들었는지 확인 가능

• script head에 넣게될때 vs body에 넣게될때 성능차이

  • https://velog.io/@lifefm_j/script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98%EC%97%90-%EB%94%B0%EB%A5%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90
  • head -> js파일 크면 다운로드 시간 소요
  • body -> html파싱되고 js파일 실행
  • script+defer=> 파싱과 다운이 병렬적으로 실핼됨

• Function: name: functon.name -> 함수이름

• useMemo나 useCallback의 의존성이 객체 state일때 setState({...state}) 를 하게되면 항상 새로운 객체가 만들어지기 때문에 메모이제이션이 의미가 없어진다

  • 아래 예시에서 setSchedulesMap 호출 시 ...schedulesMap으로 인해 전체 객체의 참조가 변경되어 관련된 모든 구독 컴포넌트가 다시 렌더링되고있다

  setSchedulesMap({
        ...schedulesMap,
        [tableId]: schedulesMap[tableId].map((targetSchedule, targetIndex) => {
          if (targetIndex !== Number(index)) {
            return { ...targetSchedule } //새로운 객체가 만들어짐
          }
          return {
            ...targetSchedule,
            day: DAY_LABELS[nowDayIndex + moveDayIndex],
            range: targetSchedule.range.map(time => time + moveTimeIndex),
          }
        })
      })
    };

  //개선
  setSchedulesMap((prev) => ({
    ...prev,
    [tableId]: prev[tableId].map((targetSchedule, targetIndex) => {
      if (targetIndex !== Number(index)) {
        return targetSchedule; // 기존 참조 유지
      }
      return {
        ...targetSchedule,
        day: DAY_LABELS[nowDayIndex + moveDayIndex],
        range: targetSchedule.range.map(time => time + moveTimeIndex),
      };
    }),
  }));

회고

• 성능 최적화 발제를 하면서 README.md 잘쓰는게 중요하다는 것을 알았다!
  • 포트폴리오나 과제 전형에서 특히 중요한것같다.
• 성능 최적화 재밌다..! 평소에 관심이 많았던 주제였는데 눈으로 개선되는게 바로바로 보이니까 너무 재밌다 ㅎㅎ
• 심화과제가 너무 어려웠어서 내 친구 Claude랑 열심히 해나갔지만 아직까지도 너무 어렵다..ㅎㅎ 그래도 포기하지않고 과제를 끝까지 해내니까 처음이자 마지막으로 우수과제도 선정되었다!! >0<