상세페이지 개선기

이번에는 상세페이지 개선한 이야기를 작성하겠습니다!

모든게 다 기억나지는 않지만.. 최대한 기억을 짜내서....

---

문제라고 생각한 것

해제되지 않고 있던 이벤트 리스너

 

- 이벤트 리스너를 해제하는 로직이 있었지만 lodash 의 throttle 함수를 감싸게 되면서 서로 다른 함수 취급이 되어 이벤트 리스너가 제대로 해제되고 있지 않았다.

 

const fn1 = () => {...}

const a = throttle(fn1, ms);
const b = throttle(fn1, ms);

// 여기서 a 와 b 는 같아보이지만 서로 참조하는 값이 달라져서 a !== b 가 되게 된다

 

 

심한 props drilling

 

- 옛날 Presentational and Container Components 구조의 잔재인걸로 추정되는.. 루트 컨테이너에서 api 를 호출하고 모든 데이터를 props drilling 해서 내리고 있었다. 리덕스를 사용중인데도 불구하고!

- 과한 props drilling 의 문제는 코드의 특정 부분을 찾기가 힘들다는 점이다. 말단 컴포넌트에서 이 props 가 뭐지?하고 궁금해서 찾아보면 계속해서 연어마냥 컴포넌트를 타고 올라가야된다.

 

SSR Preloaded data 여부 체크가 명확하지 않음

 

- Next 를 사용하지 않고 일반 CRA 프로젝트를 eject 하여 자체 SSR 을 진행중이였기 때문에 로컬 개발 환경에서는 SSR 데이터를 확인하기 힘들었다.

- 일부 로직에 SSR Preloaded data 구분이 필요한 경우가 존재하여 그 데이터를 구분하는데 기존에는 단순히 데이터의 존재여부만 체크했다.

- SSR에서 preload 되었다고 치고 로컬 개발환경에서 작업하기란 까다로웠기 때문에 구분이 필요했다. 그래서 데이터가 존재한다면 api 를 호출하지 않고 데이터가 존재하지 않는다면 api 를 호출한다. 로컬에서는 preload 자체가 실행되지 않으므로 항상 api 를 호출하게된다.

- 하지만 상세페이지 데이터를 저장하는 스토어를 해당 페이지를 벗어날 때 리셋을 하지 않고 있어서(그당시 어떠한 기능 때문에 리셋을 하지 않고 있었다..) 전과 같은 상품을 클릭해서 상세페이지에 진입하게 되면 데이터가 업데이트가 되지 않는 이슈가 있었다.

 

매번 convert 하는 html 데이터

 

- 이미지 지연 로딩을 위해 html 로 받아오는 데이터를 파싱하는 로직이 존재했는데 컴포넌트가 렌더될 때마다 파싱하게끔 되어있었다.

 

---

그래서 어떻게 했나?

 

1. '중첩 라우팅' 을 사용하여 상세페이지, 후기에 공용으로 불러와야할 api 를 parent route 에서 진행하고 각 child route 에서는 해당 route 에 필요한 api 만 호출했다. 

 

2. props drilling 을 줄이기 위해서 1~2 depth 이상 drilling 해야하는 경우 useSelector 를 통해 데이터를 가져왔다.

-> 결국 api 가 하나라서 페이지 api 에서 가지고 오는 데이터의 라이프 사이클은 같지만.. 찾기가 힘들어서 적당히 나누었다.

 

3. 클래스형 컴포넌트에서 함수형 컴포넌트로 전환하여 hoc 없이 공용 hook 을 사용하도록 했다.

 

4. 이벤트 리스너가 제대로 해제되도록 throttle 까지 감싼 함수를 이벤트 구독 및 해제 함수의 리스너에 등록했다.

 

5. SSR 의 preload 데이터 여부를 구분하기 위해 flag 값을 주었다.

-> preload 요청과 일반 요청의 api 는 동일하지만 서로 다른 액션을 사용 중이였기 때문에 preload 할 때는 isPreloaded 와 같은 flag 값을 같이 넘겨주어 그 값으로 구분을 하였다.

 

6. 파싱을 하는 로직을 리덕스 쪽으로 이동하여 api 를 호출했을 때만 파싱하도록 수정했다.

 

---

결과?

1. 렌더 횟수 감소 7번 > 2번

-> 첫 진입시 1번, 데이터 들어오고 나서 1번

2. FCP 개선 : 2289.5 > 981

ASIS

TOBE

 

3. 로직 찾아가기가 쉬워졌다.