[LAB-18] 성능개선을 위한 코드리뷰 요청

DoctorK4 commented 1 year ago

질문 작성자

김동률

문제 상황

성능 개선을 위해 browser-image-compression 라이브러리, Recoil-Persist 등을 사용하여 어느 정도 개선을 시켰으나, 만족할만한 성능까지 올라오진 않은 상황입니다. 이에 전반적인 코드 리뷰를 요청 드리면서, 추가로 성능을 개선할 수 있는 부분이 있을지 조언을 받아보고 싶습니다.
현재 브라우저 inspect → 리액트 컴포넌트 툴로 확인해보면 파란색으로 리렌더링이 되는 영역이 많게 느껴졌습니다. 저희는 이 큰 리렌더링 영역이 성능저하의 주요 원인 중 하나라고 생각하고 있으나, 이를 어떻게 어떤 식으로 수정해나가야 할 지 방향을 잡는 데에 어려움을 갖고 있습니다. 관련된 조언을 부탁드립니다.
Recoil를 상태관리를 했는데, 공통적으로 재사용하는 상태를 로그인 여부와 로그인된 회원의 정보 등 총 4가지로 잡았습니다. 상태관리와 Recoil이 처음이다보니, 저희가 작성한 코드처럼 활용하는 것이 맞는 방법인지, 또 이 4가지 외에 추가로 상태관리 해야하면 좋을 부분이 있을지도 여쭤보고 싶습니다.
현재 성능 점수 (Lighthouse 이용)
- home : 68점
- HotArticles : 83점
- writeArticle : 86점
- detailArticle : 76점
- Mypage : 72점

추가로 궁금한 사항

[x] 지난주에는 각 팀원별로 타입스크립트 공부를 진행했고, 이번주부터는 공부 내용을 서로 공유하면서, 감자마켓 프로젝트를 마이그레이션 해보려고 합니다. 마이그레이션 시 let, const 로 선언한 변수들의 타입을 지정하는 것 이외에 특히 유의해야하는 부분이 있을까요?
[x] 로그아웃 버튼을 구현하는 코드 중, 권한 정보를 초기화하고, 홈 도메인(’/’)으로 이동하는 작업을 하고자 리액트 라우터의 useNavigate 메서드를 활용하고자 하였으나 오류메시지도 뜨지않고 동작하지 않습니다. 그래서 window.location.replace 메서드로 구현하였는데, useNavigate가 해당 코드에서 동작하지 않는 이유가 무엇일까요?

src/component/LogoutButton.jsx 내

const handleLogout = async () => {
    try {
      await auth.signOut();
      setUserUid(null);
      setUserInfo({
        location: "",
        agree: "",
        email: "",
        nickname: "",
        phoneNumber: "",
        profileImage: "",
      });
      setShowToggle(false);
      window.location.replace("/"); // 이 부분을 리액트라우터의 navigate('/')로 했을 때는 동작하지 않습니다.  
    } catch (error) {
      console.error(error);
    }
  }

프로젝트 저장소 URL

POTATO-MARKET-main.zip

환경 정보

운영체제 정보: Windows, macOS
Node.js 정보: v18.12.1
라이브러리 정보
- React v18.2.0
- React-router v6.8.2
- Recoil v0.7.7
- Firebase v9.17.2

yamoo9 commented 1 year ago

@DoctorK4 님 코드 리뷰에는 적지 않은 시간이 필요하므로 검토 후, 정리하여 답변을 달도록 하겠습니다. 🤔

yamoo9 commented 1 year ago

성능 개선 결과

Lighthouse 검사 결과는 다음과 같습니다.

홈 페이지 : 리팩토링 이전 68점 → 리팩토링 이후 97점

Lighthouse Scoring Calculator 점수 결과는 아래와 같습니다. 😃

성능 개선을 위해 수행한 일

코드 스플리팅
- 라우트 별 페이지 컴포넌트 코드 분할 (엔트리 파일 크기 − 코드 분할 전(1,459.14 KB) → 코드 분할 후(8.81 KB로 크기 감소))
- 컴포넌트 코드 분할 (Comment : 사용자가 "채팅하기" 버튼 누를 때 동적 호출 처리)
에셋 최적화
- src/assets 리소스 최적화 (-67.99% 크기 감소)
콘텐츠 레이아웃 이동 변경(CLS) 최소화
- App.jsx 파일 코드 → Outlet 조건 처리 제거

아래 영상은 성능 개선 적용 후, 배포를 위해 빌드(build)하는 화면입니다.

https://user-images.githubusercontent.com/1850554/231405393-eaa2e237-ae3d-4378-9be4-f2b4069d6bef.mp4

최적화 수행을 위한 이력

POTATO-MARKET-review-by-yamoo9.zip 파일을 다운로드 받아 커밋 이력을 검토해보세요.

질문에 대한 답변

성능 개선을 위해 browser-image-compression 라이브러리, Recoil-Persist 등을 사용하여 어느 정도 개선을 시켰으나, 만족할만한 성능까지 올라오진 않은 상황입니다. 이에 전반적인 코드 리뷰를 요청 드리면서, 추가로 성능을 개선할 수 있는 부분이 있을지 조언을 받아보고 싶습니다.

만족할 만한 성능이 나오지 않은 이유는 최적화를 수행하지 않았기 때문입니다. 첨부된 압축 파일을 다운로드 받아 커밋 이력을 검토합니다.

현재 브라우저 inspect → 리액트 컴포넌트 툴로 확인해보면 파란색으로 리렌더링이 되는 영역이 많게 느껴졌습니다. 저희는 이 큰 리렌더링 영역이 성능저하의 주요 원인 중 하나라고 생각하고 있으나, 이를 어떻게 어떤 식으로 수정해나가야 할 지 방향을 잡는 데에 어려움을 갖고 있습니다. 관련된 조언을 부탁드립니다.

우선 Recoil을 효율적으로 활용하는 코드가 필요합니다. 1차적으로 커밋 이력에 관련 정보를 작성 했으니 살펴보세요.

Recoil를 상태관리를 했는데, 공통적으로 재사용하는 상태를 로그인 여부와 로그인된 회원의 정보 등 총 4가지로 잡았습니다. 상태관리와 Recoil이 처음이다보니, 저희가 작성한 코드처럼 활용하는 것이 맞는 방법인지, 또 이 4가지 외에 추가로 상태관리 해야하면 좋을 부분이 있을지도 여쭤보고 싶습니다.

Recoil의 Atom만 활용하고 있는데 Selector도 활용해보세요. 🤔

yamoo9 / likelion-FEQA

[LAB-18] 성능개선을 위한 코드리뷰 요청 #286