탐색 및 라우팅 추가 navigation-routing

브라우저를 열고 AEM, http://localhost:4502/에 로그인합니다. 시작 코드 베이스를 이미 배포해야 합니다.

SPA 페이지 템플릿(으)로 이동합니다. http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-page-template/structure.html.

가장 바깥쪽의 루트 레이아웃 컨테이너 ​를 선택하고 정책 아이콘을 클릭합니다. 작성을 위해 잠기지 않은 레이아웃 컨테이너 ​를 선택하려면 not ​에 주의하십시오.

이름이 SPA 구조 ​인 새 정책 만들기:

허용된 구성 요소 > 일반 > 레이아웃 컨테이너 구성 요소를 선택합니다.

허용된 구성 요소 > WKND SPA REACT - 구조 ​에서 탐색 구성 요소를 선택합니다.

허용된 구성 요소 > WKND SPA REACT - 콘텐츠 ​에서 이미지 및 텍스트 구성 요소를 선택합니다. 총 4개의 구성 요소를 선택해야 합니다.

완료 ​를 클릭하여 변경 내용을 저장합니다.

페이지를 새로 고치고 잠기지 않은 레이아웃 컨테이너 위에 탐색 구성 요소를 추가하십시오.

탐색 구성 요소를 선택하고 정책 아이콘을 클릭하여 정책을 편집합니다.

SPA 탐색 ​의 정책 제목 ​을 사용하여 새 정책을 만듭니다.

속성 ​에서:

• 탐색 루트 ​을(를) /content/wknd-spa-react/us/en(으)로 설정합니다.
• 루트 수준 제외 ​를 1(으)로 설정합니다.
• 모든 하위 페이지 수집 ​을 선택 취소합니다.
• 탐색 구조 깊이 ​을(를) 3(으)로 설정합니다.

/content/wknd-spa-react/us/en 아래에 있는 탐색 수준을 수집합니다.

변경 내용을 저장하면 템플릿의 일부로 채워진 Navigation이(가) 표시됩니다.

사이트 콘솔로 이동합니다. http://localhost:4502/sites.html/content/wknd-spa-react/us/en/home. WKND SPA React 홈 페이지 ​를 선택하고 만들기 > 페이지 ​를 클릭합니다.

템플릿 ​에서 SPA 페이지 ​를 선택합니다. 속성 ​에서 제목 및 페이지-1 ​에 대한 페이지 1 ​을(를) 이름으로 입력하십시오.

만들기 ​를 클릭하고 대화 상자 팝업에서 열기 ​를 클릭하여 AEM SPA 편집기에서 페이지를 엽니다.

새 Text 구성 요소를 기본 레이아웃 컨테이너 ​에 추가합니다. 구성 요소를 편집하고 RTE 및 H2 요소를 사용하여 페이지 1 텍스트를 입력하십시오.

이미지와 같은 콘텐츠를 자유롭게 추가할 수 있습니다.

AEM Sites 콘솔로 돌아가서 위의 단계를 반복하여 페이지 2 ​라는 두 번째 페이지를 페이지 1 ​의 형제 페이지로 만듭니다.

마지막으로 세 번째 페이지인 페이지 3 ​을(를) 만들고 페이지 2 ​의 자식(으)로 만듭니다. 사이트 계층 구조가 완료되면 다음과 같이 표시됩니다.

이제 탐색 구성 요소를 사용하여 SPA의 다양한 영역으로 이동할 수 있습니다.

AEM 편집기 외부의 페이지를 엽니다. http://localhost:4502/content/wknd-spa-react/us/en/home.html. 탐색 구성 요소를 사용하여 앱의 다양한 보기로 이동합니다.

탐색할 때 브라우저의 개발자 도구를 사용하여 네트워크 요청을 검사합니다. 아래 스크린샷은 Google Chrome 브라우저에서 캡처됩니다.

초기 페이지 로드 후 후속 탐색으로 인해 전체 페이지가 새로 고쳐지지 않고 이전에 방문한 페이지로 돌아갈 때 네트워크 트래픽이 최소화되는지 확인하십시오.

