window.pipedriveLeadboosterConfig = { base: 'leadbooster-chat.pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster가 이미 존재합니다') } else { w.LeadBooster = { q: [], on: 함수 (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: 함수 (n) { this.q.push({ t: 't', n: n }) }, } } })() 챔피언의 비교: Angular 대 Vue - The Codest
The Codest
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 산업 분야
    • 핀테크 및 뱅킹
    • E-commerce
    • 애드테크
    • 헬스 테크
    • 제조
    • 물류
    • 자동차
    • IOT
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
  • 회사 소개
  • 서비스
    • 소프트웨어 개발
      • 프론트엔드 개발
      • 백엔드 개발
    • Staff Augmentation
      • 프론트엔드 개발자
      • 백엔드 개발자
      • 데이터 엔지니어
      • 클라우드 엔지니어
      • QA 엔지니어
      • 기타
    • IT 자문
      • 감사 및 컨설팅
  • 가치
    • CEO
    • CTO
    • 배달 관리자
  • 우리 팀
  • Case Studies
  • 방법 알아보기
    • 블로그
    • 모임
    • 웹 세미나
    • 리소스
채용 정보 연락하기
뒤로 화살표 뒤로 가기
2021-12-22
소프트웨어 개발

챔피언의 비교: Angular vs Vue

올리비아 오레멕

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

프로젝트 설정

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

Vue CLI

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

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

Angular 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[])
    //지정된 출력에 대한 최종 연산
)
}

요약

| Vue | Angular | Angular
| ———– | ———– |
| 매우 엄격한 규칙을 따르도록 강요하지 않음 | 타입스크립트, 클래스 기반 컴포넌트/서비스를 사용해야 함 | 클래스 기반 컴포넌트/서비스를 사용해야 함
| 평평한 학습 곡선, 시작하기 쉬움 | 높은 학습 곡선(타입스크립트, RxJs, 종속성 주입) |
| 프로젝트 설정 시 설정해야 할 사항이 많음 | 미리 설정할 것이 많지 않지만 콘솔을 통해 프로젝트 구조를 생성할 수 있습니다.
| Angular 및 React 기반 커뮤니티 중심 프레임워크 | Google에서 생성 및 유지 관리 | Google에서 개발 및 유지 관리
| 별로 포함되어 있지 않음, 외부 라이브러리 설치 필요| 상태 관리, 프레임워크에 포함된 HttpClient|

자세히 읽어보세요:

JavaScript는 완전히 죽었습니다. 인터넷의 어떤 남자

Netlify 함수를 사용하여 GraphQL/MongoDB API 배포하기

잘못된 코딩 관행으로 프로젝트를 죽이는 방법

관련 문서

소프트웨어 개발

미래 지향적인 웹 앱 구축: The Codest의 전문가 팀이 제공하는 인사이트

The Codest가 최첨단 기술로 확장 가능한 대화형 웹 애플리케이션을 제작하고 모든 플랫폼에서 원활한 사용자 경험을 제공하는 데 탁월한 성능을 발휘하는 방법을 알아보세요. Adobe의 전문성이 어떻게 디지털 혁신과 비즈니스를 촉진하는지 알아보세요...

최신
소프트웨어 개발

라트비아에 본사를 둔 10대 소프트웨어 개발 기업

최신 기사에서 라트비아 최고의 소프트웨어 개발 기업과 그들의 혁신적인 솔루션에 대해 알아보세요. 이러한 기술 리더들이 어떻게 귀사의 비즈니스를 향상시키는 데 도움을 줄 수 있는지 알아보세요.

thecodest
엔터프라이즈 및 스케일업 솔루션

Java 소프트웨어 개발 필수 사항: 성공적인 아웃소싱을 위한 가이드

The Codest로 효율성을 높이고 전문 지식을 활용하며 프로젝트 성공을 이끌 수 있는 성공적인 outsourcing Java 소프트웨어 개발에 대한 이 필수 가이드를 살펴보세요.

thecodest
소프트웨어 개발

폴란드 아웃소싱을 위한 최고의 가이드

폴란드에서 outsourcing가 급증한 것은 경제, 교육, 기술 발전으로 인한 IT 성장과 비즈니스 친화적인 환경이 조성된 덕분입니다.

더코데스트
엔터프라이즈 및 스케일업 솔루션

IT 감사 도구 및 기술에 대한 완벽한 가이드

IT 감사는 안전하고 효율적이며 규정을 준수하는 시스템을 보장합니다. 전체 기사를 읽고 그 중요성에 대해 자세히 알아보세요.

The Codest
야쿱 야쿠보비치 CTO & 공동 설립자

지식창고를 구독하고 IT 분야의 전문 지식을 최신 상태로 유지하세요.

    회사 소개

    The Codest - 폴란드에 기술 허브를 둔 국제 소프트웨어 개발 회사입니다.

    영국 - 본사

    • 사무실 303B, 182-184 하이 스트리트 노스 E6 2JA
      영국 런던

    폴란드 - 현지 기술 허브

    • 파브리츠나 오피스 파크, 알레야
      포코주 18, 31-564 크라쿠프
    • 뇌 대사관, 콘스트럭터스카
      11, 02-673 바르샤바, 폴란드

      The Codest

    • 홈
    • 회사 소개
    • 서비스
    • Case Studies
    • 방법 알아보기
    • 채용 정보
    • 사전

      서비스

    • IT 자문
    • 소프트웨어 개발
    • 백엔드 개발
    • 프론트엔드 개발
    • Staff Augmentation
    • 백엔드 개발자
    • 클라우드 엔지니어
    • 데이터 엔지니어
    • 기타
    • QA 엔지니어

      리소스

    • 외부 소프트웨어 개발 파트너와의 협력에 대한 사실과 오해
    • 미국에서 유럽으로: 미국 스타트업이 유럽으로 이전을 결정하는 이유
    • 테크 오프쇼어 개발 허브 비교: 테크 오프쇼어 유럽(폴란드), 아세안(필리핀), 유라시아(터키)
    • CTO와 CIO의 주요 과제는 무엇인가요?
    • The Codest
    • The Codest
    • The Codest
    • Privacy policy
    • 웹사이트 이용 약관

    저작권 © 2025 by The Codest. 모든 권리 보유.

    ko_KRKorean
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fiFinnish fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese es_ESSpanish nl_NLDutch etEstonian elGreek ko_KRKorean