분류 전체보기213 React Query로 페이지 LCP 3.5초에서 2.4초로 개선 React Query로 페이지 LCP 3.5초에서 2.4초로 개선- 문제 정의초기 페이지 진입 시 사용자가 필요한 자산정보에 접근하는데 약 3.5초가 소요되었습니다. 이는 컴포넌트가 마운트된 후에야 데이터 로딩이 시작되고, 필수 API 4개(그룹, 랙, 장비, 컬럼 목록)가 순차적으로 로드되는 워터폴 패턴 때문이었습니다. 렌더링 전에 미리 데이터를 로드하지 않았기 때문에 첫 API가 완료된 후에야 다음 API가 호출되어 불필요한 지연이 발생했습니다. - 해결 방법단순히 React Router loader만 사용해도 데이터를 미리 로드할 수 있지만, React Query를 함께 사용함으로써 캐싱을 활용하여 페이지 이동 시에도 데이터 재사용 가능하도록 하였습니다. - 개선 결과네트워크 타임라인: 2초 → 1.. 2025. 3. 16. 적응형 도입 과정 rem을 사용하는 경우rem을 사용하는 경우 그 이유에 대해 여러 블로그를 찾아보았는데 크게 두가지 인것같습니다.웹접근성을 고려하여 크롬 폰트 설정에서 폰트 크기를 변경하였을때 그 변경이 웹서비스의 css보다 우선되어서 크기가 변하는가 (시각에 어려움이 있는 사용자를 위함)폰트 사이즈, 비율이 변화됨에 따라 padding의 크기등이 폰트와 함께 변하면서 전체적인 UI가 전반적으로 유사하게 유지되는가(반응형으로 배치 다르게 하는 내용과 다른 이야기, 대부분의 서비스는 반응형이 되어있고 그것 외에 어느정도 변화에 따라 padding등도 같이 변화하는지 여부)https://youtu.be/okw-whFWGEo?si=HXFPIhc77o0-xYqFhttps://ossam5.tistory.com/m/310 [CSS.. 2025. 3. 16. 라이브러리 선택 과정 정리 및 공유 라이브러리 선택을 하는경우 무작정 사내 프로젝트에 적용할 수는 없습니다.이유는 크게 다음과 같습니다.라이브러리에 오류가 없는지 확인프로젝트 반영에 필요한 기능을 충분히 제공하는지 확인물론, 커뮤니티가 활성화 되어서 에러핸들링하기 적절할지, 공식문서가 잘 작성되어있어서 개발자들이 빠르게 적용할 수 있는지, 여러 라이브러리중 필요한 기능만 포함된 경량 버전인지 등을 확인하는것도 필요할 수 있습니다.여기에서는 DnD 라이브러리, AJV를 선택한 과정을 예시로하여, 템플릿화하여 공유한 내용을 설명합니다.DnD 라이브러리 선택이유라이브러리를 선택하면서 npmtrends사이트를 통해서 다운로드, 깃허브 관리를 통해 커뮤니티가 활성화되어있는지 확인하였습니다.다른 라이브러리의 공식문서 제공여부 demo사이트가 있는지,.. 2025. 3. 16. windowing기법과 실무 적용 이 글은 react windowing을 실무에 적용하여 FPS, Performace탭 분석을 통하여 개선 및 분석, windowing 기법의 원리를 설명하는 글입니다. 개발자도구 > Elements 탭 비교적용전모든 리스트를 DOM에 추가하게됩니다. 1만개를 넘는 데이터를 받으면 그대로 쌓는것입니다. 적용후 정확한 검증을 위하여 더 자세한 측정을 해보겠습니다. 측정 조건- CPU throttling: 6x slowdown- Network throttling: 3g- Grid 이미지 10,000건 데이터 기준 측정측정 내용SPA 구조에서 탭 전환으로 동일한 이미지 그리드(약 10,000건)를 다시 보여줄 때,렌더링 복구 과정에서 UI프리징이 발생하는지 확인 측정 지표1. FPS(Frames Per Seco.. 2025. 3. 16. 이전 1 2 3 4 5 ··· 54 다음
