챔피언의 비교: Angular vs Vue

올리비아 오레멕

현재 제작자들이 공통적으로 사용하고 지속적으로 개발하는 몇 가지 프론트엔드 프레임워크가 있으며, 각 프레임워크는 서로 조금씩 다릅니다. 하지만 공통점이 있을 수 있습니다. 다음은 개발 프로세스에 따른 비교입니다 - Google의 Angular와 오픈 소스 Vue.js:

프로젝트 설정

가장 빠르게 시작할 수 있는 방법은 프로젝트 를 사용하여 프레임워크 작성자가 제공하는 CLI. 둘 다 꽤 좋은 서비스를 제공하지만 몇 가지 차이점이 있습니다, Vue 에는 더 많은 옵션이 제공되므로 처음부터 필요에 맞게 프로젝트를 조정할 수 있습니다. 다음 중 하나를 선택할 수 있습니다. Vue 버전라우팅을 사용해야 하는지 여부를 확인하세요. 타입스크립트, CSS 전처리기 또는 린터를 바로 설정할 수 있습니다. 또한 테스트를 설정할지(단위 또는 E2E) 결정할 수 있습니다.

Angular 에는 콘솔에서 바로 구성 요소, 서비스, 인터페이스 및 지시문을 생성할 수 있는 생성기가 포함되어 있는데, 제 경험상 폴더, 파일 및 중복된 코드 특히 MVC 패턴을 사용할 때는 더욱 그렇습니다. 타입스크립트는 다음과 같이 기본 제공됩니다. Angular 를 사용해야 한다는 압박감을 느낄 수 있습니다. 아직 사용해 보지 않으셨다면 아래에서 사용해보셔야 하는 이유를 간편하게 소개해 드립니다. 여기.

처음 시작할 때, Angular의 CLI 는 라우팅 또는 선호하는 CSS 전처리기에 대해서만 묻습니다. Vue를 사용하면 애플리케이션의 구조와 스타일을 결정할 여지가 많지 않습니다. 그러나 사용하도록 요청하는 규칙을 따르려면 CLI가 모든 과정을 안내해 줄 것입니다.

프로젝트 구조

Vue 는 SFC(단일 파일 컴포넌트)를 사용하므로 신규 개발자가 프레임워크 사용을 시작하고 코드에 익숙해지는 것이 매우 간단합니다.

지시어

Vue 또한 'v-if, v-for'와 같은 지시어가 기본으로 제공되며, 이는 거의 복사본에 가깝기 때문에 매우 직관적으로 사용할 수 있습니다. Angular 하나. Vue 는 양방향 데이터 바인딩에 동일한 규칙을 사용합니다(예: `v-model`에 v-를 접두사로 붙이고 @/v-on을 추가하여 무언가에 반응하고 있음을 표시합니다). Angular 이벤트 바인딩에는 괄호를, 속성 바인딩에는 대괄호(예: `(change), [ngStyle], [(ngModel)]`)를 사용하여 어느 방향으로 가는지 표시하여 구분합니다.

In Vue를 사용하면 구조 자체가 간단하고 스타일시트와 로직을 위한 별도의 파일을 만들 필요가 없으므로 모든 것이 체계적이고 접근하기 쉽습니다. 물론입니다, Vue 에는 프로젝트를 만들 때 따라야 할 권장 규칙을 찾을 수 있는 스타일 가이드가 함께 제공되지만, 필수 규칙은 몇 가지에 불과합니다.

이벤트

이 경우입니다, Vue 는 더 편리한 해결책을 다시 제공합니다. 즉, 자식 컴포넌트에서 부모 컴포넌트로 이벤트를 방출하려면 ( Vue 3 컴포지션 API )는 설정의 컨텍스트 객체에서 메서드를 가져와서 그 순간 필요한 것을 간단히 구현합니다:

setup(props, { emit }) { const componentMethodYouWantToUseSomewhere = () => { emit('customNameOfYourEvent', dataYouWantToPass); } } }

다른 이벤트에 대한 응답으로 템플릿에서 직접 수행할 수도 있습니다.

In Angular를 사용하려면 먼저 다음과 같이 이벤트이미터를 정의해야 합니다:

@Output() customNameForYourEmitter = 새로운 이벤트이미터();

그런 다음 이벤트이미터에서 emit 메서드를 호출해야 합니다:

this.customNameForYourEmitter.emit(this.theDataYouWantToPass);

슬롯/콘텐츠 투사

두 프레임워크 모두 약간의 차이만 있을 뿐, 자식 태그 안에 HTML을 추가하는 것만으로 부모 컴포넌트에서 자식으로 콘텐츠(단일 및 다중)를 쉽게 이동할 수 있습니다:

Vue:

``

Angular:

기본값입니다:
    

명명된 슬롯:

<p yourname>
   이것은 명명된 슬롯입니다.
  </p>
  <p>기본 슬롯입니다.</p>

그러나 애플리케이션의 일부를 조건부로 렌더링하려는 경우, Vue 보다 더 직관적입니다. Angular 를 추가하여 더 빠르게 수행할 수 있습니다. v-if 지시어를 태그를 사용하면 현재 필요한 부분만 렌더링할 수 있습니다.

