AEM Brackets 확장 aem-brackets-extension

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

주제:

작성 대상:

개발자

개요 overview

AEM Brackets 확장은 AEM 구성 요소 및 클라이언트 라이브러리를 편집하는 매끄러운 워크플로를 제공하며 코드 편집기 내에서 Photoshop 파일 및 레이어에 액세스할 수 있는 Brackets 코드 편집기의 기능을 사용합니다. 확장에서 제공하는 간편한 동기화(Maven 또는 File Vault 필요 없음)를 통해 개발자 효율성을 높이고 AEM 지식이 제한된 프론트엔드 개발자가 프로젝트에 참여할 수 있습니다. 또한 이 확장은 HTL(HTML 템플릿 언어)에 대한 일부 지원도 제공하므로 JSP의 복잡성을 제거하여 구성 요소를 보다 쉽고 안전하게 개발할 수 있습니다.

chlimage_1-53

기능 features

AEM Brackets Extension의 주요 기능은 다음과 같습니다.

변경된 파일을 AEM 개발 인스턴스로 자동 동기화합니다.
파일 및 폴더의 수동 양방향 동기화
프로젝트의 전체 콘텐츠 패키지 동기화.
표현식 및 data-sly-* 블록 문에 대한 HTL 코드 완료입니다.

또한 Brackets에는 AEM 프론트엔드 개발자에게 유용한 기능이 많이 포함되어 있습니다.

Photoshop 파일은 레이어, 측정, 색상, 글꼴, 텍스트 등과 같은 PSD 파일에서 정보를 추출하도록 지원합니다.
코드에서 추출된 정보를 쉽게 재사용하기 위해 PSD에서 코드 힌트를 얻습니다.
LESS 및 SCSS와 같은 CSS 전처리기 지원.
또한 보다 구체적인 요구 사항을 충족하는 수백 개의 추가 확장 기능을 제공합니다.

설치 installation

대괄호 brackets

AEM Brackets 확장은 Brackets 버전 1.0 이상을 지원합니다.

brackets.io에서 최신 Brackets 버전을 다운로드합니다.

확장 the-extension

확장을 설치하려면 다음과 같이 진행합니다.

대괄호를 엽니다. 파일 메뉴에서 Extension Manager… 을(를) 선택합니다.
검색 창에 AEM 을(를) 입력하고 AEM Brackets Extension 을(를) 찾습니다.
설치 를 클릭합니다.
설치가 완료되면 대화 상자를 닫고 Extension Manager을 합니다.

시작 getting-started

콘텐츠 패키지 프로젝트 the-content-package-project

확장을 설치한 후 Brackets를 사용하여 파일 시스템에서 컨텐츠 패키지 폴더를 열어 AEM 구성 요소 개발을 시작할 수 있습니다.

프로젝트에는 최소한 다음 항목이 포함되어야 합니다.

jcr_root 폴더(예: myproject/jcr_root)
filter.xml 파일(예: myproject/META-INF/vault/filter.xml). filter.xml 파일의 구조에 대한 자세한 내용은 Workspace 필터 정의를 참조하십시오.

대괄호 파일 메뉴에서 폴더 열기… 를 선택하고 jcr_root 폴더 또는 상위 프로젝트 폴더를 선택합니다.

NOTE

콘텐츠 패키지가 있는 고유한 프로젝트가 없는 경우 HTL TodoMVC 예제를 사용해 보십시오. GitHub에서 ZIP 다운로드 를 클릭하고 로컬로 파일을 추출한 다음 위의 지침에 따라 Brackets에서 jcr_root 폴더를 엽니다. 그런 다음 아래 단계에 따라 프로젝트 설정 을 설정하고, 마지막으로 전체 콘텐츠 패키지 동기화 섹션의 지침에 따라 콘텐츠 패키지 내보내기 를 수행하여 전체 패키지를 AEM 개발 인스턴스에 업로드합니다.

이 단계를 수행한 후에는 AEM 개발 인스턴스의 /content/todo.html URL에 액세스할 수 있어야 하며 Brackets에서 코드를 수정하기 시작하고 웹 브라우저에서 새로 고침을 수행한 후 변경 사항이 AEM 서버에 즉시 동기화되는 방법을 확인할 수 있습니다.