추상화는 적절하게 & 진화하는 디자인 시스템
2024. 4. 10.
추상화는 적절하게
심윤섭: 추상화를 적절하게 하여 갖는 이점을 소개하는 두 글입니다. 첫 글은 React Native 모듈을 만들 경우 네이티브에 가기 전에 추상화(타입 검사 및 검증)를 해서 성능상 이점을 가져오거나 스타일 API를 CSS와 비슷하게 추상화하여 개발의 용이성을 가져왔다는 예시를 들고 있습니다. 두번째 글은 Next.js가 플랫폼 API와 비슷하게 구성하지 않고 임의로 래핑해서 향후에 새로운 기능이 생겼을 경우나 프레임워크를 바꿀 경우를 대비하기 힘들다는 이야기를 하고 있습니다. 적절한 추상화가 유지보수 측면에서 좋다라는 것을 주장하고 있지만(첫번째 글에서는 RN 모듈을 만들 때 균형을 통해 Android나 iOS의 코드가 바뀌었을 때 쉽게 변경할 수 있다, 두번째 글에서는 HTML API와 비슷하게 만들어야 나중에 API 명세가 바뀌거나 다른 프레임워크로 교체하기 쉽다).. 어렵습니다.
김대관: 정확하게 로우 레벨에서의 동작까지는 아니라도 어느정도의 기술의 동작을 이해한다면 추상화를 통해 유지보수의 편리성에 쉽게 접근할 수 있을 것입니다. 추상화에 대한 접근도 좋지만, 먼저 기술을 이해하고 있는지를 확인하고 추상화를 시도하는 것이 좀 더 좋은 접근이 될 것 같습니다.
진화하는 디자인 시스템
심윤섭: 디자인 시스템에 대한 글이 이목을 끌어서 Spotify 블로그에서 설명하는 추상화 단계와 그 장단점을 설명하는 글을 가져왔습니다. 최근 합성 컴포넌트라는 접근 방식이 이목을 끌었지만 실제 사용하는 사람들은 이 접근 방식이 필요 없을 수도 있습니다. 그래서 Spotify는 디자인 시스템 또한 제품이라고 설명하면서 조직의 특에 따라 적용하기를 바라고 있습니다.
RN 버전을 항상 최신화해야 하는 이유
심윤섭: RN에서 보안패치와 Android / iOS의 최신 변경사항을 유지하기 위해 최신화해야 한다는 것과 어떻게 최신 버전을 유지하는지 소개하고 있습니다. 웹 부분에서도 어떻게 최신 버전을 유지해야 할지 고민하는 것도 생각해봐야겠네요.
쉽게 이미지 최적화하기
심윤섭: 웹 성능 최적화를 위해 항상 따라오는 이미지 최적화는 어떻게 해요?에 대한 답을 정리해놓은 Sentry의 블로그입니다. 빌드 시 최적화, 요청 시 최적화, 타사 서비스 이용을 적어놓았습니다. 개인적으로 타사 서비스는 비용 때문(Vercel 가격은 상상을 초월한다)에 제쳐두면 정적일 경우(SSG, 혹은 오랫동안 바뀌지 않을 요소)의 빌드 시 최적화, 동적일 경우의 요청 시 최적화(후 저장, 캐시 기간 설정)으로 나누어서 생각해보면 좋습니다.
김대관: 웹에서 하나의 페이지에 수십 수백개의 이미지를 로딩하게 된다면 로딩시간이 확 늘어나기 마련입니다. 여러 최적화 방식과 더불어서 중간 LCP 성능을 위해 안보이는 이미지를 Lazy Loading 하는 것도 사용자에게 좋은 사용성을 제공할 수 있으니 잘 읽어보시면 좋을 것 같습니다.
Container Query 쉽게 이해하기
반응형 디자인을 다양한 상황에 대응할 수 있도록, 그리고 코드를 더 직관적이게 만드는 Container Query에 대한 대화형 가이드입니다. Container Query를 사용하면서 다양한 브라우저를 대응해야 한다면 폴리필도 고려해봐야 합니다.
headless DnD
Drag and Drop의 코드와 패키지를 공개했습니다. 프레임워크에 종속되지 않아 많은 사람들이 쓸지도 모르겠네요.
Vite는 어떻게 작동하나요?
Vite 작동에 대한 간단한 Diagram으로 설명하는 영상입니다. 내가 원하는 기능을 구현하려면 동작 방식은 인지해야 하기 때문에 많이 사용하고 있는 Vite의 동작방식은 알고 있으면 좋습니다!
CSS Inlining의 성능 향상
CSS Inlining이 성능 향상을 가져온다는 신기한 상황을 소개한 글입니다.