미니 앱에 효과가 있었던 방법
이 장에서는 웹 개발자의 관점에서 미니 앱을 조사하면서 얻은 교훈을 살펴보거나 미니 앱 방식으로 개발한다는 것이 무엇을 의미하는지에 관해 알아보겠습니다.
구성요소
개발자가 탭, 아코디언, 캐러셀과 같은 일반적인 UI 패러다임의 또 다른 구현을 빌드하도록 하기보다는 미니 앱은 더 많은 구성요소가 필요한 경우 확장할 수 있는 기본 구성요소 선택사항과 함께 제공됩니다. 웹에서도 마찬가지로 다양한 옵션이 있으며, 그중 일부는 미니 앱 구성요소에 관한 챕터에 나와 있습니다. 이상적인 상황은 웹의 구성요소 라이브러리를 자유롭게 혼합할 수 있는 방식으로 빌드된 것입니다. 실제로는 구성요소를 사용할 때 구매해야 하는 디자인 시스템과 관련하여 특정 종속 상태가 발생하거나 구성요소 라이브러리가 '전부 또는 전혀' 방식으로 배포되어 개별 구성요소를 프로젝트에 쉽게 추가할 수 없는 경우가 너무 많습니다. 하지만 단독으로 사용할 수 있는 원자 구성요소나 의도적으로 스타일이 지정되지 않은 generic-components와 같은 라이브러리도 있습니다. 이러한 도구를 찾아 사용하는 것이 좋습니다.
Model-view-viewmodel
마크업 언어를 통해 그래픽 사용자 인터페이스 (뷰) 개발을 백엔드 로직 (모델) 개발과 분리하는 것을 용이하게 하는 모델–뷰–뷰모델 (MVVM) 아키텍처 패턴은 뷰가 특정 모델 플랫폼에 종속되지 않음을 의미합니다. 이 패턴에는 문서화된 몇 가지 단점이 있지만 일반적으로 미니 앱과 같은 복잡한 애플리케이션에 매우 적합합니다. 특히 풍부한 템플릿 라이브러리와 함께 사용하면 효과적입니다 (다음 장 참고).
페이지별 사고
미니 앱을 디버그해 보면 미니 앱이 본질적으로 멀티페이지 애플리케이션 (MPA)이라는 것을 알 수 있습니다. 이렇게 하면 간단한 라우팅과 충돌이 없는 페이지별 스타일 지정과 같은 여러 이점이 있습니다. 프로그레시브 웹 앱에 MPA 아키텍처를 적용한 사례가 있습니다. 페이지를 생각하면 각 페이지의 CSS 및 JavaScript 파일과 같은 리소스와 이미지 및 동영상과 같은 기타 애셋을 관리하는 데도 도움이 됩니다. 가장 중요한 점은 이 방식으로 빌드하면 다른 항목을 로드하지 않아도 라우트 기반 코드 분할을 무료로 이용할 수 있다는 것입니다. 이 경우 각 페이지는 정의상 작동하는 데 필요한 항목만 로드합니다.
빌드 프로세스
미니 앱에는 표시되는 빌드 프로세스가 없음. 웹에서는 Snowpack과 같은 최신 빌드 도구가 JavaScript의 내장 모듈 시스템(ESM이라고 함)을 활용하여 불필요한 작업을 방지하고 프로젝트 규모가 커져도 빠른 속도를 유지합니다. 웹 번들과 같은 기술은 아직 초기 단계이지만 빌드 프로세스에 쉽게 추가할 수 있습니다.
강력한 기능
웹 플랫폼은 최근에 많은 새로운 기능을 획득했습니다. 이제 블루투스, USB, HID, 시리얼, NFC를 통해 기기에 액세스할 수 있습니다. 미니 앱이 WebView에서 실행되고 웹에서 JavaScript 브리지에 종속되는 경우 이러한 강력한 기능을 직접 사용할 수 있으므로 JavaScript 브리지에서 제공하는 API에 맞춰 프로그래밍하지 않고 중간 행위자 없이 브라우저 API에 맞춰 프로그래밍합니다.