모던 프론트엔드 아키텍처를 위한 5가지

이 글의 제목은 스팸처럼 느껴지지만 내용은 그렇지 않았습니다. 각 주제를 간단하게 나열하고 있지만 분명 인사이트를 주는 내용들이 많았습니다. 각 주제가 어떤 내용을 설명하고 있는지, 어떤 인사이트가 있는지 목차와 함께 살펴보겠습니다.

• 디자인 시스템

• 컴포넌트 재사용

  • 컴포넌트를 분리하고 디렉터리에 관리하는 방법에 대해 소개합니다. 이 글에서 가장 눈에 띄는 부분이었습니다. 최근 스타일 및 요소의 중복(DRY)에 대해 고민하고 있었는데 그 결과와 비슷하기도 해서 나름 뿌듯했습니다.

  • 우리는 중복을 제거하기 위해 컴포넌트를 분리하는데, 각 컴포넌트의 크기가 크기 때문에 사용처마다 다른 사용방법을 대응해줘야 하는 문제가 있습니다. 그래서 그런 가능성을 줄이기 위해 최대한 독립적인 부분들, 즉 작은 크기의 컴포넌트를 사용해야 합니다.

  • 다만, 이렇게 했을 때 문제도 있습니다. 컴포넌트 구조를 파악할 때 인지부하가 발생할 수 있고 아무리 작고 독립적인 컴포넌트로 세분화 한다고 하더라도 예상하지 못한 문제를 얼마든지 마주할 수 있기 때문입니다. 관련해서 또 다른 좋은 글을 소개합니다.

• asset 최적화

  • 이미지, 자바스크립트, CSS, 폰트 및 아이콘, 비디오 및 오디오, 문서, 퍼포먼스 측정

  • 각 세부 내용은 자세한 내용을 다루고 있진 않습니다. 다만 어떤 자산에 대해 어떻게 최적화를 하면 좋은지 소개하고 자산의 종류에 어떤게 있는지 안내하는 것만으로도 큰 가치가 있습니다. 프론트엔드 사이드에서 최적화를 할 수 있는 범위가 어디까지인지 거시적으로 파악하는데 도움이 됩니다.

• 각 수준의 캐싱

  • 브라우저, CDN, DNS, 애플리케이션 수준의 캐싱에 대해 소개합니다.

  • 이 역히 자산 최적화와 비슷합니다.

• 낙관적 동시성

  • 낙관적 UI 업데이트에 대해 소개합니다. 또한 서버 요청으로부터 에러를 받았을 때 어떻게 재조정하는지 안내합니다.

  • 또한 문서 수정에 낙관적 UI를 적용하기 위해 프론트엔드에서 문서 버저닝을 하는 방법도 간단하게 소개합니다.

  • 낙관적 동시성과 관련해 이전 글을 다시 보는 것도 도움이 될거 같습니다.