<commit_before>---
layout: article
title: "Angular 2 대신에 Vue.js를 선택한 이유 (그리고 React를 선택하지 않은 이유)"
date: 2017-09-06 18:04:32 +0900
categories: [web-development, translation]
excerpt: "(번역) 실제 프로젝트에서 고민한 프레임워크 선정 과정과 Angular, React, Vue 의 비교"
image:
  teaser: posts/web/translation/vue-js.jpeg
  credit: <NAME>
  creditlink: https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163
  #url to their site or licensing
locale: "ko_KR"
# 리플 옵션
comments: true
tags:
- vuejs
- Vue JS
- vue 시작하기
- vue js 시작하기
- vue js 한글
- vue 소개
- vue js 입문
- angular vue
- angular2
- angular2 vs vue
- react vs vue
- react
- react vue
- react vue 비교
- 프론트엔드 프레임워크 비교
- 프론트엔드 프레임워크
- frontend framework comparison
- 패스트캠퍼스
- 패스트캠퍼스 프론트엔드 웹앱 캠프
- vue 배우기
---
{% include toc.html %}

## 들어가며
이 글은 Medium 의 "Why we moved from Angular 2 to Vue.js(and why we didn’t choose React)" 글을 번역한 글입니다.

항상 이상적일 수만은 없는 실제 프로젝트 여건에서 신중하게 프레임워크를 고민하고 선정해 나가는 과정을 상세하게 기술한 글입니다.
Angular 2로 구축되어 있는 프로젝트를 업그레이드 & 마이그레이션 하는 과정에서
프로젝트의 현 상황과 여건을 반영한 프레임워크 선정 기준을 세우고, Vue.js 프레임워크를 적용해 나가는 개인 경험담이 담겨져 있습니다.

급격하게 요동치는 프론트엔드 프레임워크 시대에, 프론트엔드 개발자로서 항상 어떤 프레임워크를 선정해야 할지 고민하는 데
인사이트를 제공하는 글이 되길 바랍니다.

