어려운 선택: Angular, React 또는 Vue?

Source: Dev.to

번역할 전체 텍스트를 제공해 주시겠어요?
소스 링크 아래에 있는 내용이 필요합니다. 해당 내용을 알려주시면 한국어로 번역해 드리겠습니다.

Staying Current Without Chasing Trends

기술 선택은 소프트웨어 개발에서 언제나 존재합니다. 환경은 끊임없이 변합니다. 새로운 프레임워크가 등장하고, 기존 프레임워크는 진화하며, 어제의 최첨단 솔루션은 내일의 레거시 부담이 됩니다. 문제는 올바른 도구를 고르는 것뿐만 아니라, 도구를 어떻게 평가할지를 아는 것입니다.

저는 이전에 큰 기술 전환을 경험했습니다. 몇 년 전 Delphi에서 Java로 옮긴 것은 더 넓은 플랫폼에 접근할 수 있게 해 주었고, 단순히 PC가 아니라 “대형 메인프레임”용 애플리케이션을 작성할 수 있게 해 주었습니다. 그 전환은 구체적인 필요에 의해 이루어졌습니다: 플랫폼 도달 범위, 커뮤니티 규모, 생산성 향상. 새로운 것과 반짝이는 것을 쫓는 것이 아니었습니다.

하지만 최신 상태를 유지하려면 규율이 필요합니다. 모든 새로운 프레임워크를 따라다니는 것은 경력 자체를 방해하는 행동입니다. 사라질 수도 있는 기술에 시간을 낭비하고, 끊임없이 컨텍스트를 전환하다 보면 깊은 전문성을 쌓지 못합니다. 2010년에 Spring이나 Rails를 마스터하고 계속 사용해 온 개발자들은 웹 개발을 혁신한다는 약속을 내세운 모든 마이크로 프레임워크에 뛰어든 사람들보다 더 가치 있는 스킬을 쌓아 왔습니다.

2020년이 되면서 저는 현대 웹 UI 개발이라는 기술 격차를 메워야 했습니다. 그동안 저는 미들웨어와 백엔드 시스템에 집중했지만, 이제는 SaaS 애플리케이션을 처음부터 구축해야 했습니다. 여기서 중요한 질문은 “무엇이 뜨거운가?”가 아니라 “무엇이 나를 생산적으로 만들고 빠르게 배포할 수 있게 해줄까?”였습니다.

기술 선택을 위한 네 가지 기준

새로운 기술을 평가할 때, 나는 서로 충돌하기도 하는 네 가지 요소를 고려한다:

1. 시장성 있는 스킬

실제로 급여를 가져다 주는 것. 이는 “GitHub에서 인기 있는 것”을 넘는 미묘함을 요구한다. 시장성은 지역에 따라 다르다—실리콘밸리에서 뜨거운 기술이 당신이 사는 곳의 수요와 일치하지 않을 수 있다. 또한 시간에 따라 변한다. COBOL은 40 년 동안 시장성이 있었지만, 일부 Node.js 프레임워크는 겨우 4 년만 지속되었다.

채용 공고는 유용한 신호이지만 실제 산업 사용을 뒤따른다. 기업은 천천히 움직이기 때문에, 기술이 채용 사이트를 장악할 때쯤이면 이미 쇠퇴를 향해 성숙하고 있을 수 있다.

• 컨설턴트와 계약자는 제품 개발자보다 시장성이 더 중요하다.
• 자체 SaaS 애플리케이션을 구축한다면, 이력서 키워드보다 생산성이 더 중요하다.

2. 유용성

실제로 당신이 가진 문제를 해결하는가? 단일 페이지 애플리케이션에 최적화된 프레임워크는 콘텐츠 사이트를 만들 때는 쓸모가 없다. 개발자 경험에 중점을 둔 프레임워크는 50명의 개발자가 만든 코드베이스를 이어받는 경우보다 혼자 작업할 때 더 중요하다.

유용성은 단순히 기능에만 국한되지 않는다. 목적에 맞는 적합성이다:

• 프레임워크의 아키텍처가 당신의 문제 영역과 일치하는가?
• 기존 스택과 잘 통합되는가?
• 당신이 동의하지 않는 아키텍처 선택을 강요하는가?

프레임워크 팽창에 주의하라: 처음엔 집중적이고 유용했지만, 점점 새로운 기능을 추가하면서 당신이 갖고 있지 않은 문제를 만들기도 한다.

