Vue.js 코드 고고학 시리즈 ② — v0.7.0 ~ v1.0.0

(Vue.js v0.7.0 ~ v1.0.0 기술 고고학적 분석 보고서)

---

1. 컴포넌트 시스템의 진화

1.1 Vue.extend 방식과 컴포넌트 개념의 고도화

Vue.js는 초기 버전부터 컴포넌트 개념을 도입하여 UI 구조를 모듈화했습니다. v0.7 시점의 Vue는 간단한 ViewModel 위주였으나, v0.8 ~ v0.10을 거치며 Vue.extend()로 컴포넌트 클래스를 생성하는 패턴이 정착되었습니다. 이 시기 컴포넌트는 부모의 scope(스코프)를 기본 상속하여 동작했지만, 이는 컴포넌트 간 결합도를 높이는 문제를 야기했습니다.

• *v0.11 (2014년 11월)**에서 Vue는 컴포넌트의 범위(Scope)를 격리하기 시작했습니다. 즉, 자식 컴포넌트는 더 이상 부모의 데이터를 자동 상속하지 않고 자체적인 데이터 격리를 갖습니다. 이 변화로 컴포넌트 간 명시적 데이터 전달이 중요해졌습니다. v0.11에서는 부모 → 자식 데이터 전달을 위해 v-with 디렉티브와 컴포넌트 옵션 paramAttributes를 도입하여 Web Component의 속성 전달 방식을 모방했습니다. 예를 들어, 0.11에서 자식 컴포넌트 my-component에 부모 데이터 params를 전달하려면 아래와 같이 작성했습니다.

<!-- 0.11 예시: 부모 템플릿에서 자식에 데이터 전달 -->
<my-component params="{{ parentValue }}"></my-component>

자식 컴포넌트 정의에는 paramAttributes: ['params'] 옵션을 주어야 했습니다. 이 방식은 명시적인 Prop 전달의 초기 형태였으나, 문법상 다소 장황했습니다.

• *v0.12 (2015년 6월)**에서는 이러한 컴포넌트 사용법을 대폭 개선합니다. v-component 디렉티브(커스텀 엘리먼트와 기능 중복)와 v-with 디렉티브가 deprecated(사용 중단) 되었고, paramAttributes 옵션은 props로 간결하게 이름 변경되었습니다. 이제 대부분의 컴포넌트는 HTML 커스텀 엘리먼트로 선언하고, 속성은 props로 직접 전달합니다.

<!-- 0.12 이후: 커스텀 엘리먼트와 props 사용 -->
<my-component :some-prop="parentValue"></my-component>

위 예처럼 v-with 대신 prop 바인딩을 사용함으로써, 컴포넌트 문법이 일관되고 선언적으로 바뀌었습니다. 이로써 Vue 컴포넌트 시스템은 1급 시민으로 격상되어, 디렉티브에 의존하지 않는 고유한 API와 역할을 갖추게 되었습니다.

또한 v0.12에서는 Props 기능의 고도화가 이뤄져, 일회성(one-time) 바인딩이나 단방향(one-way) 바인딩 등의 옵션이 추가되었습니다. 이는 Prop로 내려오는 데이터를 자식이 수정할 수 없도록 하거나, 초기값만 전달받고 반응성 연결을 끊는 등의 패턴을 지원해주었습니다.

---

1.2 Props, Slot, Lifecycle API의 도입과 안정화

Props

0.11에서는 paramAttributes로 불리던 것이 0.12에서 props로 변경되어, Vue 1.0까지 Props API의 기본 형태가 완성되었습니다. Props는 부모-자식 간 명시적 데이터 흐름을 확립하여 컴포넌트 경계를 명확히 했고, Vue 1.x 내내 안정적으로 유지되었습니다.

Slot

부모가 자식 컴포넌트에 템플릿 조각을 주입하는 기능은 초기에는 <content> 태그로 구현되었습니다.

0.10~0.11 시절에는 자식 템플릿에 <content></content>를 배치하면 부모의 DOM 내용이 그 위치에 삽입되었습니다.

하지만 <content>는 Web Components 옛 규격에 따른 것이어서 한계가 있었고, 표준 변경에 대응할 필요가 있었습니다. Vue 1.0 전후로 Vue는 이 개념을 <slot> 태그로 전환합니다. Vue 1.x 시기에는 기본 슬롯(이름 없는 슬롯 및 단일 삽입) 위주로 제공되었고, 2.x에서 named slot 등이 추가 고도화됩니다.

Lifecycle (생명주기 훅)

Vue는 컴포넌트 인스턴스의 생성부터 소멸까지 여러 단계에서 훅(Hook)을 제공했습니다.

