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, 기타 도구 등 여러 패키지가 포함된 모노리포로 설정됩니다.
이 리포지토리를 손쉽게 탐색할 수 있도록 포함된 각 패키지의 개요를 정리해 드리겠습니다.
패키지 | 설명 |
---|---|
commerce-sdk-react | Salesforce B2C Commerce에서 데이터를 가져오기 위한 React 후크의 라이브러리입니다. |
internal-lib-build | pwa-kit 리포지토리의 다른 패키지에 사용되는 내부 도구입니다. |
pwa-kit-create-app | 프로젝트 템플릿을 기반으로 PWA Kit 프로젝트를 생성하기 위한 도구입니다. |
pwa-kit-dev | PWA Kit 프로젝트를 개발, 빌드, 배포하는 명령줄 도구입니다. |
pwa-kit-react-sdk | 렌더링 파이프라인을 지원하는 구성 요소 및 유틸리티의 라이브러리입니다. |
pwa-kit-runtime | Node.js 애플리케이션이 Managed Runtime에서 실행될 수 있도록 하는 런타임 환경의 라이브러리입니다. |
template-express-minimal | Managed Runtime에서 실행되는 앱에 대한 기본 프로젝트 템플릿입니다. |
template-retail-react-app | 동형 JavaScript 스토어프런트가 포함된 프로젝트 템플릿입니다. |
template-typescript-minimal | PWA Kit SDK로 빌드된 TypeScript 애플리케이션에 대한 제로 구성 프로젝트 템플릿입니다. |