Vue.js 코드 고고학 시리즈 ① — Seed to v0.6.0

(초기 커밋 ‘Seed’부터 v0.6.0까지의 코드 기반 진화 분석)

---

들어가며: 한 알의 Seed에서 시작된 Vue.js

Vue.js는 2013년 중반, Evan You에 의해 탄생한 프론트엔드 프레임워크로, 처음에는 “Seed”라는 이름의 작은 실험으로 출발했습니다. Evan은 구글에서 AngularJS를 사용하던 중

“Angular에서 내가 좋아했던 부분만 쏙 빼서 더 가볍게 만들 수 없을까?”라는 생각을 했고,

뷰(View) 레이어에 집중한 경량 프레임워크의 씨앗을 심었습니다.

첫 커밋은 2013년 7월에 이루어졌고, 초기 프로젝트명 Seed는 프랑스어 *Vue(보기)*에서 영감을 얻은 Vue.js로 바뀌게 됩니다.

2013년 12월 8일, v0.6.0 버전이 출시되며 비로소 싹이 텄습니다.

이 문서는 Vue.js 코드의 뿌리를 탐험하는 「코드 고고학」 시리즈의 첫 번째 편으로,

초기 커밋(Seed 프로젝트)부터 v0.6.0 릴리스까지의 핵심 변화와 기술적 진화를 분석합니다.

---

1. Vue.js의 탄생 배경과 철학 🐣

Vue의 시작은 작은 씨앗과 같았습니다. Evan You는 무거운 프레임워크 대신

가볍고, 필요한 것만 가진 도구를 원했고,

AngularJS의 데이터 바인딩과 React의 컴포넌트 사고방식을 절충한 아이디어로 Vue를 구상했습니다.

Vue는 처음부터 점진적(Progressive) 프레임워크를 표방했습니다.

• 필요한 부분만 선택적으로 도입 가능
• 기존 프로젝트에 일부만 추가 가능
• 점차 SPA 구조로 확장 가능 초기 Vue 코드베이스는 매우 작았으며,

단 3개의 파일(main.js, directives.js, filters.js)로 핵심 기능이 구현되었습니다.

---

2. 초기 디자인: Seed 프로젝트의 코드 구조 🌱

Seed 시절 Vue의 구조는 단순하지만 핵심이 명확했습니다.

• main.js: Vue 인스턴스 초기화 및 DOM 마운트
• directives.js: sd- 접두사 기반 디렉티브 정의
• filters.js: 출력 데이터 가공을 위한 필터 정의

2.1 Seed 시절의 디렉티브 규칙

초기 Vue는 Angular의 ng- 대신 sd- (Seed) 접두사를 사용했습니다.

• sd-text → v-text
• sd-class → v-bind:class
• sd-show → v-show
• sd-each → v-for

Seed 초기 코드 예시

<div id="app">
  <h1 sd-text="title"></h1>
  <p sd-show="isVisible">이 문장은 보일까요?</p>
  <ul>
    <li sd-each="item in items" sd-text="item"></li>
  </ul>
</div>

<script>
  new Vue({
    id: '#app',
    scope: {
      title: '안녕하세요, Vue!',
      isVisible: true,
      items: ['첫 번째', '두 번째', '세 번째']
    }
  });
</script>

💡 비유: 식물과 햇빛

---

3. 반응성의 핵심: Object.defineProperty ⚙️

Vue 초창기의 핵심 혁신은 반응형 시스템입니다.

AngularJS vs Vue

• AngularJS (Dirty Checking) 모든 데이터를 반복 검사 → 성능 부담 증가
• Vue (defineProperty) 값 변경 순간 즉시 감지 → 정확하고 빠른 반응

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    get() {
      return val;
    },
    set(newVal) {
      val = newVal;
      updateDOM(key, newVal);
    }
  });
}

---

4. sd-에서 v-로: Vue의 정체성 확립 🏷️

v0.6.0 릴리스와 함께 다음과 같은 변화가 이루어졌습니다.

• Seed → Vue.js
• sd- → v-
• id → el
• scope → data

<div id="app">
  <h1 v-text="title"></h1>
  <p v-show="isVisible">이 문장은 보일까요?</p>
  <ul>
    <li v-repeat="item: items" v-text="item"></li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      title: '안녕하세요, Vue!',
      isVisible: true,
      items: ['첫 번째', '두 번째', '세 번째']
    }
  });
</script>

---

5. 컴포넌트 개념의 태동 🌇

Vue는 점차 컴포넌트 개념을 도입합니다.

🧱 레고 비유

이후 Laravel과의 만남을 계기로 Vue는 폭발적인 성장을 시작합니다.

---

6. Seed vs Vue v0.6.0 비교 📝

---

맺음말: 뿌리를 알면 방향이 보인다 🌳

Vue.js의 핵심 철학은 처음부터 명확했습니다.

간결함 · 효율성 · 유연함

다음 편에서는 v0.7 ~ v0.11,

Vue 1.0 직전의 진화 과정을 다룹니다.

To be continued…