Pug로 더 나은 각도 템플릿을 만드는 방법

개발자로서 저는 Angular 앱이 어떻게 구성되어 있고 Angular CLI가 앱을 구성하는 데 사용할 수 있는 다양한 옵션에 감사합니다. 구성 요소는 보기를 구조화하고 코드 재사용성, 보간, 데이터 바인딩 및 보기에 대한 기타 비즈니스 논리를 용이하게 하는 놀라운 수단을 제공합니다.

Angular CLI는 Sass/SCSS, LESS 및 Stylus와 같은 구성 요소 스타일 지정을 위한 여러 내장 CSS 전처리기 옵션을 지원합니다. 그러나 템플릿의 경우 HTML과 SVG의 두 가지 옵션만 사용할 수 있습니다. 이는 Pug, Slim, HAML과 같은 더 효율적인 옵션이 존재함에도 불구하고 있습니다.

이 기사에서는 Angular 개발자로서 Pug를 사용하여 더 나은 템플릿을 더 효율적으로 작성하는 방법을 다룰 것입니다. Angular 앱에 Pug를 설치하고 HTML을 사용하는 기존 앱을 전환하여 Pug를 사용하는 방법을 배웁니다.

Pug(이전에는 Jade로 알려짐)는 템플릿 엔진입니다. 즉, 지정된 데이터를 통합하는 템플릿에서 문서를 생성하는 도구입니다. 이 경우 Pug는 데이터를 가져오고 HTML 문서를 렌더링하는 함수로 컴파일되는 템플릿을 작성하는 데 사용됩니다.

템플릿을 작성하는 보다 간소화된 방법을 제공하는 것 외에도 코드 재사용을 용이하게 하고 JavaScript 코드를 포함할 수 있게 하고 반복자, 조건문 등을 제공하는 mixin과 같은 템플릿 작성을 넘어 여러 가지 유용한 기능을 제공합니다.

HTML은 많은 사람들이 보편적으로 사용하고 템플릿에서 적절하게 작동하지만 DRY가 아니며 특히 더 큰 구성 요소 템플릿에서 읽고 쓰고 유지 관리하기가 상당히 어려울 수 있습니다. Pug가 필요한 이유입니다. Pug를 사용하면 템플릿을 더 간단하게 작성하고 읽을 수 있으며 추가 보너스로 템플릿의 기능을 확장 할 수 있습니다. 이 기사의 나머지 부분에서는 Angular 구성 요소 템플릿에서 Pug를 사용하는 방법을 안내합니다.

퍼그를 사용해야 하는 이유

HTML은 기본적으로 반복적입니다. 대부분의 요소에는 DRY가 아닌 여는 태그와 닫는 태그가 있어야 합니다. HTML로 더 많이 작성해야 할 뿐만 아니라 더 많이 읽어야 합니다. Pug에는 여는 꺾쇠 괄호와 닫는 태그가 없습니다. 따라서 훨씬 적은 양의 코드를 작성하고 읽고 있습니다.

예를 들어 다음은 HTML 테이블입니다.

 <table> <thead> <tr> <th>Country</th> <th>Capital</th> <th>Population</th> <th>Currency</th> </tr> </thead> <tbody> <tr> <td>Canada</td> <td>Ottawa</td> <td>37.59 million</td> <td>Canadian Dollar</td> </tr> <tr> <td>South Africa</td> <td>Cape Town, Pretoria, Bloemfontein</td> <td>57.78 million</td> <td>South African Rand</td> </tr> <tr> <td>United Kingdom</td> <td>London</td> <td>66.65 million</td> <td>Pound Sterling</td> </tr> </tbody> </table>

Pug에서 동일한 테이블이 다음과 같이 표시됩니다.

 table thead tr th Country th Capital(s) th Population th Currency tbody tr td Canada td Ottawa td 37.59 million td Canadian Dollar tr td South Africa td Cape Town, Pretoria, Bloemfontein td 57.78 million td South African Rand tr td United Kingdom td London td 66.65 million td Pound Sterling

두 가지 버전의 테이블을 비교하면 Pug가 HTML보다 훨씬 깨끗해 보이고 코드 가독성이 더 좋습니다. 이 작은 예에서는 무시할 수 있지만 HTML 테이블보다 Pug 테이블에 7줄 적게 작성합니다. 프로젝트에 대해 시간이 지남에 따라 더 많은 템플릿을 생성함에 따라 결국 Pug를 사용하여 더 적은 코드를 작성하게 됩니다.

