Retail React App

Retail React App은 API를 기반으로 스토어프런트를 구축하고 이를 Managed Runtime에 호스팅할 수 있도록 설계된 샘플 코드 및 도구 세트입니다. 이 아키텍처 가이드에서는 Retail React App의 구조와 컨텐츠를 설명하고 유연한 오픈 소스 기반 솔루션임을 설명합니다.

모든 PWA Kit 프로젝트는 동일한 파일 세트로 시작합니다. 프로젝트를 시작할 때 이러한 파일은 스크립트를 실행하여 생성됩니다. (이 프로세스는 시작하기 가이드에 자세히 설명되어 있습니다.)

Retail React App의 작동 방식을 개략적으로 알아보려면, 먼저 파일 구조를 살펴보아야 합니다. 다음은 새로 생성된 프로젝트의 모든 파일 및 디렉터리 목록과 각 파일에 대한 간략한 설명입니다. (설명에 언급된 기술은 이 가이드의 뒷부분에 자세히 설명되어 있습니다.)

일상적인 개발 작업을 자동화할 수 있도록 Retail React App에는 몇 가지 스크립트가 포함되어 있습니다. 이러한 명령은 npm run <SCRIPT_NAME> 명령을 사용하여 터미널에서 실행합니다.

다음은 포함된 모든 스크립트의 전체 목록과 각 스크립트에 대한 설명입니다.

이름	설명
`analyze-build`	프로젝트를 프로덕션 모드로 빌드하고 webpack-bundle-analyzer 보고서 2개를 생성합니다. 이들 보고서를 사용하여 코드 번들의 크기를 모니터링합니다.
`compile-messages`	현지화된 모든 메시지를 AST 형식으로 컴파일합니다.
`extract-messages`	React 구성요소에서 기본 로캘의 메시지를 자동으로 추출합니다.
`format`	Prettier를 사용하여 코드를 포맷합니다.
`lint`	ESlint를 사용하여 일관되지 않은 코드 스타일을 찾습니다.
`lint:fix`	ESlint 오류를 자동으로 수정합니다.
`prod:build`	프로덕션 모드로 프로젝트를 빌드합니다.
`push`	코드 번들(프로덕션 빌드 아티팩트)을 Managed Runtime에 푸시합니다.
`save-credentials`	Runtime Admin 자격 증명을 로컬로 저장합니다(push 명령용).
`start`	SSR 서버를 시작합니다.
`start:inspect`	Node.js 검사기를 사용하여 SSR 서버를 시작합니다.
`start:pseudolocale`	가상의 로캘로 SSR 서버를 시작합니다.
`test`	Jest를 사용하여 단위 테스트를 실행합니다.
`test:lighthouse`	Lighthouse 테스트를 실행합니다.
`test:max-file-size`	번들 크기 테스트를 실행합니다.

프로젝트에는 두 가지 품질 보증 테스트군 예제가 포함되어 있습니다. 이 두 테스트는 Jest 및 React Testing Library를 사용하여 생성된 단위 테스트입니다.

이 두 단위 테스트는 해당 디렉터리에 각각의 페이지 구성요소와 함께 포함됩니다.

단위 테스트를 시작하려면 터미널에서 다음 명령을 실행합니다.

스토어프런트 테스트에 대해 자세히 알아보려면 샘플 테스트군의 소스 코드를 검토하고 Jest 및 React Testing Library 설명서를 참조하십시오.

처음부터 Retail React App은 Google의 Lighthouse 테스트군을 통해 측정된 우수한 성능 점수를 받았습니다. 다음 스크립트를 사용하여 개발 과정 전반에서 Lighthouse 점수를 쉽게 모니터링할 수 있습니다.

이 스크립트는 스토어프런트에서 Lighthouse를 세 번 실행하고 각 카테고리의 중간 점수를 Google에 업로드합니다. 그러면 Google에서 이 점수를 사용하여 보고서를 생성합니다. 스크립트가 종료되기 전에 스크립트에 의해 보고서의 링크가 출력됩니다.

Salesforce API를 사용하여 구매자 데이터에 액세스하려면 관리자가 API 액세스 설정에서 설명하는 작업을 완료해야 합니다.