동안 ng-콘텐츠 가 항상 렌더링되는 경우, 이 경우에는 ng-template를 클릭하고 나중에 사용자 지정 지시문을 생성합니다:

<div *ngif="conditionToBeMet" [id]="contentId">
    <ng-container [ngtemplateoutlet]="content.templateRef"></ng-container>
</div>

@디렉티브({
  selector: '[customDirectiveName]'
})
export class CustomDirective {
  constructor(public templateRef: TemplateRef) {}
}

그리고 당신의 이름 때문에 ng-template 속성을 사용하면 Angular는 무엇을 렌더링해야 하는지 알 수 있습니다:

또한 컴포넌트 내에서 템플릿을 투사하여 @ContentChild 를 클릭하여 적절한 템플릿을 가져옵니다:

@ContentChild(CustomDirective) 콘텐츠! 커스텀디렉티브;

서비스 대 스토어

Angular 의 핵심은 모델에 서비스를 사용할 수 있는 MVC 디자인 패턴을 사용하도록 권장합니다. 따라서 애플리케이션에서 데이터를 자유롭게 조작하려면 의존성 주입 패턴을 배워야 합니다. 이 패턴을 사용하면 API 호출의 부작용을 분리하고 현재 필요한 부분만 주입하여 전체 프로젝트에서 동일한 로직을 사용할 수 있으며, 모듈식 접근 방식이기도 합니다.

Angular 는 RxJs 옵저버와 함께 보다 반응적인 접근 방식을 사용하려는 경우를 대비해 Redux 패턴을 기반으로 하는 Ngrx/store 프레임워크도 함께 제공됩니다. 여기에는 컴포넌트 및/또는 서비스에서 고유한 이벤트를 전송하는 데 사용되는 액션, 수행하려는 부작용이나 비동기 작업을 처리하는 효과, 상태를 변경하는 리듀서가 함께 제공됩니다.

In Vue와 같이 애플리케이션의 상태를 관리하고 구성하는 데 도움이 되는 액션, 뮤테이션 및 게터와 같은 도구가 포함된 상태 관리용 Vuex 라이브러리를 사용하는 것이 일반적인 접근 방식입니다(Ngrx/store와 마찬가지로). 사용자 스토어 또는 카트 스토어와 같이 보기에 대해 서로 다른 스토어를 설정하여 모듈화할 수 있지만, 이름 간격 문제가 발생할 수 있습니다. 네임스페이스: true 프로퍼티를 스토어 선언에 추가합니다.

다음은 일부 데이터를 가져오는 작업을 수행할 때 서비스 기반 접근 방식과 Vuex 접근 방식을 비교한 것입니다. 제품 상점에 대한 데이터:

주입 가능() // 데코레이터를 사용하여 나중에 DI에서 사용할 것임을 나타냅니다.
export 클래스 ProductsService {
  비공개 제품: Product[] = [];

  constructor(private backend: BackendService) { }

  getProducts() {
    this.backend.getAll(Product).then( (products: Product[]) => {
      //제품에 원하는 대로
    });
    this.products를 반환합니다;
  }
}

그런 다음 컴포넌트에서 사용할 서비스를 주입합니다:
constructor(private service: HeroService) { }

In Vue를 사용하면 백엔드 호출을 수행하는 액션을 간단히 전송합니다:

store.dispatch(getAllProducts)

그리고 actions.ts 파일에 액션을 정의합니다:

액션: {
getAllProducts ({ commit }){
    commit('setProducts', await getProducts();); // 데이터를 가져와서 스토어에 결과를 넣습니다.
}}

데이터 가져오기

함께 VueAxios/Fetch 또는 원하는 라이브러리를 사용할 수 있으며, 약속이나 가장 적합한 접근 방식으로 비동기 호출을 처리하기만 하면 되기 때문에 매우 간단합니다.

try {
http.get('https://url.to.get.data')
    .then(res => res.json())
    .then(data => console.log('무엇이든 해야 합니다'))
} catch (e) {
    //handle error
}

Angular 는 관측값을 사용하는 HttpClient 라이브러리와 함께 제공되는데, 이를 제대로 사용하거나 데이터를 조작하려면 RxJs를 배워야 한다는 또 다른 이점이 있습니다. 다시 말하지만, 이 추상적인 구조를 처음부터 유창하게 익히고 친숙하게 느끼는 것은 상당히 부담스러울 수 있습니다.

원하는 경우 Axios를 사용할 수 있지만 Axios GitHub 페이지에 따르면 'Axios는 다음에서 제공되는 $http 서비스에서 크게 영감을 받았습니다. Angular'

private getAllItems(): void {
this.http
.get('https://url.to.fetch.data')

.pipe(
pluck('results'),
tap(console.log('여기서 원하는 부작용을 사용하세요'))
catchError((error) => {
        //에러 처리
})
)
.subscribe((결과: ResultType[])
    //지정된 출력에 대한 최종 연산
)
}