Angular 템플릿 언어가 제공하는 기능 외에도 Pug는 템플릿에서 달성할 수 있는 것을 확장합니다. 기능(예: 믹스인, 텍스트 및 속성 보간, 조건부, 반복기 등)을 사용하면 전체 개별 구성 요소를 작성하거나 종속성을 가져오고 요구 사항을 충족하기 위해 지시문을 설정하는 것과 달리 Pug를 사용하여 문제를 보다 간단하게 해결할 수 있습니다.

퍼그의 일부 기능

Pug는 다양한 기능을 제공하지만 사용할 수 있는 기능은 Pug를 프로젝트에 통합하는 방법에 따라 다릅니다. 다음은 유용할 수 있는 몇 가지 기능입니다.

1. include 를 사용하여 템플릿에 외부 Pug 파일 추가
   
   예를 들어 더 간결한 템플릿을 원하지만 추가 구성 요소를 만들 필요가 없다고 가정해 보겠습니다. 템플릿에서 섹션을 가져와 부분 템플릿에 넣은 다음 원래 템플릿에 다시 포함할 수 있습니다.
   
   예를 들어, 이 홈 페이지 구성 요소에서 '정보' 및 '서비스' 섹션은 외부 파일에 있고 홈 페이지 구성 요소에 포함됩니다.
   

    //- home.component.pug h1 Leone and Sons h2 Photography Studio include partials/about.partial.pug include partials/services.partial.pug

    //- about.partial.pug h2 About our business p Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    //- services.partial.pug h2 Services we offer P Our services include: ul li Headshots li Corporate Event Photography

   

2. mixins를 사용하여 코드 블록 재사용 .
   
   예를 들어, 코드 블록을 재사용하여 일부 버튼을 생성하고 싶다고 가정해 보겠습니다. mixin을 사용하여 해당 코드 블록을 재사용합니다.
   

    mixin menu-button(text, action) button.btn.btn-sm.m-1('(click)'=action)&attributes(attributes)= text +menu-button('Save', 'saveItem()')(class="btn-outline-success") +menu-button('Update', 'updateItem()')(class="btn-outline-primary") +menu-button('Delete', 'deleteItem()')(class="btn-outline-danger") 

   

3. 조건문을 사용하면 조건 충족 여부에 따라 코드 블록과 주석을 쉽게 표시 할 수 있습니다.
   

    - var day = (new Date()).getDay() if day == 0 p We're closed on Sundays else if day == 6 p We're open from 9AM to 1PM else p We're open from 9AM to 5PM

   

4. each 및 while 과 같은 반복자는 반복 기능을 제공합니다 .
   

    ul each item in ['Eggs', 'Milk', 'Cheese'] li= item ul while n < 5 li= n++ + ' bottles of milk on the wall'

   

   

5. 인라인 JavaScript는 위의 예에서 설명한 것처럼 Pug 템플릿으로 작성할 수 있습니다 .
6. 보간이 가능 하며 태그 및 속성으로 확장됩니다.
   

    - var name = 'Charles' p Hi! I'm #{name}. p I'm a #[strong web developer]. a(href='https://about.me/${name}') Get to Know Me

   

7. 필터를 사용하면 Pug 템플릿에서 다른 언어를 사용할 수 있습니다 .
   
   예를 들어 JSTransformer Markdown 모듈을 설치한 후 Pug 템플릿에서 Markdown을 사용할 수 있습니다.
   

    :markdown-it # Charles the Web Developer ![Image of Charles](https://charles.com/profile.png) ## About Charles has been a web developer for 20 years at **Charles and Co Consulting.** 

   

Pug에서 제공하는 몇 가지 기능입니다. Pug의 문서에서 보다 광범위한 기능 목록을 찾을 수 있습니다.

Angular 앱에서 Pug를 사용하는 방법

Angular CLI 6 이상을 사용하는 신규 앱과 기존 앱 모두에 대해 ng-cli-pug-loader 를 설치해야 합니다. Pug 템플릿용 Angular CLI 로더입니다.

새 구성 요소 및 프로젝트의 경우

1. ng-cli-pug-loader 설치합니다.
   

    ng add ng-cli-pug-loader

2. 기본 설정에 따라 구성 요소를 생성합니다.
   
   예를 들어 홈 페이지 구성 요소를 생성한다고 가정해 보겠습니다.
   

    ng gc home --style css -m app