새 탭에서 AEM에서 제공하는 JSON 모델 API를 엽니다. http://localhost:4502/content/wknd-spa-react/us/en.model.json. 브라우저 확장을 사용하여 JSON 형식 지정을 수행하는 것이 유용할 수 있습니다.

이 JSON 콘텐츠는 SPA이 처음 로드될 때 요청됩니다. 외부 구조는 다음과 같습니다.

{
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {},
   "/content/wknd-spa-react/us/en/home/page-2/page-3": {}
   }
}

:children에서 만들어진 각 페이지에 대한 항목이 표시됩니다. 모든 페이지의 컨텐츠는 이 초기 JSON 요청에 있습니다. 콘텐츠가 이미 클라이언트측에서 사용 가능하기 때문에 탐색 라우팅을 사용하면 SPA의 후속 보기가 빠르게 로드됩니다.

초기 JSON 요청에 SPA 콘텐츠의 ALL ​을(를) 로드하는 것은 좋지 않습니다. 초기 페이지 로드 속도가 느려질 수 있기 때문입니다. 다음으로 페이지의 계층 구조 깊이를 어떻게 수집하는지 살펴보겠습니다.

http://localhost:4502/editor.html/conf/wknd-spa-react/settings/wcm/templates/spa-app-template/structure.html의 SPA 루트 템플릿으로 이동합니다.

페이지 속성 메뉴 > 페이지 정책 ​을 클릭합니다.

SPA 루트 템플릿에는 수집된 JSON 콘텐츠를 제어할 수 있는 계층 구조 탭이 추가로 있습니다. 구조 깊이 ​은(는) 사이트 계층 구조에서 루트 아래에 있는 하위 페이지를 수집하는 정도를 결정합니다. 구조 패턴 필드를 사용하여 정규 표현식에 따라 추가 페이지를 필터링할 수도 있습니다.

구조 깊이 ​을(를) 2(으)로 업데이트:

정책에 대한 변경 내용을 저장하려면 완료 ​를 클릭합니다.

JSON 모델 http://localhost:4502/content/wknd-spa-react/us/en.model.json을(를) 다시 엽니다.

{
"language": "en",
"title": "en",
"templateName": "spa-app-template",
"designPath": "/libs/settings/wcm/designs/default",
"cssClassNames": "spa page basicpage",
":type": "wknd-spa-react/components/spa",
":items": {},
":itemsOrder": [],
":hierarchyType": "page",
":path": "/content/wknd-spa-react/us/en",
":children": {
   "/content/wknd-spa-react/us/en/home": {},
   "/content/wknd-spa-react/us/en/home/page-1": {},
   "/content/wknd-spa-react/us/en/home/page-2": {}
   }
}

페이지 3 경로가 초기 JSON 모델에서 제거되었습니다. /content/wknd-spa-react/us/en/home/page-2/page-3. 페이지 3 ​이(가) 계층 구조의 수준 3에 있으며 최대 수준 2의 콘텐츠만 포함하도록 정책을 업데이트했기 때문입니다.

SPA 홈 페이지 http://localhost:4502/content/wknd-spa-react/us/en/home.html을(를) 다시 열고 브라우저의 개발자 도구를 엽니다.

페이지를 새로 고치면 SPA 루트인 /content/wknd-spa-react/us/en.model.json에 대한 XHR 요청이 표시됩니다. 자습서에서 이전에 만든 SPA Root 템플릿에 대한 계층 깊이 구성에 따라 세 개의 하위 페이지만 포함됩니다. 여기에는 페이지 3 ​이(가) 포함되지 않습니다.

개발자 도구를 연 상태에서 Navigation 구성 요소를 사용하여 페이지 3(으)로 바로 이동합니다.

/content/wknd-spa-react/us/en/home/page-2/page-3.model.json에 새 XHR 요청이 수행되었는지 확인합니다.

AEM 모델 관리자는 페이지 3 JSON 콘텐츠를 사용할 수 없다는 것을 이해하고 추가 XHR 요청을 자동으로 트리거합니다.

http://localhost:4502/content/wknd-spa-react/us/en/home/page-2.html(으)로 직접 이동하여 딥링크를 실험해 보십시오. 또한 브라우저의 뒤로 단추가 계속 작동하는지 확인하십시오.

IDE에서 ui.frontend/src/index.js에 있는 index.js 파일을 엽니다.