• v0.10까지: init, compiled, ready, attached, detached, beforeDestroy, destroyed 등
• v0.11 재설계 이후: 훅의 의미/이름이 다듬어짐
• v1.0 시점: API 정제가 목표였기 때문에 불필요하거나 모호한 옵션을 제거하고 핵심 훅 중심으로 유지 또한 0.x에서 존재하던 inherit 옵션(자식이 부모 데이터를 상속하는 옵션)은 1.0에서 완전히 제거되었습니다. 이는 컴포넌트 간 캡슐화 강화를 위한 결정으로, 1.0부터는 props 없이 부모 상태에 직접 의존하는 컴포넌트는 더 이상 허용되지 않게 되어 유지보수성이 높아졌습니다.

---

1.3 SFC(Single File Component) 등장 배경과 도입 시점

• *Single File Component (단일 파일 컴포넌트)**는 .vue 확장자를 가진 파일 하나에 템플릿, 스크립트, 스타일을 모두 포함하는 구성요소를 말합니다. 이 개념은 Vue 1.x 시대에 등장하여 Vue 생태계에 큰 영향을 주었습니다. 초기에는 템플릿을 HTML의 <script type="text/x-template">로 작성하거나, 컴포넌트 옵션에 문자열로 작성하는 방식이 일반적이었습니다. 그러나 이 접근은 다음 문제를 야기했습니다.

• 문법 강조 부족

• 긴 HTML 문자열의 가독성 저하 및 이스케이프 문제

• CSS 전역 오염 문제 이를 해결하기 위해 Vue 커뮤니티는 빌드 도구(Webpack, Browserify 등)와 연계된 SFC 개념을 도입했습니다. vue-loader(Webpack)와 vueify(Browserify) 같은 도구가 .vue 파일을 해석하고 <template>, <script>, <style> 블록을 각각 처리하도록 발전했습니다.

Vue 1.0 무렵 SFC 지원 도구들은 다음 DX를 제공했습니다.

• Hot Reloading: 상태 유지한 채 컴포넌트만 즉시 반영
• Scoped CSS: <style scoped>로 컴포넌트 단위 스타일 격리
• ES2015+ 및 전처리기 지원: Babel, SASS/LESS 등과 결합 SFC 도입 배경 철학은 “관심사의 분리(SoC)는 파일 유형별 분리가 아니라 컴포넌트 단위의 분리”라는 관점입니다. 즉, 템플릿/로직/스타일은 서로 강하게 연관되어 있으므로 한 파일에 모아 응집도를 높이는 편이 관리하기 쉽다는 주장입니다.

---

2. 템플릿 문법과 디렉티브의 변화

2.1 조건문/반복문 디렉티브: v-if, v-for 등의 변화

• v-if: 0.x부터 존재. 1.0 전후로 렌더링 최적화 및 내부 캐싱 개선이 언급됨.
• v-repeat → v-for: 가장 큰 변화. 0.x에서는 v-repeat로 리스트 렌더링을 했고, 1.0에서 v-for로 개명되었습니다. 더 직관적인 스코프 문법과 성능 최적화가 동반되었습니다.
• v-else: 1.0 즈음 문서화되어 본격적으로 도입/정착. 예시:

<li v-for="(item, index) in items">{{ index }} - {{ item.name }}</li>

또한 1.x 시대에는 track-by 같은 키 옵션(후대의 key 유사)을 통해 리스트 업데이트 성능을 높이는 고급 기능이 제공되었습니다.

---

2.2 v-bind, v-on, v-model: 선언적 데이터 바인딩의 완성

• v-bind: 단축 표기 : 도입 → <a :href="someURL">

• v-on: 단축 표기 @ 도입 → <button @click="onClick">

• v-model: 0.x부터 존재, 1.x에서 .lazy 등 수식어 확장 및 컴포넌트 대상 사용성 개선 흐름 요약하면, 이 시기 변화는 크게 두 축입니다.

• 디렉티브 개편: v-repeat→v-for, v-with/v-component 제거 등

• : / 단축 표기 도입으로 템플릿 간결화

---

3. 라우팅과 상태관리의 시작

3.1 vue-router의 등장

Vue 코어는 뷰 레이어에 집중하기 위해 라우팅을 별도 라이브러리로 분리했습니다. 커뮤니티 수요가 커지면서 0.12 발표 이후 vue-router 개발이 본격화되었고, 2015년 중반부터 알파/초기 버전이 등장, 1.0 출시 시점에 함께 “스택”으로 자리잡기 시작했습니다.

3.2 vuex의 태동

Vuex는 Vue의 공식 상태관리 패턴 라이브러리로, Flux/Redux 패턴을 Vue에 도입한 도구입니다. Vuex는 1.0 이전의 코어 기능이라기보다는 1.x 후기2.0 전후로 무르익지만, 0.71.0 시대의 “상태관리 요구 증가”와 맞물려 태동이 시작된 것으로 요약할 수 있습니다.

3.3 왜 코어에서 분리되었는가

