[번역] shadcn/ui 의 해부

• 이 글에서 읽고 새롭게 생각하게 된 내용이 있다
• 우선 이 라이브러리는 알지 못한다
• 이 글에서 설명해주듯 npm 패키지가 아닌 cli로 직접 소스코드를 받아야한다는 부분이 다른 라이브러리와의 차이점으로 보인다
• 그럼 왜 이러한 차이점을 두었을까? 하는 생각이 이어진다
  • npm을 싫어하나…?
  • 또는 직접 받도록 하면서 얻을 수 있는 이점이 있나..?
• 그 이유는 정말 생각하지 못했다
  • 이는 코드에 대한 소유권과 제어권을 사용자에게 부여하여, 사용자가 컴포넌트의 빌드 및 스타일을 직접 결정할 수 있도록 하기 위함입니다.
  • 적절한 기본값으로 시작한 뒤 필요에 따라 컴포넌트들을 커스텀할 수 있습니다.
  • npm 패키지로 컴포넌트들을 패키징할 때 단점 중 하나는 스타일과 구현이 결합이 되어있는 것입니다. 컴포넌트의 디자인과 구현은 분리되어야 합니다.
• 😯
• 보통 라이브러리를 받고 확장하고 싶은 경우가 있다면 소스코드를 직접 수정하기 위한 patch-package 와 같은 작업이 필요하다
• 그러나 이 라이브러리의 제작자는 사용자에게 이 권한을 처음부터 부여하고자 하였다
• UI 라이브러리이고 결국 사용자가 직접 사용하고 싶은 방향대로 커스텀 하게 될 것이다
• 그런데 이를 제한하는 방식으로 제공할 필요가 없었던 것이다

(번역) CSS content-visibility를 이용해 렌더링 성능 향상 시키기

• 뷰포트 안에 들어온 영역만 렌더링 하거나 DOM을 제어할 수 있다면 좋을텐데
  • 기본적으로 지원하는 CSS가 이미 있다
• content-visibility 를 설정하면 레이아웃과 페인트 관점에서 뷰포트에 들어온 경우만 작업하므로 이 비용을 줄일 수 있다
  • DOM 자체를 새로 그리는 것은 아니라 뷰포트 인/아웃 되었을때 비용이 크지 않다
• 기본 지원이기 때문에 더 심화된 최적화를 하고 싶다면 추가 작업이 필요하겠지만
  • 웹에서 VirtualizedList 를 간단하게 구현한다는 의미 정도
• 참고: (번역) 랜더링 성능을 향상 시키는 새로운 CSS 속성 content-visibility
  • content-visibility를 통해 화면 내 콘텐츠의 스타일과 레이아웃 작업을 진행합니다.
  • 하지만 요소가 완전히 화면 밖에 있는 경우라면 브라우저는 오직 해당 요소 박스의 스타일과 레이아웃만 처리하고 다른 렌더링 작업은 생략합니다.
  • 이 페이지의 로딩 성능은 마치 화면 내 콘텐츠 전부와 화면 밖 콘텐츠는 빈 상자만 로딩 하는 것과 같습니다.
  • 참고: CSS content-visibility 속성이 이제 기준으로 새로 제공됨
  • 참고: 콘텐츠 가시성: 렌더링 성능을 향상시키는 새로운 CSS 속성
  • 뷰포트 밖에서는 비어있는 상자를 그려두어 스크롤이 갑자기 튀는 문제를 해결한다 👍
    • 직접 최적화 로직을 작성했는데, 이 구현이 되어있지 않아 프레임이 밀렸을때 스크롤이 튀는 현상을 겪었었다

(번역) 렌더링 지연을 개선해 LCP 점수 향상하기

• LCP (Largest Contentful Paint)
  • 웹에서 2.5s 정도를 Good 으로 평가하는데 (4s 넘어가면 Pooooooor…..)
  • 앱에서는 더 빠른 시간 내에 완료되어야 한다
    • 웹에서는 로딩 상태가 상태바에 스피너 등 어느정도 사용자들이 학습되어있어 4s 라는 최대값이 있는게 아닐까
• LCP 를 향상시키기 위해 렌더링이 지연되는 것을 해소해야하는데
  • 렌더링 지연: 최종적으로 화면에 요소들이 노출되는 시간
• 렌더링 지연이 되는 원인이 무엇일까?
  • 단순히 DOM이 준비 되지 않았거나
  • 비용이 큰 렌더링을 준비하고 있는 등
  • 렌더링을 지휘하는 메인 스레드가 바쁜 경우 렌더링이 지연 될 수 밖에 없다
• 렌더링 준비가 완료 되었음에도 화면에 노출되지 않고 숨겨져 있는 경우
  • 예를 들면 화면 진입 시 애니메이션 효과와 함께 노출하기 위해 숨겨둔 경우
  • 전환 애니메이션을 포기하고 페이지 속도를 개선하는 타협이 필요하다 🙏

(번역) 웹 페이지가 로드되기 전에 더 빠르게 만드는 방법

• 웹 바이탈: 사용자가 페이지에서 유의미한 콘텐츠를 소비하거나 상호작용 할 수 있는지를 측정한다
  • First Contentful Paint (FCP): 사용자가 페이지에 처음 진입한 시점부터 페이지의 어떤 부분의 콘텐츠가 렌더링 될 때까지의 시간을 측정합니다.
  • Largest Contentful Paint (LCP): 페이지의 주요 콘텐츠가 로드된 시점을 나타냅니다.
  • Interaction to Next Paint (INP): 웹 페이지가 사용자 입력에 얼마나 빠르게 반응하는지를 측정합니다.
• 이러한 유의미한 콘텐츠가 더 빨리 로드되도록 최적화 작업을 하게 되는데
  • 가장 첫번째 측정 지표인 FCP 를 줄일 수 있다면 어느 한부분이라도 사용자에게 콘텐츠를 전달할 수 있게 된다
  • 그렇다면 이 FCP 전에 어떤 일이 일어나는지 먼저 알아야한다
  • 웹 페이지 성능 최적화라고 하면 대부분 페이지 로딩 후의 성능에 집중하는 경향이 있습니다. 하지만 이 글에서는 그 관점을 뒤집어 새로운 인사이트를 제공합니다. 저자는 첫 바이트가 도달하기 전 단계의 최적화에 주목하며…
  • 웹 페이지가 로드되기 전에 무슨 일이 일어날까요?
• 워터폴로 요청하는 것을 최소화하고 짧더라도 캐시는 캐시의 역할을 잘 해준다