Retail React App의 구매자 데이터는 commerce-sdk-isomorphic 클라이언트에 구축된 CommerceAPI라는 클래스를 통해 액세스됩니다. CommerceAPI 클래스는 app/commerce-api/index.js에서 맞춤화하고 app/api.config.js에서 구성할 수 있습니다.

각 페이지의 getProps 메서드에 CommerceAPI 클래스가 자동으로 주입됩니다. 예를 들어 다음과 같은 페이지 구성요소에서 API 래퍼에 액세스할 수 있습니다.

현재 CommerceAPI 래퍼는 제품, 프로모션, 상품권, 검색 등에 Commerce API를 사용합니다. 이러한 각 기능은 B2C Commerce API 참조에서 별도로 설명하는 고유한 엔드포인트 세트와 함께 제공됩니다.

등록된 구매자 및 게스트를 대신하여 API 요청을 승인하기 위해 CommerceAPI 클래스는 Shopper Login and API Access Service(SLAS)라는 Salesforce Commerce API를 사용합니다.

장바구니와 주문의 경우 CommerceAPI 클래스는 Open Commerce API(OCAPI)도 사용합니다.

Salesforce Commerce API(SLAS 포함) 및 OCAPI를 설정하는 방법은 API 액세스 설정에서 다룹니다.

Chakra UI 구성요소 라이브러리는 Retail React App에서 사용할 수 있는 새로운 프로덕션 지원 기술로, 50여개의 사용자 인터페이스 구성요소가 포함되어 있으며, 접근성과 사용성이 뛰어납니다. 스타일 속성을 사용하거나 JavaScript 오브젝트를 사용하여 구성요소를 맞춤화하는 방법으로 고급 스타일링(CSS-in-JS)을 적용할 수 있습니다. 모든 Chakra 구성요소는 테마 시스템으로 재정의할 수 있는 잘 디자인된 기본 스타일을 제공합니다.

Chakra 테마 시스템은 스타일이 적용된 시스템 테마 사양을 기반으로 합니다. app/theme 디렉터리의 값을 업데이트하여 브랜드에 맞게 구성요소의 모양과 느낌을 맞춤화할 수 있습니다.

테마는 app/components의 재사용 가능한 구성요소 대부분에 사용할 수 있지만, 제품 세부 정보 페이지 또는 제품 목록 페이지와 같은 페이지에는 사용할 수 없습니다. 이러한 페이지의 스타일을 변경하려면 app/pages의 해당 페이지 구성요소에 대한 소스 코드의 인라인 스타일을 편집하십시오.

프로젝트에 맞춤형 SVG 아이콘을 포함하려면 app/assets/svg 디렉터리에 아이콘을 추가하고 app/components/icons/index.js로 가져온 다음 export const MyCustomIcon = icon('my-custom-icon')과 같은 React icon 구성요소를 내보냅니다.

가져온 SVG 아이콘은 빌드 시 SVG 스프라이트에 패키징되며, 스프라이트는 서버 측에서 렌더링된 HTML에 포함됩니다.

PWA Kit React SDK는 PWA Kit 스토어프런트를 위한 동형 렌더링 파이프라인을 지원하는 라이브러리입니다. 이 SDK에는 Retail React App을 구동하는 여러 가지 주요 클래스, 기능 및 구성요소가 포함되어 있습니다. 예를 들어 렌더링 및 라우팅 프로세스 전체를 시작하는 app/ssr.js의 render() 함수는 이 SDK에서 가져옵니다.

이 SDK는 서버 측 렌더링, 캐싱 및 프록시와 관련한 일부 구현 세부 정보를 추상화하는 것은 물론, 운영을 맞춤화할 수 있는 다양한 기회를 제공합니다. 또한 클라이언트 측과 서버 측 모두에서 렌더링할 수 있는 단일 코드 세트를 유지 관리하기 위한 범용 유틸리티 및 도구도 제공합니다.

Salesforce는 개선 사항을 보다 쉽게 반영할 수 있도록 SDK를 Retail React App과는 별도의 npm 패키지로 유지 관리합니다.

PWA Kit React SDK 및 전체 Retail React App은 오픈 소스 프로젝트로, GitHub에서 사용할 수 있습니다. 이 프로젝트를 개선하는 데 Commerce Cloud 커뮤니티의 참여를 기다립니다!