/* index.js */
import { Router } from 'react-router-dom';
...
...
 ModelManager.initialize().then(pageModel => {
    const history = createBrowserHistory();
    render(
    <Router history={history}>
        <App
        history={history}
        cqChildren={pageModel[Constants.CHILDREN_PROP]}
        cqItems={pageModel[Constants.ITEMS_PROP]}
        cqItemsOrder={pageModel[Constants.ITEMS_ORDER_PROP]}
        cqPath={pageModel[Constants.PATH_PROP]}
        locationPathname={window.location.pathname}
        />
    </Router>,
    document.getElementById('spa-root')
    );
});

App이(가) React Router의 Router 구성 요소에 래핑되어 있습니다. AEM SPA Editor JS SDK에서 제공하는 ModelManager은(는) JSON 모델 API를 기반으로 AEM Pages에 동적 경로를 추가합니다.

ui.frontend/src/components/Page/Page.js에서 Page.js 파일을 엽니다.

class AppPage extends Page {
  get containerProps() {
    let attrs = super.containerProps;
    attrs.className =
      (attrs.className || '') + ' page ' + (this.props.cssClassNames || '');
    return attrs;
  }
}

export default MapTo('wknd-spa-react/components/page')(
  withComponentMappingContext(withRoute(AppPage))
);

Page SPA 구성 요소는 MapTo 함수를 사용하여 AEM의 Pages ​을(를) 해당 SPA 구성 요소에 매핑합니다. withRoute 유틸리티는 SPA을 cqPath 속성에 따라 적절한 AEM 하위 페이지로 동적으로 라우팅하는 데 도움이 됩니다.

ui.frontend/src/components/Header/Header.js에서 Header.js 구성 요소를 엽니다.

Header을(를) 업데이트하여 Link에서 <h1> 태그를 홈 페이지에 래핑합니다.

  //Header.js
  import React, {Component} from 'react';
+ import {Link} from 'react-router-dom';
  require('./Header.css');

export default class Header extends Component {

    render() {
        return (
            <header className="Header">
            <div className="Header-container">
+              <Link to="/content/wknd-spa-react/us/en/home.html">
                    <h1>WKND</h1>
+              </Link>
            </div>
            </header>
        );
    }

기본 <a> 앵커 태그를 사용하는 대신 React Router에서 제공한 <Link>을(를) 사용합니다. to=이(가) 올바른 경로를 가리키면 SPA이 해당 경로로 전환되고 not ​이(가) 전체 페이지 새로 고침을 수행합니다. 여기서는 Link의 사용을 설명하기 위해 홈 페이지에 대한 링크를 하드 코딩합니다.

ui.frontend/src/App.test.js의 App.test.js에서 테스트를 업데이트합니다.

+ import { BrowserRouter as Router } from 'react-router-dom';
  import App from './App';

  it('renders without crashing', () => {
    const div = document.createElement('div');
-   ReactDOM.render(<App />, div);
+   ReactDOM.render(<Router><App /></Router>, div);
  });

App.js에서 참조된 정적 구성 요소 내에서 React Router의 기능을 사용하고 있으므로 이를 설명하기 위해 단위 테스트를 업데이트해야 합니다.

터미널을 열고 프로젝트의 루트로 이동한 다음 Maven 기술을 사용하여 프로젝트를 AEM에 배포합니다.

$ cd aem-guides-wknd-spa.react
$ mvn clean install -PautoInstallSinglePackage

AEM의 SPA 페이지 중 하나로 이동합니다. http://localhost:4502/content/wknd-spa-react/us/en/home/page-1.html

Navigation 구성 요소를 사용하여 탐색하는 대신 Header에서 링크를 사용하십시오.

전체 페이지 새로 고침이 트리거되지 않음 ​이며 SPA 라우팅이 작동하는지 확인하십시오.

필요한 경우 표준 <a> 앵커 태그를 사용하여 Header.js 파일로 테스트합니다.

<a href="/content/wknd-spa-react/us/en/home.html">
    <h1>WKND</h1>
</a>

이렇게 하면 SPA 라우팅과 일반 웹 페이지 링크의 차이점을 보여주는 데 도움이 됩니다.