PWA Kit 개요

이 개요에서는 PWA Kit 아키텍처의 주요 부분을 간략하게 소개하고 제품 설명서의 나머지 부분을 이해하는 데 유용한 컨텍스트를 제공합니다.

Retail React App은 이커머스에 최적화된 서버 측 렌더링 React 앱입니다. 다음과 같은 주요 기능이 사전에 포함된 스토어프런트를 구축하기 위한 출발점을 제공합니다.

• 코드 번들링, 코드 분할 및 변환
• 테마를 지원하는 구성요소 라이브리
• JavaScript 기반 스타일링 시스템(JS의 CSS)
• 일상적인 개발 작업을 자동화하기 위한 스크립트
• Progressive Web App(PWA) 기능의 서비스 작업자 및 매니페스트
• 테스트군

Retail React App의 스토어프런트에는 제품 목록 페이지(PLP), 제품 세부 정보 페이지(PDP), 카트 및 체크아웃과 같은 표준 이커머스 페이지와 기능이 포함되어 있습니다. 스토어프런트의 모든 측면은 자체 코드로 개선하고 확장할 수 있도록 설계되었습니다.

자세히 알아보려면 Retail React App에 대한 자세한 아키텍처 가이드를 참조하십시오.

최상의 구매자 경험을 구현하기 위해 PWA Kit 스토어프론트는 서버 측과 클라이언트 측의 두 가지 다른 컨텍스트에서 동일한 소스 코드를 실행하는 렌더링 및 라우팅 시스템을 사용합니다. 서버 측 렌더링은 초기 페이지 로드 속도를 최적화하고, 클라이언트 측 렌더링은 응답 성능이 뛰어난 사용자 인터페이스와 원활한 페이지 전환을 지원합니다.

렌더링 및 라우팅 시스템은 Retail React App에서 Express 서버 구성과 React 구성요소의 계층을 사용하여 구축됩니다. 이 시스템에서는 다음을 수행할 수 있습니다.

• 새 페이지 구성요소를 추가하고 기존 페이지 구성요소를 수정
• API 요청 또는 사용자 상호 작용을 통해 얻은 데이터를 페이지 구성요소에 제공
• 페이지 구성요소로 URL 요청을 라우팅하기 위한 패턴 정의
• 모든 페이지의 출력 맞춤화

자세히 알아보려면 렌더링 및 라우팅의 자세한 아키텍처 가이드를 참조하십시오.

PWA Kit는 GitHub에서 호스팅되는 오픈 소스 프로젝트입니다.

PWA Kit용 GitHub 리포지토리는 라이브러리, 프로젝트 템플릿, SDK, 기타 도구 등 여러 패키지가 포함된 모노리포로 설정됩니다.

이 리포지토리를 손쉽게 탐색할 수 있도록 포함된 각 패키지의 개요를 정리해 드리겠습니다.