클라이언트 라이브러리 및 프론트엔드 워크플로 client-side-libraries

tutorial/client-side-libraries-startGitHub의 분기를 확인합니다.

$ cd aem-guides-wknd
$ git checkout tutorial/client-side-libraries-start

Maven 기술을 사용하여 로컬 AEM 인스턴스에 코드 베이스를 배포합니다.

$ mvn clean install -PautoInstallSinglePackage

$ mvn clean install -PautoInstallSinglePackage -Pclassic

VSCode 또는 다른 IDE를 사용하여 ui.apps 모듈을 엽니다.

/apps/wknd/clientlibs 경로를 확장하여 Archetype에 의해 생성된 clientlibs를 확인합니다.

아래 섹션에서는 이러한 클라이언트 라이브러리를 더 자세히 살펴보겠습니다.

다음 표에는 클라이언트 라이브러리가 요약되어 있습니다. 클라이언트 라이브러리를 포함한 상세 내용은 여기에서 확인할 수 있습니다.

clientlib-site 및 clientlib-dependencies가 소스 제어에서 무시됨을 확인할 수 있습니다. 해당 항목은 ui.frontend 모듈에 의해 빌드 시점에 생성되므로 설계 단계에서 의도된 결과라고 할 수 있습니다.

ui.frontend 모듈을 열고 src/main/webpack/site로 이동합니다.

main.scss 파일을 엽니다.

main.scss는 ui.frontend 모듈 내 Sass 파일에 대한 진입점입니다. 여기에는 프로젝트의 다양한 Sass 파일에서 사용되는 일련의 브랜드 변수가 들어 있는 _variables.scss 파일이 포함됩니다. _base.scss 파일도 포함되어 있으며 HTML 요소에 대한 몇 가지 기본 스타일을 정의합니다. 정규 표현식에는 src/main/webpack/components 아래에 있는 개별 구성 요소의 스타일이 포함됩니다. 또 다른 정규 표현식에는 src/main/webpack/site/styles 아래의 파일이 포함됩니다.

main.ts 파일을 검사합니다. 여기에는 프로젝트의 모든 .js 또는 .ts 파일을 수집하는 main.scss 및 정규 표현식이 포함됩니다. 이 진입점은 Webpack 구성 파일에서 전체 ui.frontend 모듈의 진입점으로 사용됩니다.

src/main/webpack/site/styles 아래 파일을 검사합니다.

이 파일은 머리글, 바닥글, 주요 콘텐츠 컨테이너와 같은 템플릿의 글로벌 요소에 대한 스타일을 지정합니다. 이러한 파일의 CSS 규칙은 다양한 HTML 요소인 header, main 및 footer를 타기팅합니다. 이러한 HTML 요소는 이전 챕터인 페이지 및 템플릿에서 다룬 정책에 의해 정의되었습니다.

src/main/webpack 아래의 components 폴더를 확장하고 파일을 검사합니다.

각 파일은 Accordion Component와 같은 핵심 구성 요소에 매핑됩니다. 각 핵심 구성 요소는 블록 요소 수정자 또는 BEM 표기법으로 빌드되어 스타일 규칙이 있는 특정 CSS 클래스를 쉽게 타기팅할 수 있습니다. /components 아래의 파일들은 각 구성 요소에 대한 다른 BEM 규칙을 사용하여 AEM Project 아키타입에 의해 스텁되었습니다.

WKND 기본 스타일 wknd-base-styles-src-v3.zip ​을 다운로드하고 파일을 압축 해제 ​합니다.

튜토리얼을 빠르게 진행하기 위해 핵심 구성 요소와 문서 페이지 템플릿의 구조를 기반으로 WKND 브랜드를 구현하는 여러 Sass 파일이 제공됩니다.

이전 단계의 파일로 ui.frontend/src의 내용을 덮어씁니다. Zip 파일의 내용은 다음 폴더를 덮어써야 합니다.

/src/main/webpack
         /components
         /resources
         /site
         /static

변경된 파일을 검사하여 WKND 스타일 구현의 세부 정보를 확인합니다.

명령줄 터미널을 열고 npm install 명령을 사용하여 ui.frontend 모듈을 설치합니다.

$ cd ~/code/aem-guides-wknd/ui.frontend
$ npm install

ui.frontend/package.json을 열고 scripts start 명령에 --env writeToDisk=true를 추가합니다.

{
  "scripts": {
    "start": "webpack-dev-server --open --config ./webpack.dev.js --env writeToDisk=true",
  }
}

다음 명령을 실행하여 관찰 모드에서 Webpack 개발 서버를 시작합니다.

$ npm run watch

이렇게 하면 ui.frontend 모듈에서 소스 파일을 컴파일하고 변경 사항을 http://localhost:4502에 있는 AEM에 동기화합니다.

+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js
+ jcr_root/apps/wknd/clientlibs/clientlib-site
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/css.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies/js.txt
+ jcr_root/apps/wknd/clientlibs/clientlib-dependencies
http://admin:admin@localhost:4502 > OK
+ jcr_root/apps/wknd/clientlibs/clientlib-site/css
+ jcr_root/apps/wknd/clientlibs/clientlib-site/js/site.js
http://admin:admin@localhost:4502 > OK

결국 npm run watch 명령은 이후 AEM과 자동 동기화되는 ui.apps 모듈 내 clientlib-site 및 clientlib-dependencies ​을 채웁니다.

ui.frontend/dist/clientlib-site/site.css 아래에서 site.css 파일을 검사합니다. 이 파일은 Sass 소스 파일을 기반으로 컴파일된 CSS입니다.

ui.frontend/clientlib.config.js 파일을 검사합니다. 이 파일은 /dist의 내용을 클라이언트 라이브러리로 변환하여 ui.apps 모듈로 이동하는 npm 플러그인인 aem-clientlib-generator에 대한 구성 파일입니다.