3. 도입 용이성

당신의 시간은 가치가 있다. 프레임워크 A가 생산성을 얻는 데 3개월이 걸리고 프레임워크 B가 3주가 걸린다면, B가 다른 차원에서 현저히 나빠야 A를 정당화할 수 있다.

도입 용이성은 단순히 문법이 쉬운 것만을 의미하지 않는다. 다음을 포함한다:

• 개념적 명료성 – 당신의 사고 모델에 맞는가, 아니면 기존 패턴을 포기하게 하는가?
• 학습 자료 – 품질 좋은 문서, 튜토리얼, 커뮤니티 지식.
• 툴링 성숙도 – 빌드 시스템, 디버깅 도구, 오류 메시지.
• 점진적 경로 – 간단히 시작해서 점차 복잡성을 추가할 수 있는가?

경력 단계에 따라 이 기준의 무게는 달라진다. 주니어 개발자는 시장이 요구하는 것을 억지로 배우는 경우가 많다. 경험 많은 개발자는 선택권이 있어 생산성을 최적화할 수 있다.

The Contenders

In 2020, the frontend‑framework landscape had three clear leaders: Angular, React, and Vue. All were mature, production‑tested, and had substantial communities. All followed a client‑side architecture with REST API backends. The server/client boundary was clear and clean.

Angular

The Enterprise Standard

Angular came from Google, had comprehensive documentation, and dominated enterprise development. It offered a complete, opinionated framework: dependency injection, routing, forms, HTTP client, testing tools. Everything included.

Strengths

• Complete solution, batteries included
• Strong typing with TypeScript
• Dependency injection familiar to Java/C# developers
• Enterprise backing and long‑term support
• Comprehensive official documentation

Weaknesses

• Steep learning curve with significant conceptual overhead
• Heavy tooling requirements before writing your first component
• Complex build pipeline
• RxJS everywhere, whether you want reactive programming or not
• “Hostile to learning quickly” because there’s lots to master before becoming productive

For developers coming from enterprise Java or C# backgrounds, Angular’s patterns are familiar. For someone who needed to ship a SaaS application quickly, the time to productivity was prohibitive.

React

The Market Leader

React from Facebook (now Meta) dominated mindshare by 2020. Job listings favored React developers, the community was massive, and the ecosystem was rich with libraries and tools.

Strengths

• Huge community and ecosystem
• Maximum job‑market demand
• “Just JavaScript” – learning React improves your JavaScript skills generally
• Flexible, unopinionated (use what you want for routing, state, etc.)
• Strong corporate backing

Weaknesses

• JSX requires mental adjustment (JavaScript inside HTML‑like syntax)
• Ecosystem fragmentation: which router? which state management? which form library?
• Learning resources scattered and variable quality
• Rapid evolution meant tutorials went stale quickly
• “Thinking in React” requires functional‑programming mindset shift

React’s marketability was compelling for career optionality. But for shipping a product, the fragmented ecosystem meant constant decisions about which supporting libraries to adopt.

Vue

The Progressive Framework

Vue positions itself as the progressive framework: use as much or as little as you need. It borrows good ideas from both Angular (templates, directives) and React (component‑based, reactive) while staying simpler than either.

Strengths

• Gentle learning curve with fast time to productivity
• Template syntax that looks like HTML (familiar and readable)
• Clear, well‑written official documentation
• Can start with a simple <script> tag and add build tools later
• Vue Mastery – professional, high‑quality tutorial platform
• Single‑file components are intuitive
• Reactive data binding “just works”

Weaknesses

• Smaller community than React (though still substantial)
• Less job‑market demand than React or Angular
• Fewer third‑party libraries and tools
• Less corporate backing (originally an individual creator, now a team/foundation)

Vue’s ease of adoption was its killer advantage. Within days I could build working components; within weeks I understood the framework deeply enough to make architectural decisions confidently.

결정: 학습 인프라가 중요하다

I chose Vue, and the deciding factor was quality of learning resources.

Vue Mastery는 교육을 장인 정신으로 대하는 전문적이고 교육학적으로 탄탄한 튜토리얼을 제공했습니다. 강의는:

• 점진적으로 기술을 구축했습니다
• 일반적인 오해를 미리 예상했습니다
• 현실적인 예시를 사용했습니다