## 본문
우리는 최근에 [Rever](https://reverscore.com/) 라는 사이트에 Vue.js로 개발한 웹 페이지를 오픈했습니다.
16주 동안 641 개의 커밋이라는 강도 높은 개발 과정을 지나고 나니, Vue.js 도입하기를 잘했다는 생각이 듭니다.

8 달 전에 우리는 Angular 2를 쓰고 있었습니다. 정확하게 말하자면 Angular 2 베타 9 버전이었죠.
외주가 Angular 2로 제작해놓은 웹 사이트가 있었는데, UX/UI부터 설계까지 한 번도 만족한 적이 없었습니다.
심지어 어느 부분에 대해서는 Angular 2 자체가 맘에 들지 않았어요.

경험담을 더 얘기하기 전에, Angular 2 베타 9와 Angular 2.0는 완전히 다른 제품이라고 말하고 싶습니다.
그렇기 때문에 문제가 있었죠. Beta 9부터 2.0.0까지 8 개의 Beta 버전이 있었습니다. RC 8 개와 2.0.0 버전,
그리고 업그레이드까지 합치면 총 17 개의 버전이 있었죠. 우리는 Beta 9에서 2.0.0으로 업그레이드를 시도했지만,
상당히 많은 부분들이 호환되지 않아 업그레이드 작업이 버거워졌습니다. 그러면서도 Angular 2를 프레임워크로 선정해야 하나에 대한 고민도
생겼습니다. 왜냐면 Angular 팀에서 Angular 4 업그레이드 작업에 들어간다고 공지했거든요. 물론 Angular 팀에서
급격한 변화는 없을 거라고 했지만, 우리가 Angular 2.0.0으로 업그레이드가 끝나는 시점에 또 다른 업그레이드를
해야 한다는 부담이 생겼습니다. 우리 팀의 시간과 자원은 한정적인데 말이죠...

Angular 2 가 싫었던, 그리고 여전히 싫어하는 주된 이유는 타입스크립트 때문입니다.
Angular 2를 자바스크립트로 구현할 수 있다는 걸 알지만, 순수 자바스크립트로 개발하였을 때
Angular 2 프레임워크에서 추구하는 이상적인 모양이 아니라는 걸 깨닫고선 타입스크립트로 갈 수밖에 없었습니다.
이 상황에서 타입스크립트를 걷어낸다는 건 프로젝트 전체를 다시 제작해야 한다는 것이겠죠.

저는 타입스크립트가 현실적으로 가치를 더하지도 않고 오히려 프로젝트 팀의 코딩 속도를 떨어뜨린다고 느꼈습니다.
자바스크립트로 간단하게 할 수 있는 객체 생성도 타입스크립트에서는 오히려 복잡하기만 했습니다.
혹시 타입스크립트를 시작하시는 분들께는 아래의 기사를 읽어보시길 강력히 권해드립니다. 모든 사람을 위한 해결책은 아닌 거 같아요.

[정적 타입의 충격적인 비밀](https://medium.com/javascript-scene/the-shocking-secret-about-static-types-514d39bf30a3)
[Angular 2 vs React: 최후의 경쟁](https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c)

전 아직도 Angular 1 이 얼마나 다루기 쉬웠는지 기억합니다, 자체의 문제가 있긴 했지만요.
그래도 Angular 2 처럼 중간에 길을 잃은 다른 프레임워크에 비해서 작업하기가 수월했습니다.
Angular 2 에 대한 저의 결론은 간단했습니다.
**Angular 1 과 Angular 2 의 공통점은 이름 뿐이며 이 둘은 완전히 다른 프레임워크다.**

그래서 테스트 안된 시스템에 17 개의 버전을 업그레이드 해야 하고,
비즈니스 측에서는 새로운 기능을 추가해달라고 계속 압박을 주고, 많은 버그와 잘못 짜여진 코드들..
심지어 팀에 초기 팀 멤버들은 모두 나간 상태, 저 홀로 남아 모든 책임을 지고 있었습니다.
타입스크립트 베타 버전을 쓰고 있었기에 레퍼런스 찾기도 어렵고, Angular는 2에서 4로 올라가고...
악영향을 주는 문제들이 급격히 쌓이기 시작했습니다.

그렇게 저희가 결정한 것은 혹시 다른 선택지가 있는지 살펴보는 것이었습니다.
업그레이드에 많은 시간을 소모하게 된다면 올바른 방향을 정하는 게 필요하니까요.
그리고 우리는 조사해봤습니다.

## React
첫 번째 옵션은 당연히 리액트였습니다. 왜냐면 모든 개발자가 사용하고, 사용하지 않는 개발자들도 React에 대해 얘기하니까요.
이게 한 가지 이유였고, 또 다른 이유는 Facebook 이 밀고 있다는 것이었습니다.
그러나, React 자체는 프레임워크가 아닙니다 제대로 활용하려면 추가적으로 구성해줘야 할 것이 많죠.

## Vue.js
Vue.js는 새로운 녀석이었습니다. 버전 2.0을 내놓기 전까지 들어보지도 못했죠.
딱 봤을 때 구미가 당겼지만, 위험해 보였습니다.

#### 의사결정 과정
먼저 의사결정 시 어느 부분을 중요하게 볼 지 정했습니다.<commit_msg>Put a line between the referenced article links<commit_after>---
layout: article
title: "Angular 2 대신에 Vue.js를 선택한 이유 (그리고 React를 선택하지 않은 이유)"
date: 2017-09-06 18:04:32 +0900
categories: [web-development, translation]
excerpt: "(번역) 실제 프로젝트에서 고민한 프레임워크 선정 과정과 Angular, React, Vue 의 비교"
image:
  teaser: posts/web/translation/vue-js.jpeg
  credit: <NAME>
  creditlink: https://medium.com/reverdev/why-we-moved-from-angular-2-to-vue-js-and-why-we-didnt-choose-react-ef807d9f4163
  #url to their site or licensing
locale: "ko_KR"
# 리플 옵션
comments: true
tags:
- vuejs
- Vue JS
- vue 시작하기
- vue js 시작하기
- vue js 한글
- vue 소개
- vue js 입문
- angular vue
- angular2
- angular2 vs vue
- react vs vue
- react
- react vue
- react vue 비교
- 프론트엔드 프레임워크 비교
- 프론트엔드 프레임워크
- frontend framework comparison
- 패스트캠퍼스
- 패스트캠퍼스 프론트엔드 웹앱 캠프
- vue 배우기
---
{% include toc.html %}

## 들어가며
이 글은 Medium 의 "Why we moved from Angular 2 to Vue.js(and why we didn’t choose React)" 글을 번역한 글입니다.

항상 이상적일 수만은 없는 실제 프로젝트 여건에서 신중하게 프레임워크를 고민하고 선정해 나가는 과정을 상세하게 기술한 글입니다.
Angular 2로 구축되어 있는 프로젝트를 업그레이드 & 마이그레이션 하는 과정에서
프로젝트의 현 상황과 여건을 반영한 프레임워크 선정 기준을 세우고, Vue.js 프레임워크를 적용해 나가는 개인 경험담이 담겨져 있습니다.

급격하게 요동치는 프론트엔드 프레임워크 시대에, 프론트엔드 개발자로서 항상 어떤 프레임워크를 선정해야 할지 고민하는 데
인사이트를 제공하는 글이 되길 바랍니다.

## 본문
우리는 최근에 [Rever](https://reverscore.com/) 라는 사이트에 Vue.js로 개발한 웹 페이지를 오픈했습니다.
16주 동안 641 개의 커밋이라는 강도 높은 개발 과정을 지나고 나니, Vue.js 도입하기를 잘했다는 생각이 듭니다.

8 달 전에 우리는 Angular 2를 쓰고 있었습니다. 정확하게 말하자면 Angular 2 베타 9 버전이었죠.
외주가 Angular 2로 제작해놓은 웹 사이트가 있었는데, UX/UI부터 설계까지 한 번도 만족한 적이 없었습니다.
심지어 어느 부분에 대해서는 Angular 2 자체가 맘에 들지 않았어요.

경험담을 더 얘기하기 전에, Angular 2 베타 9와 Angular 2.0는 완전히 다른 제품이라고 말하고 싶습니다.
그렇기 때문에 문제가 있었죠. Beta 9부터 2.0.0까지 8 개의 Beta 버전이 있었습니다. RC 8 개와 2.0.0 버전,
그리고 업그레이드까지 합치면 총 17 개의 버전이 있었죠. 우리는 Beta 9에서 2.0.0으로 업그레이드를 시도했지만,
상당히 많은 부분들이 호환되지 않아 업그레이드 작업이 버거워졌습니다. 그러면서도 Angular 2를 프레임워크로 선정해야 하나에 대한 고민도
생겼습니다. 왜냐면 Angular 팀에서 Angular 4 업그레이드 작업에 들어간다고 공지했거든요. 물론 Angular 팀에서
급격한 변화는 없을 거라고 했지만, 우리가 Angular 2.0.0으로 업그레이드가 끝나는 시점에 또 다른 업그레이드를
해야 한다는 부담이 생겼습니다. 우리 팀의 시간과 자원은 한정적인데 말이죠...

Angular 2 가 싫었던, 그리고 여전히 싫어하는 주된 이유는 타입스크립트 때문입니다.
Angular 2를 자바스크립트로 구현할 수 있다는 걸 알지만, 순수 자바스크립트로 개발하였을 때
Angular 2 프레임워크에서 추구하는 이상적인 모양이 아니라는 걸 깨닫고선 타입스크립트로 갈 수밖에 없었습니다.
이 상황에서 타입스크립트를 걷어낸다는 건 프로젝트 전체를 다시 제작해야 한다는 것이겠죠.

저는 타입스크립트가 현실적으로 가치를 더하지도 않고 오히려 프로젝트 팀의 코딩 속도를 떨어뜨린다고 느꼈습니다.
자바스크립트로 간단하게 할 수 있는 객체 생성도 타입스크립트에서는 오히려 복잡하기만 했습니다.
혹시 타입스크립트를 시작하시는 분들께는 아래의 기사를 읽어보시길 강력히 권해드립니다. 모든 사람을 위한 해결책은 아닌 거 같아요.

[정적 타입의 충격적인 비밀](https://medium.com/javascript-scene/the-shocking-secret-about-static-types-514d39bf30a3) <br>
[Angular 2 vs React: 최후의 경쟁](https://medium.com/javascript-scene/angular-2-vs-react-the-ultimate-dance-off-60e7dfbc379c)

전 아직도 Angular 1 이 얼마나 다루기 쉬웠는지 기억합니다, 자체의 문제가 있긴 했지만요.
그래도 Angular 2 처럼 중간에 길을 잃은 다른 프레임워크에 비해서 작업하기가 수월했습니다.
Angular 2 에 대한 저의 결론은 간단했습니다.
**Angular 1 과 Angular 2 의 공통점은 이름 뿐이며 이 둘은 완전히 다른 프레임워크다.**

그래서 테스트 안된 시스템에 17 개의 버전을 업그레이드 해야 하고,
비즈니스 측에서는 새로운 기능을 추가해달라고 계속 압박을 주고, 많은 버그와 잘못 짜여진 코드들..
심지어 팀에 초기 팀 멤버들은 모두 나간 상태, 저 홀로 남아 모든 책임을 지고 있었습니다.
타입스크립트 베타 버전을 쓰고 있었기에 레퍼런스 찾기도 어렵고, Angular는 2에서 4로 올라가고...
악영향을 주는 문제들이 급격히 쌓이기 시작했습니다.

그렇게 저희가 결정한 것은 혹시 다른 선택지가 있는지 살펴보는 것이었습니다.
업그레이드에 많은 시간을 소모하게 된다면 올바른 방향을 정하는 게 필요하니까요.
그리고 우리는 조사해봤습니다.

## React
첫 번째 옵션은 당연히 리액트였습니다. 왜냐면 모든 개발자가 사용하고, 사용하지 않는 개발자들도 React에 대해 얘기하니까요.
이게 한 가지 이유였고, 또 다른 이유는 Facebook 이 밀고 있다는 것이었습니다.
그러나, React 자체는 프레임워크가 아닙니다 제대로 활용하려면 추가적으로 구성해줘야 할 것이 많죠.

## Vue.js
Vue.js는 새로운 녀석이었습니다. 버전 2.0을 내놓기 전까지 들어보지도 못했죠.
딱 봤을 때 구미가 당겼지만, 위험해 보였습니다.

#### 의사결정 과정
먼저 의사결정 시 어느 부분을 중요하게 볼 지 정했습니다.
{'fraction_non_alphanumeric': 0.07147902246079955, 'fraction_numerical': 0.02740500070631445, 'mean_word_length': 3.1671571512654504, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 6, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3960497', 'n_tokens_mistral': 6021, 'n_tokens_neox': 7675, 'n_words': 1287}