ui.apps/src/main/content/jcr_root/apps/wknd/clientlibs/clientlib-site/css/site.css에 위치한 ui.apps 모듈 내 site.css 파일을 검사합니다. 이 파일은 ui.frontend 모듈의 site.css 파일과 동일한 복사본이어야 합니다. 이제 이 파일이 ui.apps 모듈 내에 존재하므로 AEM에 배포될 수 없습니다.

http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html에서 LA 스케이트보드장 문서를 엽니다.

이제 업데이트된 문서 스타일을 볼 수 있습니다. 브라우저에서 캐시한 CSS 파일을 지우려면 하드 새로 고침을 수행해야 할 수도 있습니다.

목업과 점점 더 비슷해 보이네요!

ui.frontend 모듈에서 ui.frontend/src/main/webpack/site/_variables.scss 파일을 엽니다.

$brand-primary 색상 변수를 업데이트합니다.

//== variables.css

//== Brand Colors
$brand-primary:          $pink;

변경 사항을 저장합니다.

브라우저로 돌아가서 AEM 페이지를 새로 고쳐서 업데이트를 확인합니다.

변경 사항을 $brand-primary 색상으로 되돌리고 CTRL+C 명령을 사용하여 Webpack 빌드를 중지합니다.

http://localhost:4502/editor.html/conf/wknd/settings/wcm/templates/article-page/structure.html에서 문서 페이지 템플릿 찾기

페이지 정보 아이콘을 클릭하고 메뉴에서 페이지 정책 ​을 선택하여 페이지 정책 대화 상자를 엽니다.

페이지 정보 > 페이지 정책

wknd.dependencies 및 wknd.site에 대한 카테고리는 여기에 열거되어 있습니다. 기본적으로 페이지 정책을 통해 구성된 clientlibs는 CSS를 페이지 헤드에 포함하고 JavaScript를 본문 끝에 포함하도록 분할됩니다. 페이지 헤드에 clientlib JavaScript가 로드되도록 명시적으로 열거할 수 있습니다. wknd.dependencies가 바로 여기에 해당합니다.

http://localhost:4502/editor.html/content/wknd/us/en/magazine/guide-la-skateparks.html에서 문서 페이지 템플릿 ​을 사용하여 생성한 LA 스케이트보드장 페이지로 이동합니다.

페이지 정보 아이콘을 클릭한 다음 메뉴에서 게시됨으로 보기 ​를 선택하여 AEM 편집기 밖에서 문서 페이지를 엽니다.

http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled의 페이지 소스를 확인할 수 있으며 <head>에서 다음 clientlib 참조를 볼 수 있습니다.

<head>
...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.lc-d41d8cd98f00b204e9800998ecf8427e-lc.min.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-78fb9cea4c3a2cc17edce2c2b32631e2-lc.min.css" type="text/css">
...
</head>

clientlibs가 프록시 /etc.clientlibs 엔드포인트를 사용하고 있다는 점에 유의하시기 바랍니다. 다음 clientlib이 페이지 하단에 포함되어 있는지도 확인합니다.

...
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-site.lc-7157cf8cb32ed66d50e4e49cdc50780a-lc.min.js"></script>
<script src="/etc.clientlibs/wknd/clientlibs/clientlib-base.lc-53e6f96eb92561a1bdcc1cb196e9d9ca-lc.min.js"></script>
...
</body>

http://localhost:4502/content/wknd/us/en/magazine/guide-la-skateparks.html?wcmmode=disabled에서 LA 스케이트보드장 문서 페이지의 소스를 복사합니다.

IDE를 다시 엽니다. AEM에서 복사한 마크업을 src/main/webpack/static 아래에 위치한 ui.frontend 모듈의 index.html에 붙여넣습니다.

복사한 마크업을 편집하고 clientlib-site 및 clientlib-dependencies ​에 대한 참조를 제거합니다.

<!-- remove -->
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.js"></script>
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="/etc.clientlibs/wknd/clientlibs/clientlib-site.css" type="text/css">
...
<script type="text/javascript" src="/etc.clientlibs/wknd/clientlibs/clientlib-site.js"></script>

Webpack 개발 서버가 해당 아티팩트를 자동으로 생성하므로 이 참조를 제거해야 합니다.

ui.frontend 모듈 내에서 다음 명령을 실행하여 새 터미널에서 Webpack 개발 서버를 시작합니다.

$ cd ~/code/aem-guides-wknd/ui.frontend/
$ npm start

> aem-maven-archetype@1.0.0 start code/aem-guides-wknd/ui.frontend
> webpack-dev-server --open --config ./webpack.dev.js

이렇게 하면 http://localhost:8080/에서 정적 마크업이 포함된 새 브라우저 창이 열립니다.

src/main/webpack/site/_variables.scss 파일을 편집합니다. $text-color 규칙을 다음으로 바꿉니다.

- $text-color:              $black;
+ $text-color:              $pink;

변경 사항을 저장합니다.

http://localhost:8080에서 변경 사항이 브라우저에 자동으로 반영되는 것을 확인할 수 있습니다.

/aem-guides-wknd.ui.frontend/webpack.dev.js 파일을 검토합니다. 여기에는 webpack-dev-server를 시작하는 데 사용되는 Webpack 구성이 포함되어 있습니다. 로컬로 실행 중인 AEM 인스턴스의 /content와 /etc.clientlibs 경로를 프록시로 설정합니다. 이렇게 하면 이미지와 다른 클라이언트 라이브러리(ui.frontend 코드에 의해 관리되지 않음)를 사용할 수 있습니다.

명령줄에서 CTRL+C를 입력하여 Webpack 서버를 중지 ​할 수 있습니다.