코드를 대충 떠들어대는 누군가의 웹캠 영상이 아니라, 전문적으로 제작된 교육이었습니다.

다른 프레임워크와의 비교 (2020)

• React: 공식 문서는 개선되고 있었지만 여전히 조각조각이었고; Medium에는 오래되었거나 잘못된 글이 넘쳐났으며; 유료 강의는 품질 차이가 크게 났고; 급속한 변화로 인해 어제의 튜토리얼은 구식 패턴을 가르쳤습니다.
• Angular: 포괄적인 문서가 있었지만, 이미 아키텍처 개념을 이해하고 있다는 전제 하에 작성된 빽빽한 레퍼런스 자료였습니다. 이는 Angular를 이미 알고 있는 사람들을 위한 것이었고, 학습자를 위한 것이 아니었습니다.

비즈니스 사례: Vue Mastery는 연간 몇 백 달러 정도였지만, 무료 React 튜토리얼을 조합하는 것보다 몇 주 더 빨리 생산성을 높여 주었습니다. 사업을 구축할 때는 시간에 가치가 있기 때문에, 양질의 교육에 투자하면 명확한 ROI를 얻을 수 있습니다.

This revealed a fifth criterion I hadn’t initially considered: Learning Infrastructure Quality. Framework features and syntax matter, but the ability to acquire skills efficiently matters more. A simpler framework with poor teaching materials can be harder to learn than a complex framework with excellent tutorials.

기준의 충돌

프레임워크를 선택하는 것은 상충되는 우선순위가 있습니다:

내 상황( SaaS 제품을 만들고, 스킬 격차를 메우며, 배포가 필요함)에서는 채택 용이성이 가장 중요했습니다. 필요하면 나중에 컨설팅 작업을 위해 React를 배울 수도 있었죠(시장성). 저는 새 트렌드는 의도적으로 무시했고, 유용성은 세 가지 모두 대체로 비슷했습니다.

당신의 우선순위는 다를 수 있습니다:

• 취업 활동: 시장성이 우선일 수 있습니다.
• 팀에 합류: 선택권이 없으며, 그들이 사용하는 것을 배워야 합니다.
• 버려지는 프로토타입: 채택 용이성이 가장 중요합니다.
• 장기 플랫폼: 아키텍처의 건전성과 장기성이 다른 모든 요소보다 더 중요합니다.

프레임워크를 넘어선 교훈

프레임워크 선택을 통해 전반적인 기술 평가에 대해 배웠습니다:

• 과대광고에 휘말리지 마세요. 새로운 기술은 몇 달이 아니라 몇 년에 걸쳐 스스로 입증되어야 합니다. 최첨단을 직접 디버깅하기보다는 다른 사람에게 맡기세요.
• 학습 인프라는 하나의 기능입니다. 기술적 특성은 다소 떨어지더라도 교육 자료가 더 잘 갖춰진 기술이 실제 스킬 습득에는 더 나은 선택일 수 있습니다.
• 학습이 아니라 배포에 최적화하세요. 목표가 무언가를 만드는 것이라면 가장 빨리 목표에 도달할 수 있는 도구를 선택하세요. 다른 도구는 나중에 언제든 배울 수 있습니다.
• 맥락이 기능보다 중요합니다. 추상적인 “최고의 프레임워크”는 존재하지 않으며, 오직 “당신의 상황, 제약, 목표에 가장 적합한” 것이 존재합니다.
• 시간은 가치가 있습니다. 무료로 몇 주를 투자해 배우는 것보다, 비용을 들여 고품질 교육으로 며칠만에 배우는 것이 더 효율적입니다.

프론트엔드 환경은 2020년 이후 크게 변했습니다. React는 이제 Server Components를 제공하고, Next.js와 SvelteKit은 서버/클라이언트 경계를 흐리게 하며, 새로운 프레임워크가 끊임없이 등장합니다. 하지만 평가 프레임워크는 여전히 유효합니다:

1. 과대광고를 무시한다.
2. 실제 필요를 파악한다.
3. 전체 학습 생태계를 고려한다.
4. 이력서 키워드보다 생산성을 최우선으로 한다.

트위터에서 떠오르는 트렌드가 아니라, 현재 당신이 어디에 있고 무엇을 만들고 있는가에 기반해 선택하세요.