GitLab은 왜 Vue.js를 선택했나

이 글은 GitLab에서 공개한 Why We Chose Vue.js를 번역한 글입니다. 글에 관한 모든 권리는 GitLab에 있습니다. 글이 공개된 시점이 2016년 10월경이므로 현재 상황과 다소 맞지 않는 부분이 있을 수 있습니다. 이 글을 읽은 후 GitLab은 어떻게 Vue를 사용하는가: 일 년 후도 함께 읽어보시면 좋습니다.

몇 주 전 면접자와 함께 자바스크립트 프레임워크를 선택하는 방법에 대해서 유익한 대화를 나누었다.

그는 큰 회사가 자신들의 비밀 소스를 공개할 때 눈속임을 쓴다고 지적했다. 개발자들은 "이 회사는 JS를 나랑 다르게 작성하는데, 잘하는 회사고 성공한 회사구나. 내가 사용하는 방식보다 JS를 더 잘 작성할 방법이 있을까? 있으면 나도 따라야겠지?"라고 스스로 생각해버린다.

비밀 소스 자체는 훌륭할지도 모른다. 하지만 많은 사람이 그걸 좋아한다고 해서 당연히 훌륭할 거로 생각하지는 마라. 아무것도 이해하지 못한 채로 스택오버플로우에서 답변을 그냥 복사해서 붙이기만 하지는 않을 것이다. 그런데 왜 프레임워크 전체는 그냥 복사해다가 붙이려고 하는가?

다음은 GitLab에서 Vue.js를 사용하기로 결정한 이유이다.

간결함과 사용의 편리함

제일 먼저 우리 눈에 띈 것은 Vue.js가 간결한 자바스크립트를 쉽게 작성하도록 도와준다는 점이다. Vue.js로 진입하는 건 매우 쉽다. Vue.js의 소스 코드는 매우 가독성이 높으며 필요한 문서라고는 자습서뿐이다. 다른 외부 라이브러리가 필요하지도 않고, jQuery와 함께 또는 없이도 사용할 수 있다. 굳이 플러그인을 사용할 필요도 없다. 많은 플러그인이 존재하지만 말이다. 필요하다면 여러 Vue 리소스에 접근할 수는 있지만, 개인적으로는 Vue.js만 사용하는 걸 좋아한다. Vue.js에는 마법이 존재하지 않는다. 전부 Object로 구성되어 있다.

나는 많은 자바스크립트 개발자들과 이야기를 나누고는 Angular에 몰두하는 사람들은 자바스크립트를 잘 모른다는 흥미로운 사실을 발견했다. 나는 그런 개발자가 되고 싶지 않았고, 우리 개발자들이 그렇게 되는 것도 바라지 않았다. 왜 "자바스크립트가 아닌" 것을 작성해야 하나?

예전에 Backbone을 사용한 적이 있었는데 빈 도화지나 다름없었기 때문에 내가 만든 걸 반복하지 않는데(DRY) 굉장히 집중해야 했다. Vue.js는 거의 아무런 가정도 하지 않는다. 오직 우리가 사용하는 데이터가 변할 것이라고만 가정한다.

하지만 Vue.js는 당신이 필요로 하는 것과 Vue가 제공해 줄 수 있는 것 사이의 완벽한 균형을 이룬다. Backbone이 (아무도 책임지지 않는) 무정부상태라면 Angular는 (Angular팀이 책임지는) 독재 정권 같다. Vue.js에 대해서는 사회주의 같다고 평하고 싶다. 당신도 책임을 지지만 Vue.js가 항상 손 닿는 곳에 굳건하지만 유연한 안전그물로서 존재한다. 프로그래밍을 효율적으로 유지하고 DOM으로 받는 고통을 최소화하도록 만반의 준비가 된 채 말이다.

내가 의도한 바를 설명하기 위해 간단한 코드를 하나 예로 들어보자.

<div id="journal">
  <input type="text" v-model="message">
  <div>{{message}}</div>
</div>

var journal = new Vue({
  el: '#journal',
  data: {
    message: 'Your first entry'
  }
});

자바스크립트 라이브러리를 몇 개 경험해보았다면 아무런 설명이 없어도 이 예제의 코드를 어렵지 않게 이해할 수 있을 것이다. 보통 다른 프레임워크에서 간결함은 여기에서 끝난다. "처음 시작하기"를 배울 때는 잘 만들어진 간단한 예제를 보게 될 것이다. 하지만 현실은 다르다. 그 프레임워크를 사용해서 돈이 되는 무언가를 해보려고 하면 이내 모든 것이 복잡해진다. Vue.js는 그렇지 않다. 실제 프로젝트의 코드도 처음 시작하기 문서만큼 간결하다.

우리가 Vue.js에서 좋아했던 점이 바로 그 부분이다. 구조와 간결함의 멋진 결합 말이다. 뷰에 사용될 데이터는 data라는 객체에 저장되지만 언제든 원할 때 볼 수 있다. 이벤트의 콜백으로 작성한 함수는 모두 methods 객체에 저장되지만 언제든 실행할 수 있고 값을 반환할 수 있다. Vue.js는 그저 값이 변하는 걸 확인하고 뷰를 업데이트할 뿐이다. 그리고 여러분은 코드를 덜 작성해도 된다.

Vue.js + GitLab == 적은 코드

그래서 Vue가 GitLab이 가지고 있던 어떤 문제를 해결했을까? 내가 입사했을 때 모든 자바스크립트는 jQuery 기반으로 작성되었다. 잘못된 건 없었다. 문제를 해결하기 위해 훨씬 더 많은 코드를 작성해야 했던 것만 빼면 말이다. 하지만 더 나은 방법이 있을 것이라 생각했다. Vue.js를 사용한 이후로 우리는 훨씬 적은 시간을 들여서 즉각적이고 일관성 있게 복잡한 문제를 해결할 수 있었다.

실제로 적용했던 간단하지만, 실용적인 예를 하나 들어보자. GitLab의 각 이슈는 closed 또는 open이라는 상태가 된다. 이 간단한 값은 자주 변경될 뿐만 아니라 여러 뷰에서 표현이 되어야 한다. jQuery를 사용할 때 우리는 이 변화를 전파(propagate)하는 30줄 이상의 코드를 작성했고 이 코드의 각 줄은 여러 클래스와 DOM을 일일이 조회하게 되어있었다.

이 작업이 Vue.js에서는 자바스크립트 한 줄이면 충분했다. 우리가 HTML에 그 밖에 추가한 코드라고는 몇 가지 속성이 전부였다.

Evan You[ref]Vue.js의 개발자[/ref]는 프레임워크 제작이 단순히 멋진 코드를 작성하는 것과는 다르다는 점을 알았다. 잘 작성된 문서도 필요하고 학습을 도와줄 강력한 커뮤니티, 사용자가 처한 어려운 문제를 해결하도록 도와줄 다양한 지원 라이브러리와 플러그인, 프레임워크가 뒤처지지 않도록 사용자의 피드백에 기반을 둔 짧은 피드백 반영 주기도 중요하다. Vue.js에는 그 모든 것에 더해 멋진 코드도 있다. 우리는 그것 때문에 Vue.js를 선택했다. 당신은 어떤가?

우리가 Vue.js를 선택한 이유 웹 캐스트

[adsense]

코드쓰는사람