- 일시 : 23.08.02 수요일
- 주제 : 통증관리 시스템 - 분류 3.포인티 디자인 시스템 라이브러리 개발
오늘의 목표
- 구현한 Component들의 성능을 측정하여 추후 성능 개선에 이용할 데이터를 기록한다.
진행 사항
✅: 완료, 🌀: 진행중, 🆕: 대기
🌀 (팀) 컴포넌트 성능 테스트
- 크롬 익스텐션에서 제공해주는 react profiler를 이용하여 각 컴포넌트의 성능을 측정한다.
사용방법
- 크롬에서 마우스 우측 버튼을 클릭하여 검사(F12)를 실행한다.
- 탭에서 Profiler에 들어간다.
- 1번을 누르면 버튼이 빨간색으로 바뀐다.
- 그 후 2번을 누르고 다시 1번(빨간색버튼)을 누르면 측정이 완료된다.
- 각 컴포넌트별로 렌더링 되는데 걸린 시간이 측정된다.
결과화면
다양한 상황별 컴포넌트 UI : 각각 5회의 성능 테스트
(이하 데이터 생략)
회고
긴 코드 작성 시 더 효과적인 테스트
우리 프로젝트에서는 정말 최하단의 기본 코드이고 컴포넌트 또한 최대로 쪼개었기 때문에 결과값에서 크게 눈에 띄는 값은 나오지 않았다. 다만 이미지가 상대적으로 많은 썸네일이나 네비게이션바에서는 서버에서 데이터를 받아와야 하기 때문에 다른 텍스트만 들어가는 컴포넌트들 (한자릿수ms) 값보다 높은 (두자릿수ms)값이 나왔다는 점에서 차이를 보이기도 하였다.
물론 가장 기본 코드에서부터 가장 최적화된 코드를 만든다면 이 라이브러리를 사용하는 사용자들에게 득이 될것이다. 하지만 시스템 라이브러리 제작보다도 실제 페이지를 만들 때 코드의 양이 많아지므로 이 테스트를 더 효과적으로 사용할 수 있을 것이라고 생각된다.
참고 레퍼런스
본 후기는 유데미-스나이퍼팩토리 10주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.
쉬운게 좋은 FE개발자😺