AEM Brackets 확장

개요

AEM Brackets Extension은 AEM 구성 요소 및 클라이언트 라이브러리를 편집하는 매끄러운 워크플로우를 제공하고 코드 편집기 내에서 Photoshop 파일 및 레이어에 액세스할 수 있는 Brackets 코드 편집기의 강력한 기능을 활용합니다. 익스텐션에서 제공되는 간편한 동기화(Maven 또는 File Vault 필요 없음)는 개발자의 효율성을 높여주며, AEM에 대한 지식이 제한된 프런트 엔드 개발자도 프로젝트에 참여할 수 있도록 도와줍니다. 또한 이 익스텐션은 구성 요소 개발을 더 쉽고 안전하게 하기 위해 JSP의 복잡성을 없애고 HTL(HTML Template Language) 에 대한 일부 지원을 제공합니다.

chlimage_1-53

기능

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

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

또한 Brackets에는 AEM 글꼴 엔드 개발자에게 유용한 다양한 기능이 포함되어 있습니다.

레이어, 측정, 색상, 글꼴, 텍스트 등과 같은 PSD 파일에서 정보를 추출하는 Photoshop 파일 지원
PSD의 코드 힌트 기능을 사용하여 코드에 추출된 정보를 손쉽게 재사용할 수 있습니다.
LESS 및 SCSS와 같은 CSS 프리프로세서 지원
또한 보다 구체적인 요구 사항을 충족하는 수백 개의 익스텐션을 추가할 수 있습니다.

설치

Brackets

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

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

확장

확장 프로그램을 설치하려면 다음과 같이 하십시오.

대괄호를 엽니다. 파일 메뉴에서 Extension Manager…
검색 표시줄에 AEM을 입력하고 AEM Brackets 확장을 찾습니다.
설치를 클릭합니다.
설치가 완료된 후 대화 상자와 Extension Manager을 닫습니다.

시작하기

Content-Package 프로젝트

확장자가 설치된 후 Brackets로 파일 시스템에서 content-package 폴더를 열어 AEM 구성 요소 개발을 시작할 수 있습니다.

프로젝트에 적어도 다음이 포함되어야 합니다.

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

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

노트

컨텐츠 패키지가 있는 프로젝트가 없는 경우 HTL TodoMVC 예제를 사용해 볼 수 있습니다. GitHub에서 ZIP 다운로드를 클릭하고 로컬에서 파일을 추출합니다. 위의 지시에 따라 대괄호로 jcr_root 폴더를 엽니다. 그런 다음 아래 절차에 따라 프로젝트 설정을 설정하고, 전체 컨텐츠-패키지 동기화 섹션에 자세히 설명된 대로 콘텐츠 패키지 내보내기를 수행하여 전체 패키지를 AEM 개발 인스턴스에 업로드합니다.

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