Vue는 점진적 프레임워크(Progressive Framework) 철학을 표방합니다.

• 라우팅/상태관리는 모든 앱에 필요하지 않음
• 코어는 가볍게 유지
• 필요할 때 조립하듯 추가 이 모듈화는 유지보수와 릴리스 독립성 측면에서도 이점이 있었습니다.

---

4. 커뮤니티와 생태계 확장

4.1 Laravel 연동의 본격화와 파급력

2015년은 Vue가 Laravel 커뮤니티와 강하게 연결된 해였습니다. Taylor Otwell의 언급과 Laracasts 등 튜토리얼 확산을 계기로 Laravel 진영에서 Vue 채택이 크게 늘었고, 이는 Vue 사용자 저변 확대에 중요한 역할을 했습니다.

4.2 문서화/튜토리얼 강화 및 국제화

1.0을 준비하면서 문서와 가이드가 크게 확충되었고, Migration Guide 및 Deprecation 경고 등 업그레이드 경험이 체계화되었습니다. 또한 다국어 문서 번역이 커뮤니티 기반으로 확산되며 글로벌 커뮤니티가 성장했습니다.

4.3 1.0 릴리스를 향한 요약

이 시기 Vue는 단순 라이브러리를 넘어 “생태계”로 성장했고, 커뮤니티와 Evan의 활동이 결합해 2015년 10월 26일 Vue.js 1.0 (Evangelion) 릴리스로 이어졌습니다.

---

5. 구조 비교 도식 (v0.x 초기 → v1.0)

5.1 디렉티브 변화 정리표

---

5.2 옵션 객체 구조 변화 (data, methods, computed 등)

• data: 1.0까지 객체 리터럴도 허용되나, 컴포넌트 재사용 관점에서 함수 패턴이 권장되기 시작
• methods: 0.x부터 동일
• computed: 캐싱/의존 추적 동작 안정화
• watch: 인스턴스 $watch 중심에서 옵션 객체로의 선언적 사용이 확산
• events: 0.x의 $dispatch/$broadcast는 1.x에서 점차 축소되고, 2.0에서 완전 제거
• props: 0.12부터 정식 명명, 1.0에서 타입/필수 등 서브옵션 확장
• inherit: 1.0에서 제거

---

5.3 반응성 시스템 아키텍처 (Observer → Dep → Watcher)

Vue 1.x 반응성은 다음 구조로 요약됩니다.

• Observer: 객체 속성에 getter/setter를 주입해 반응화
• Dep: 속성별 의존성 관리자(구독자 목록)
• Watcher: 렌더링/컴퓨티드/사용자 watch 실행 단위 핵심 흐름:

1. getter에서 의존 수집
2. setter에서 notify
3. Watcher update로 렌더링/콜백 수행 이 구조는 1.0 시점에 완성되어 Vue 2.x까지도 개념적으로 유지됩니다.

---

6. 난이도별 기술 해설 및 비유 (초/중/고급)

(초급) Dirty Checking vs Vue 반응성 — 우체국 비유

• Angular: 우체부가 매일 모든 집을 순찰(더티 체크)
• Vue: 편지함이 “편지 도착”을 알려주는 센서(의존성 추적) 요점: 변화가 없는 집은 절대 검사하지 않는다.

(중급) SFC 유지보수성 — 레고 박스 비유

• 전통: 색깔별로 레고를 분리(HTML/CSS/JS 분리) → 조립 시 박스를 계속 오가야 함
• SFC: “완성품 단위” 박스(컴포넌트 단위) → 한 박스에 템플릿/로직/스타일이 함께 scoped 스타일은 “내 박스 부품이 다른 박스로 새지 않게 뚜껑을 덮는 것”에 가깝습니다.

(고급) Vue 1.x의 균형감 — 프레임워크 디자인 관점

Vue 1.x는 Angular의 편의성과 React의 컴포넌트 모델 장점을 절충해,

컴포넌트 격리(캡슐화) + 자동 반응성(성능) + 점진적 확장(철학)의 균형점을 확보했습니다.

---

맺음말

Vue 0.7.0부터 1.0.0까지는 불과 2년 남짓이지만, 이 기간에 Vue는

컴포넌트 시스템 정비, 템플릿 DSL 완성, 라우팅/상태관리 생태계 확장, 커뮤니티 폭발 성장을 거쳐

작은 라이브러리에서 “프레임워크 생태계”로 성장했습니다.

이 시기의 결정과 철학은 Vue 2, Vue 3의 밑바탕이 되었고,

따라서 0.x → 1.0은 Vue 역사에서 가장 의미 있는 “기술 고고학” 발굴 구간이라 할 수 있습니다.

---

참고

• Vue 공식 블로그/릴리스 노트
• Evan You 회고 글
• Wikipedia 및 커뮤니티 자료 등