3. HTML 파일 확장자 .html 을 Pug 확장자 .pug 로 변경합니다. 처음 생성된 파일에는 HTML이 포함되어 있으므로 해당 내용을 삭제하고 대신 Pug로 새로 시작하도록 선택할 수 있습니다. 그러나 HTML은 여전히 ​​Pug 템플릿에서 작동할 수 있으므로 그대로 둘 수 있습니다.
4. 구성 요소 데코레이터에서 템플릿 확장자를 .pug 로 변경합니다.
   

    @Component({ selector: 'app-component', templateUrl: './home.component.pug', styles: ['./home.component.css'] })

기존 구성 요소 및 프로젝트의 경우

1. ng-cli-pug-loader 설치합니다.
   

    ng add ng-cli-pug-loader

2. html2pug CLI 도구를 설치합니다. 이 도구는 HTML 템플릿을 Pug로 변환하는 데 도움이 됩니다.
   

    npm install -g html2pug

3. HTML 파일을 Pug로 변환하려면 다음을 실행하십시오.
   

    html2pug -f -c < [HTML file path] > [Pug file path]

   우리는 완전한 HTML 파일이 아니라 HTML 템플릿으로 작업하고 있기 때문에 html 및 body 태그에서 생성하는 템플릿을 래핑하지 않아야 함을 html2pug 에 나타내기 위해 -f 를 전달해야 합니다. -c 플래그를 사용하면 html2pug 가 요소의 속성을 변환하는 동안 쉼표로 구분해야 함을 알 수 있습니다. 이것이 왜 중요한지 아래에서 다루겠습니다.
4. 새 구성 요소 및 프로젝트 섹션에 설명된 대로 구성 요소 데코레이터에서 템플릿 확장자를 .pug 로 변경합니다.
5. 서버를 실행하여 Pug 템플릿이 렌더링되는 방식에 문제가 없는지 확인합니다.
   
   문제가 있는 경우 HTML 템플릿을 참조로 사용하여 문제의 원인을 파악합니다. 드물기는 하지만 들여쓰기 문제 또는 인용되지 않은 속성일 수 있습니다. Pug 템플릿이 렌더링되는 방식에 만족하면 HTML 파일을 삭제합니다.

HTML에서 Pug 템플릿으로 마이그레이션할 때 고려해야 할 사항

ng-cli-pug-loader 와 함께 인라인 Pug 템플릿을 사용할 수 없습니다. 이것은 Pug 파일만 렌더링하고 구성 요소 데코레이터에 정의된 인라인 템플릿은 렌더링하지 않습니다. 따라서 모든 기존 템플릿은 외부 파일이어야 합니다. 인라인 HTML 템플릿이 있는 경우 해당 템플릿에 대한 외부 HTML 파일을 만들고 html2pug 를 사용하여 Pug로 변환합니다.

변환된 후에는 바인딩 및 속성 지시문을 사용하는 템플릿을 수정해야 할 수 있습니다. ng-cli-pug-loader 를 사용하려면 Angular의 바인딩된 속성 이름을 작은따옴표나 큰따옴표로 묶거나 쉼표로 구분해야 합니다. 이 문제를 해결하는 가장 쉬운 방법은 html2pug 와 함께 -c 플래그를 사용하는 것입니다. 그러나 이것은 여러 속성이 있는 요소의 문제만 수정합니다. 단일 속성을 가진 요소의 경우 따옴표만 사용하십시오.

여기에 설명된 많은 설정은 태스크 러너 또는 스크립트를 사용하거나 대규모 변환을 생성하기로 선택한 경우 사용자 지정 Angular 회로도를 사용하여 자동화할 수 있습니다. 템플릿이 몇 개 있고 증분 변환을 수행하려는 경우 한 번에 하나의 파일만 변환하는 것이 좋습니다.

Pug 템플릿의 Angular 템플릿 언어 구문

대부분의 경우 Angular 템플릿 언어 구문은 Pug 템플릿에서 변경되지 않은 상태로 유지되지만 바인딩 및 일부 지시문(위에서 설명한 대로)과 관련하여 () , [] 및 [()] 이후 따옴표와 쉼표를 사용해야 합니다. [()] Pug 템플릿의 컴파일을 방해합니다. 다음은 몇 가지 예입니다.

 //- [src], an attribute binding and [style.border], a style binding are separated using a comma. Use this approach when you have multiple attributes for the element, where one or more is using binding. img([src]='itemImageUrl', [style.border]='imageBorder') //- (click), an event binding needs to be enclosed in either single or double quotes. Use this approach for elements with just one attribute. button('(click)'='onSave($event)') Save

