Beyond the Article: 한 걸음 더

height 애니메이션, 하지마세요.

어플리케이션에서 CPU와 GPU 자원을 계속 잡아먹었던 이유를 height 기반 애니메이션에서 찾았고, 어떻게 해결했는지 보여주는 글입니다. 최근 height 기반 애니메이션의 편의성을 늘려주는 기능까지 나왔지만(height: auto;가 애니메이션 작동이 안되요), 성능상 이슈가 있고, 이를 정공법으로 해결하기에는 비용이 발생하는 점은 어쩔 수 없으니까요.

React SPA는 어떻게 되고 있을까

예전에는 Render-as-you-fetch, Fetch-then-render, Fetch-on-render, Fallback Markup…(세부적으로 나눈 글은 SPA에서 데이터는 어떻게 받아올까를 참고하세요!), 여러 방식으로 SPA에서 데이터를 받아왔습니다. 그런데 SPA의 발전은 어디로 가는 것일까에 대한 글입니다.

성능 최적화 체크리스트(2025)

예전의 성능 최적화 체크리스트 글과 비슷하게, 프론트엔드에서 성능 최적화할 수 있는 부분 중 상당수를 알려주는 글입니다. 빠르게 사용할 수 있는 성능 최적화도 있지만, 지엽적인 부분(@import는 render-blocking 문법이다, hydration cost도 주의해야 한다)도 소개하고 있으니, 가볍게 모두 보길 추천드립니다. 추가로, blocking="render"를 설명하면서 render-blocking과 parser-blocking의 차이를 설명하는 글도 있으니 같이 보시면 좋겠네요 🙂

TypeScript는 Go로 바뀐다. Linter들은 어떻게 대비하고 있을까

TypeScript는 7버전에서 Go로 바뀔 준비를 하고 있습니다. 이를 대비해서 Biome 팀과 Oxlint 팀은 어떻게 대비하고 있는지 보여주는 글입니다. 재밌게도, typescript-eslint팀도 대비하고 있습니다(tsgolint, oxlint팀이 fork해서 oxlint에 맞게 수정함.)

Straight to the Article: 빛나는 인사이트

친절한 SVG 인터렉티브 가이드

정보 아키텍쳐 또한 중요하다.

정보 아키텍쳐(ex. 제품 정책의 위치)가 비지니스 지표에서 왜 중요한지 보여주는 글입니다. 친절하게 보여줬으면 좋겠지만, 일부러 안티패턴으로 가려놓았을 수도 있다는 생각에 슬프네요.

Storybook 9, 엄청난 다이어트 성공

물론 ESLint 9버전 마이그레이션처럼 커뮤니티 플러그인이 따라오고 있지 못하고 있지만, 패키지 크기가 작아졌다는 것은 좋은 소식입니다.

정적 사이트 생성기, 11ty 사용 후기

폴더폰(갤럭시 플립 아님) 시장 탐색하기

폴더폰을 위한 UI는 왜 만들어야 하는지, 간단하게 어떻게 지원할 수 있는지 소개하는 글입니다.

Additional: Tech-verse 2025

하나는 일본어 발표기에.. 자동번역 자막을 키고 보시는것을 추천드립니다.

LY 내부 데이터에서 LCP, CLS, INP와 CVR, 바운스률(즉시이탈률), 이탈률과 상관관계가 있는지 직접 보여주는 발표여서 흥미로워서 가져왔습니다. 상관관계는 LCP와 CVR로만 직접적으로 나타났지만, 페이지 유형별, 사용자의 목적이 무엇이였는지에 따라 달라지는 것을 보여준 것이 인상적이였습니다.

Multi tenant를 쿠버네티스와 배포 아키텍쳐(ArgoCD, Helm chart)를 어떻게 구성했는지, 그리고 Next.js로 옮기면서 Version Skew 문제 해결(와 다른 장점 및 이슈)을 보여주는 발표입니다. 특히 Node.js 서버 리소스 최적화는 좋은 팁이네요.

번외: npm 라이브러리 추가하는 것처럼 DB 실행하기