보호되어 있는 글입니다.
프로그래밍
회사 프로젝트를 진행하던중 사이트가 렌더링 되는 속도가 느린것을 발견하여 최적화를 진행해 보기로 했다. 컴포넌트 성능을 측정하기 위해 react profiler를 사용하였다. 처음 성능을 측정한 결과 상품을 보여주는 카드 컴포넌트가 스크롤이 될때마다 새로 렌더링이 계속 되어 사이트 성능에 영향을 주고 있는것을 확인하였다. function CardItem({item, isProfile}: {item: C2CRelatedGoods; isProfile?: boolean}){ const {price, createdAt, product, mainImage, id, user, discount, sellPrice, titleImage, code, originalPrice} = item ... return ( ... ..
최근 리액트를 공부하면서 리액트는 SPA방식을 기반으로 동작한다는 것을 알았다. 화면을 전체 새로고침하지 않고 필요한 부분만 다시 재렌더링하여 보여주므로 서버입장에서도 트래픽이 과도하게 요청될일이 없어 정말 좋은 방식이라고 생각했다. 하지만 SPA가 무조건 좋을까라는 의구심이 들어 각 방식에 대해 알아보기로 하였다. SPA, CSR SPA(Single Page Application)는 한 개(Single)의 Page로 구성된 Application이고 CSR(Client Side Rendering) 방식으로 렌더링한다. 즉, 기본적으로 단일 페이지로 구성되며 기존의 서버 사이드 렌더링과 비교할 때 배포가 간단하며 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다는 장점이 있다. SPA는 웹 애플리케이션에..
