TTFB 최적화 가이드

TTFB 최적화 가이드

심윤섭: TTFB를 어떻게 측정하는지, 그리고 어떤 방식으로 TTFB 속도를 빠르게 하는지 설명하는 글입니다. web.dev팀에서 제공하는 성능 최적화 배우기로 대부분 상황에서의 성능 이슈를 해결할 수 있습니다. 하지만 TTFB를 최적화하는 방법은 상황에 따라 갈릴 수 있는데, 이 글을 통해 대부분의 경우를 해결할 수 있을겁니다. 물론 waterfall이 발생하는 지점이나 캐시할 지점 찾는 것은 본인이 해야겠지만요.

SSR 렌더링 벤치마크

심윤섭: 복잡한 계산이 들어있는 렌더링을 얼마나 빠르게 반환할 수 있냐를 측정한 재밌는 벤치마크입니다. React가 좋지 않는 성능을 가지고 있는 것은 많은 글에서 파악할 수 있지만 Vue가 좋은 성능을 가졌다는것은 의외네요. 하지만 생태계의 성숙도와 벤치마크는 상황에 따라 크게 갈리므로 선택은 본인에게 있습니다 :)

김대관: SSR의 성능이 뛰어나지 않다고 해서 React를 버리고 Vue가 더 좋다고 Vue가 바로 대체되지는 않을 것 입니다. 성능적으로 참고한다면 좋은 내용이 될 거라고 생각합니다.

Compound 패턴 잘 만들기

심윤섭: Compound 패턴 컴포넌트를 만들 경우 여러 패턴을 통해 export하게 되는데, export/import 방식을 제대로 하지 않으면 여러가지 문제에 부딫힐 수 있다는 글입니다. Tree shaking은 프론트엔드에서 중요한 기술이므로 무엇인지 확실하게 인지하고 잘 사용하시길 바랍니다(Tree shaking이 뭔데).

blocking="render"가 하는 일

심윤섭: 아직 모던 브라우저 전체에 적용되지 않았지만 곧 적용될 blocking="render"가 무엇인지 알아보고 언제 브라우저가 하는 일을 차단하는지와 함께 알아보는 글입니다. 아직 모던 브라우저에 모두 구현되지 않았지만, parsing 차단과 rendering 차단을 알아보는 간단한 글입니다. <script>의 작동방식도 같이 보시는 것을 추천드립니다.

JS 컴파일 도구를 만들면서 JS 엔진 알아보기

JS 컴파일 도구를 만드는 과정을 설명한 글이지만 AOT와 JIT의 차이점과 JS의 특성 중 하나인 인라인 캐시를 엿볼 수 있으므로 관심있는 사람은 보셨으면 좋겠네요. JS 엔진의 JS 실행 방식에 대한 설명은 JSConf의 영상을 먼저 보시면 쉽게 다가갈 수 있습니다.

(런타임)CSS-in-JS는 왜 느린가요?

이 글은 벤치마크보다는 왜 CSS-in-JS가 느린지 구조를 통해 설명하는 글입니다. 이전에 소개했던 벤치마크(SSR에서 Styled Components는 진짜 느리다.)도 다시 보시면 좋습니다.

RSC와 에러핸들링

react-error-boundary에서 FallbackComponent에 주어지는 props를 활용해서 React Server Components에서 발생한 에러를 다시 시도하는 방식을 소개합니다. RSC에 관련된 예제가 아니더라도 <ErrorBoundary>를 잘 활용하는 방법을 소개하니 한 번 가볍게 보시길 추천합니다.

WASM 실사례

WASM을 어느 곳에 사용할 수 있는지 실 사례를 통해 알아보는 글입니다. 이외에도 Notion의 SQLite + WASM으로 로컬 데이터베이스 구축하기, Figma의 WASM을 통한 렌더링 엔진 구축도 있습니다 :)

분리는 철저하게

전자는 인터페이스 분리 원칙이 React에 적용되는 부분을 설명한 글이고, 후자는 재사용되는 컴포넌트에서 기본 값을 외부에서 설정할 수 있도록 돕는 것을 권장하는 글입니다. 둘 다 분리에 관한 관점을 설명하는 글이라서 가볍게 보기 좋습니다.

Toast는 좋은 UX를 제공하나요?

간단한 예제와 함께 많이 사용하는 Toast UI가 (적어도 PC에서는) 좋은 UX가 아닐 수도 있다는 간단한 글입니다.

CSS 명시도 속임수

간단하게 CSS 명시도를 높이고 싶을 때 사용되는 트릭입니다.