2023-01-03 스터디 준비 - KG

[KangyeolLee]

공유할 내용

• 좌충우돌 장바구니 UI 개선 작업
• 좌충우돌 우아한 점심룰렛 배포기
• 좌충우돌 신규 입사자 온보딩 프로세스
• 좌충우돌 리액트 18 버전업
• 좌충우돌 구글 엔지니어는 이렇게 일한다 감상평
• 함수형 프로그래밍 합성 모델 만들어보기 with JS(TS)

배경

• 배송타입 추가로 인해 장바구니 변경사항이 많아지면서 대대적인 개편을 진행
• 특히 동적인 유저 인터랙션을 포함하는 UI 개선 작업의 비중도 많았음

과정

• 여러가지 요구 사항 중에 그루핑 된 목록의 헤더가 sticky한 포지션을 가져야 함
• 렌더링 성능(및 작업 귀차니즘)을 위해 자바스크립트의 도움 없이 최대한 css 접근 방법으로 문제 해결 시도

난관

• 간단한 sticky scroll 처리를 위해 position: sticky 를 선언
• 하지만 해당 속성은 부모 스크롤 박스에 overflow: hidden 이 있다면 무시되는 성질이 있음
• 이미 해당 박스에는 디자인 및 기획 요구사항으로 인해 overflow: hidden 이 적용되어 있었음
• position: sticky 적용을 위해 overflow: hidden 이 적용된 박스 모델을 모두 제거 & 변경하는 작업을 진행
• 하지만 overflow: hidden 속성이 여전히 필요한 처리가 남아있음
• 한 줄 요약: position: sticky 와 overflow: hidden 동시적용 불가

해결책

• css contain 속성을 활용해보자

css contain 이란?

• 브라우저로 하여금 문서 트리의 특정 영역이 다른 부위와 독립적으로 존재한다는 것을 나타냄
• 이를 통해 레이아웃, 스타일, 페인트, 크기 또는 이 조합의 계산을 적용할 때 전체 페이지 DOM이 아닌 특정한 일부 DOM 레벨에서만 수행 가능 → 성능상 이점
• none | strict | content , size | layout | style | paint 속성 사용 가능
  • 가령 size 속성을 지정하면, 이는 엘리먼트의 크기를 계산할 때 자손의 크기는 고려하지 않아도 된다는 뜻. layout 속성이라면 엘리먼트 외부 어느 것도 내부 레이아웃에 영향을 주지 않고 그 반대 역시 성립함.
  • strict = size layout paint 와 동일 / content = layout paint 와 동일
  • 즉 paint 속성을 활용하면, 엘리먼트의 자식이 자신을 벗어나는 경우 또는 외부에 있는 경우에 대한 고려를 하지 않아도 됨을 의미 → overflow: hidden 속성으로 활용 가능

content-visibility

• 페이지 로드 성능 향상을 위한 css 속성. 브라우저로 하여금 레이아웃과 페인트 작업을 포함한 엘리먼트 렌더링 작업이 필요한 시점에 수행하도록 알려줌
• 내부적으로 css containment 스펙에 의존. 해당 스펙을 css 속성으로 사용하도록 구현한 것이 css contain. 즉 내부적으로 contain 의 동작을 내포하고 있음
• contnet-visibility: auto 가 부여되어 있다면 뷰포트에 들어오기 전까지 브라우저가 렌더링을 생략 → 성능 향상
• content-visibility: hidden
  • display: none : 엘리먼트를 숨기면서 렌더링 상태 또한 함께 제거. 해당 요소가 다시 나타나기 위해서는 브라우저가 해당 엘리먼트를 다시 렌더링하기 위한 비용이 필요
  • visibility: hidden : 엘리멘트를 숨기면서 렌더링 상태는 유지. 그러나 문서에서 실제로 제거되지 않으며 여전히 페이지에 공간을 차지하고 있으며 접근이 가능
  • content-visibility: hidden : 엘리멘트를 숨기면서 렌더링 상태는 유지. 페이지에서 공간을 차지하지 않음
• CLS 이슈를 피하기 위해서는 렌더링 연기된 엘리먼트의 디폴트 크기를 설정해주어야 할 수 있음 → 이는 contain-intrinsic-size 속성을 통해 지정 가능

List Virtualization

• 해당 속성을 사용하면 외부 라이브러리 도움없이 List Virtualization 처리를 적용해 볼 수(도) 있음
• 다만 뚜렷한 한계가 존재하는데 (1) 브라우저 지원 범위 - 사파리와 파이어 폭스는 지원하지 않음 (2) 다이나믹하게 리스트의 크기가 변경되는 케이스라면 CLS 이슈가 있을 수 있음

결론

• 리스트 렌더링에 큰 성능 이슈가 발생한다면 그거슨!! 리스트 설계를 잘못한 거시다!!
• 렌더링 성능 이슈 해결을 위해 이러한 도움을 받기 이전에 렌더링에 막대한 시간을 잡아먹는 엘리먼트의 설계를 개선해 볼 여지가 있을지 고민해보자.

출처

• MDN contain, https://developer.mozilla.org/ko/docs/Web/CSS/contain
• MDN content-visibility, https://developer.mozilla.org/en-US/docs/Web/CSS/content-visibility
• https://web.dev/content-visibility/
• https://css-tricks.com/almanac/properties/c/content-visibility/
• https://www.patterns.dev/posts/virtual-lists/