불변성관리 모듈 immutable.js -> immer.js 마이그레이션 이야기

immutable.js : 구형브라우저 지원 및 그 당시 사용률 (since 2018)

(immutable.js로 데이터를 자바스크립트 객체형태로 변환(toJS)할때 새 개체로 참조되어 반환되기때문에, 많은 호출이 있을거라고 주의하라고 알려져 있음)

점점 fem의 규모가 커지면서 스토어도 방대해질수도록 위 이슈가 피부로 와닿고 있었음...


실제 유입이 많은 페이지에 SSR를 적용해보니, 서버(EC2)의 CPU 사용이 급등하고 있는 상황

(SSR이 반영되기전까지는, 클라이언트의 CPU가 높게 사용되고 있었을것 같음)

일 20만사용자, 300만페이지뷰가 발생되는 페이지를 SSR로 제공하게 될경우

서버측의 CPU 및 Memory 사용이 상승될것으로 예상하였지만, 예상보다 더 서버가 괴로워함

몇가지 단계로 해당 이슈에 대응을 하기로함

  1. ReactJS에서의 이슈 원인 파악
  2. 서버에서의 적절한 사양 리서치 (직방 등 SSR로 제공하며 이용자가 많은 사이트와 비교)
  3. 해당 페이지 캐싱 및 SSR 축소 방안

ReactJS에서의 이슈 원인 파악

이충만 님이 해당 개선점을 발견(첨부파일)하여, 의심되고 있는 모듈에 마이그레이션을 진행

(immutable이 과다하게 toJS되고 있는 현상)

1차적으로 전체 마이그레이션을 진행하여 자체 테스트 해본 결과

  1. 서버에서 실행되는 로직에서 스토어로직이 크게 줄어듬