웹에 관한 지식

word-break: break-word는 CSS 스펙에서 비추천(deprecated)된 레거시 속성입니다. 대안인 overflow-wrap: break-word도 intrinsic sizing 요소에서 동작하지 않는 함정이 있습니다. 올바른 대체 조합(overflow-wrap: anywhere + word-break: normal + line-break: strict)과 Stylelint 커스텀 플러그인을 통한 자동화 방법을 공유합니다.

모노레포 환경에서 lodash의 import 방식을 변경하여 번들 사이즈를 547KB에서 97KB로 약 82% 감소시킨 경험을 공유합니다. 번들 분석 환경 구축부터 ESLint 규칙을 통한 재발 방지까지의 과정을 다룹니다.

Astro 블로그의 Lighthouse 성능 점수를 개선하기 위해 적용한 이미지 최적화, CSS 최적화, 웹 폰트 최적화, 접근성 개선 등의 방법을 공유합니다.

Python을 사용하여 avif와 webp 포맷의 이미지를 생성하여 Lighthouse의 Serve images in next-gen formats 문제를 해결하는 방법에 대해서 알아보겠습니다.

웹 페이지에서 Google Web Font를 사용할 때, 폰트를 불러오는 부분이 웹 페이지의 성능에 영향을 주지 않도록 최적화하는 방법에 대해서 알아보겠습니다.