Outer margin은 안티 패턴이다.
2024. 3. 13.
Outer margin은 안티 패턴이다.
심윤섭: 컴포넌트를 만들 경우 컴포넌트에서 Outer margin을 설정하는 것은 안티 패턴이 된다는 글입니다. Flex, Grid를 많이 쓰는 모던 CSS에서 margin을 컴포넌트의 최상단 요소에 넣게 되면 재사용성이 어려워진다는 말을 합니다. 하지만 이는 기본 CSS를 없애 빠른 마크업을 방해하거나 기본 display속성이 아닐경우의 CSS를 따로 대응해야 하므로 장단점을 생각해서 적용하길 바랍니다.
CSS 퍼포먼스 향상을 위해 해야할 일
심윤섭: 브라우저 렌더링 과정을 설명하면서 그 과정에서 브라우저에서 최적화를 어떻게 하는지, 그리고 피해야 할 패턴을 설명합니다. 가장 강조하는 것은 scoped style을 사용하고 너무 많은 선택자를 피하면 성능을 향상할 수 있다고 조언합니다. 하지만 역시 성급한 최적화를 위해 새로운 CSS 기능을 피하는 것은 아니라는 말도 첨가했습니다. 개인적으로는 CSS 렌더링과 JS의 계산을 저울질하는 것이 우선되어야 한다고 생각합니다.
TypeScript의 타입 예측의 숨겨진 부분
심윤섭: 사용자 정의 타입 가드는 as unknown as A와 같은 효과를 가지고 있으며 내부 구현과 매개변수 값을 설정하는 것이 중요하다는 것을 알리고 있습니다. 혹은 테스트를 통해서 안정적이게 사용할 수도 있구요.
시각적 테스트 튜토리얼
심윤섭: 시각적 테스트는 강력하지만 시작하기에 매우 힘듧니다(설정할 것이 많음). 그것을 Playwright를 통해서 설정하고 고급 기법을 배우는 글입니다. 이외에도 카카오 엔터프라이즈에서 BackstopJS를 적용한 블로그도 있으니 참고하시길 바랍니다.
CSS 신기능을 통한 JS없이 스크롤 애니메이션 구현
심윤섭: 편의성 부분에서 개선되어 제공될 수 있다는 점에서 좋을 수도 있겠네요. 물론 폴리필에서 지옥을 경험할 듯합니다.
useSyncExternalStore로 hydration 불일치 방지
심윤섭: 1월 뉴스레터에서 동시성을 다루면서 나온(React에서 상태 불일치 참조) useSyncExternalStore에 대한 이야기 입니다. Hydration 불일치를 줄여 Layout Shift를 줄이자는 이야기입니다. 하지만 이전 뉴스레터 기사에서도 다뤘듯이 동시성 이점을 잃을 수도 있다는 점도 고려해야겠네요.
Gastby에 대한 회고
심윤섭: Gatsby의 SSG에 대한 접근 방식은 좋았으나 수익창출 방식을 풀어냄과 DX의 아쉬움을 해결하지 않음에 대한 잘못을 회고합니다. 모든 프레임워크는 용도에 따라 도움이 되고, 그동안 써왔던 프레임워크를 포기하는 것은 기회비용일 수도 있다는 저자의 말을 강조하고 싶네요.
그럼에도 RSC는 나아가야 한다.
심윤섭: React의 서버컴포넌트가 어떻게 나오게 되었는지에 대한 글입니다. 어떻게 나오게 되었나 역사가 궁금하면 읽어보시길 추천드립니다.
Shopify의 앱 렌더링 최적화
심윤섭: 앱이라고 써놨지만 웹에도 적용될 수 있는 부분이기 때문에 읽고 한 번 생각해볼 만한 글로 가져왔습니다.