성능최적화 2

[RN] 메모리 누수로 인한 IOS 웹뷰 인스턴스 강제종료 (feat. 가비지 컬렉션)

문제상황기본적으로 현재 진행중인 프로젝트에서 유저가 보유하고 있는 선수 카드 리스트는 최적화를 적용해 앱 진입 시점에 한 번 받은 뒤 캐싱해서 사용한다. 이후 리스트에 업데이트가 있을 경우 해당 부분만 새로 업데이트해주는 전략을 가져가고있다. 선수카드는 만 장이 넘어가게 소유할 수 있고, 개별 카드의 이미지도 무겁고 리소스가 큰 탓에 메모리, 네트워크 요청에 많은 부담이 있을 수 있어 위와 같은 정책을 선택했고 렌더 또한 가상화 라이브러리를 사용해서 스크롤에 따라 필요한 순간 동적으로 렌더하고 있었다.하지만 마찬가지로 선수 리스트를 보여줘야하는 특정 컨텐츠에서 문제 상황이 발생했다. 해당 컨텐츠에서는 기획상 (언젠간 바꿔야 하는 부분이였지만) 결론적으로 모든 선수 리스트를 한 번에 받아오며, 당시 상황상..

React-Native 2025.05.15

[Next] Lighthouse 를 사용한 CSR, SSR 성능 차이 비교

Next/Image를 사용하여 이미지 최적화를 하기위해 Next.js로 프로젝트를 진행하고 있지만, 게임 특성 상 Loaing  상태일 경우 loading indicator가 보여지는게 더 적합할 것 같아 프로젝트 전체적으로 CSR을 사용하고 있었다. 이 때, 적합한 페이지는 SSR을 적용해봐도 좋지 않을까 고민하다 상점 페이지에 SSR을 적용해본 뒤 CSR을 했을때와 어느정도의 성능 차이가 있고, 어떤 방식이 더 효율적일지 테스트를 해봐야겠다고 생각했다. 상점은 API에서 특히 더 많은 양의 데이터를 받고 있으며 렌더되는 이미지의 양도 많았다. 우선 React-Query를 사용하고 있는 환경에서 SSR을 적용하기 위해 공식문서에 나와있는 대로 SSR을 위한 초기 설정을 해주었다.https://tanst..

Next.js 2024.06.26