ngClass , ngStyle 및 ngModel 같은 특성 지시문은 따옴표로 묶어야 합니다. *ngIf , *ngFor , *ngSwitchCase 및 *ngSwitchDefault ngSwitchDefault 같은 구조적 지시문도 따옴표로 묶거나 쉼표와 함께 사용해야 합니다. 템플릿 참조 변수(예: #var )는 Pug 템플릿 컴파일을 방해하지 않으므로 따옴표나 쉼표가 필요하지 않습니다. {{ }} 로 둘러싸인 템플릿 표현식은 영향을 받지 않습니다.

Angular 템플릿에서 Pug 사용의 단점과 단점

Pug는 편리하고 워크플로를 개선하지만 사용에 몇 가지 단점이 있고 ng-cli-pug-loader 를 사용할 때 고려해야 할 절충안이 있습니다.

파일이 .partial.pug 또는 .include.pug 로 끝나거나 mixins.pug 라고 불리는 경우가 아니면 include 을 사용하여 템플릿에 파일을 포함할 수 없습니다. 이 외에도 ng-cli-pug-loader 에서는 템플릿 상속이 작동하지 않으므로 유용한 Pug 기능임에도 불구하고 블록 사용, Pug 코드 앞에 추가 및 추가가 불가능합니다.

Angular CLI는 HTML 템플릿으로 구성 요소만 생성하므로 Pug 파일은 수동으로 생성해야 합니다. 생성된 HTML 파일을 삭제하고 Pug 파일을 생성하거나 HTML 파일 확장자를 변경한 다음 구성 요소 데코레이터에서 templateUrl 을 변경해야 합니다. 이것은 스크립트, 회로도 또는 Task Runner를 사용하여 자동화할 수 있지만 솔루션을 구현해야 합니다.

기존의 더 큰 Angular 프로젝트에서 HTML 템플릿에서 Pug 템플릿으로 전환하는 것은 경우에 따라 많은 작업과 복잡성을 수반합니다. 전환을 수행하면 파일별로 수정하거나 사용자 정의 도구를 사용하여 자동으로 수정해야 하는 많은 코드가 깨집니다. 요소의 바인딩 및 일부 Angular 지시문은 따옴표로 묶거나 쉼표로 구분해야 합니다.

Pug에 익숙하지 않은 개발자는 프로젝트에 통합하기 전에 먼저 구문을 배워야 합니다. Pug는 꺾쇠 괄호와 닫는 태그가 없는 HTML이 아니며 학습 곡선이 필요합니다.

Pug를 작성하고 Angular 템플릿에서 해당 기능을 사용할 때 ng-cli-pug-loader 는 Pug 템플릿에 구성 요소 속성에 대한 액세스 권한을 부여하지 않습니다. 결과적으로 이러한 속성은 조건부, 반복기 및 인라인 코드에서 변수로 사용할 수 없습니다. Angular 지시문 및 템플릿 표현식도 Pug 변수에 액세스할 수 없습니다. 예를 들어, Pug 변수의 경우:

 //- app.component.pug - var shoppingList = ['Eggs', 'Milk', 'Flour'] //- will work ul each item in shoppingList li= item //- will not work because shoppingList is a Pug variable ul li(*ngFor="let item of shoppingList") {{item}}

다음은 구성 요소의 속성이 있는 예입니다.

 //- src/app/app.component.ts export class AppComponent{ shoppingList = ['Eggs', 'Milk', 'Flour']; }

 //- app.component.pug //- will not work because shoppingList is a component property and not a Pug variable ul each item in shoppingList li= item //- will work because shoppingList is a property of the component ul li(*ngFor="let item of shoppingList") {{item}}

마지막으로 index.html 은 Pug 템플릿이 될 수 없습니다. ng-cli-pug-loader 는 이것을 지원하지 않습니다.

결론

Pug는 Angular 앱에서 사용할 수 있는 놀라운 리소스가 될 수 있지만 새로운 또는 기존 프로젝트를 배우고 통합하려면 약간의 투자가 필요합니다. 도전할 준비가 되어 있다면 Pug의 문서를 살펴보고 구문에 대해 자세히 알아보고 프로젝트에 추가할 수 있습니다. ng-cli-pug-loader 는 훌륭한 도구이지만 일부 영역에서는 부족할 수 있습니다. 프로젝트에서 Pug가 작동하는 방식을 조정하려면 프로젝트 요구 사항을 충족하는 Angular 회로도를 만드는 것이 좋습니다.