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