이 섹션에 나와 있는 오픈 소스 기술은 Retail React App에 가장 많이 사용하는 기술입니다. 또한 대체 제품으로 대체하기가 가장 어려운 기술로, 성능 특성뿐만 아니라 평판도 고려해서 선정했습니다. 각 시스템은 적극적으로 유지 관리되고, 고도로 맞춤화가 가능하고, 문서화되며, 널리 사용됩니다.

다음은 각 핵심 기술에 대한 간략한 개요입니다. 많은 부분이 이미 익숙한 내용일 것입니다.

Babel은 다양한 브라우저 및 Node.js 환경과 호환되도록 JavaScript 코드를 컴파일합니다. 고급 언어 구문을 변환하고 환경에서 누락된 모든 기능을 폴리필합니다.

Express는 많이 사용되는 오픈 소스 웹 서버 프레임워크로, JavaScript로 작성되며 Node.js 런타임 환경에서 실행됩니다. 사용자가 스토어프런트 진입점으로 정의한 경로에 대한 HTTP 요청을 처리합니다.

Express를 사용하면 연결 포트 및 응답을 반환하는 템플릿 위치와 같은 일반적인 웹 서버 설정을 구성할 수 있습니다. 또한 요청 처리 파이프라인 내의 어느 위치에든 요청 처리 미들웨어를 추가할 수 있습니다.

PWA Kit 애플리케이션의 모든 서버 측 코드는 JavaScript용 오픈 소스 런타임 환경인 Node.js를 기반으로 실행됩니다. 이 런타임 환경은 브라우저별 JavaScript API를 배제하고 자체 API를 포함하므로, 플랫폼 간에 호스트 운영 체제의 기능(예: 파일 시스템)에 액세스할 수 있습니다.

Node.js는 비차단 또는 비동기식 아키텍처를 사용하는 만큼, 확장성이 뛰어나고 데이터 집약적인 스토어프런트를 구축하는 데 적합합니다.

React는 빠르고 유동적이며 몰입감 있는 사용자 인터페이스를 제공하는 단일 페이지 앱을 만들기 위해 Facebook에서 개발한 프레임워크입니다.

React 앱에서 사용자 인터페이스는 일반적으로 복잡한 계층 구조로 이루어진 개별 구성요소로 구성됩니다. 잘 설계된 React 앱에서는 각 구성요소가 한 가지 작업만 처리하며, 그러한 작업에는 다른 구성요소가 포함되는 경우가 많습니다.

Retail React App의 구성요소 계층 구조는 뛰어난 확장성을 제공하도록 설계되었습니다. 포함된 구성요소를 기반으로 확장하거나 새 구성요소로 교체할 수 있습니다.

React 관련 패키지:

이름	설명
로드 가능 구성요소	더 큰 번들의 코드 분할을 통해 성능을 높입니다.
ReactDOM	애플리케이션의 최상위 수준에서 사용할 수 있는 DOM 관련 메서드를 제공합니다.
ReactDOMServer	서버 측에서 HTML을 사전 렌더링하는 renderToString() 메서드를 제공합니다.
React Helmet	문서의 `head` 태그에 대한 변경 사항을 관리하도록 지원합니다.
React Router	URL 경로를 React 구성요소에 매핑합니다. 경로는 가장 구체적인 패턴부터 가장 덜 구체적인 패턴까지, 일치하는 패턴으로 표현할 수 있습니다.

Webpack 코드를 하나 이상의 번들로 통합합니다. 이러한 번들은 Managed Runtime에 배포되고 하이드레이션 프로세스의 일부로 브라우저에 로드됩니다.

Retail React App은 PWA Kit React SDK를 통해 클라이언트 측 및 서버 측에 대한 기본 제공 Webpack 구성을 가져옵니다. 대부분의 경우 이러한 구성을 변경할 필요가 없지만, 변경할 경우 webpack.config.js에서 Webpack 구성을 확장할 수 있습니다.

Retail React App의 구조와 컨텐츠를 알아보았으므로, 이제 좀 더 자세히 살펴보겠습니다. 소스 코드, 특히 app/pages의 이커머스 구성요소를 살펴보는 것으로 시작합니다.