웹에 관한 지식

코드 변경이 없는데 어느 날 갑자기 Docker production 빌드가 실패했습니다. 원인은 의존성 트리 깊은 곳의 transitive 패키지가 며칠 전 publish한 새 patch였습니다. 이 글은 사고의 전말을 풀면서 package.json의 caret 범위가 정확히 어떻게 동작하는지, 그리고 yarn.lock의 역할이 무엇인지를 정리합니다.

2024년 Polyfill.io 사고는 CDN으로 로드하는 외부 스크립트가 어떻게 10만 개 이상의 사이트를 한 번에 감염시킬 수 있는지 보여줬습니다. Subresource Integrity(SRI)의 동작 원리와 적용 방법, 그리고 Google Fonts 같은 동적 CSS에서 SRI를 어떻게 우회·대체할지 정리합니다.

새 의존성을 추가하는 PR이 알려진 CVE를 가진 패키지, 라이선스 위반, 위험한 메인테이너 변경을 끌어들이지 못하도록 GitHub Dependency Review Action으로 PR 게이트를 거는 방법을 실제 사고 사례와 함께 정리합니다.

공급망 cooldown만으로는 막지 못하는 두 가지 — "이미 의존 트리에 들어와 있는 알려진 CVE"와 "우리 코드 자체의 취약점" — 을 각각 yarn npm audit과 GitHub CodeQL로 막는 방법을 실제 사고 예시와 함께 정리합니다.

새로운 취약점이 공개될 때마다 "우리 프로젝트가 영향받는가?"라는 질문에 즉답하지 못한다면, 의존성 가시성이 부족한 상태입니다. Log4Shell 사례를 통해 SBOM(Software Bill of Materials)이 왜 필요한지, GitHub Dependency Submission으로 어떻게 자동화하는지 정리합니다.

공급망 방어의 빈틈 중 하나인 lockfile 변조 공격을 다룹니다. Yarn 4의 Hardened Mode가 매 설치마다 resolution과 무결성 해시를 검증해 lockfile injection 시나리오를 어떻게 차단하는지, 그리고 한 줄 설정으로 어떻게 도입할 수 있는지 정리합니다.

Dependabot cooldown과 패키지 매니저의 minimum release age 같은 시간 기반 공급망 방어 전략이 실제로 얼마나 효과적인지 지금까지 있었던 사고 데이터로 검증합니다.

npm 공급망 공격에 대응하기 위해 세 가지 공급망 방어 전략을 정리합니다. GitHub Actions의 SHA 핀닝, Dependabot cooldown, Yarn 4의 npmMinimalAgeGate를 코드와 함께 단계별로 다룹니다.

2026년 3월 npm 생태계를 강타한 axios 공급망 공격 사례를 분석합니다. 메인테이너 계정 탈취, 악성 의존성 주입, postinstall 스크립트를 통한 RAT 배포까지의 공격 흐름과 npm 신뢰 모델의 구조적 취약점을 다룹니다.

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 최적화, 웹 폰트 최적화, 접근성 개선 등의 방법을 공유합니다.