Vue.js 코드 고고학 시리즈 ③ — v1.0.1 ~ v1.0.3

(Vue.js v1.0.1~v1.0.3 코드 변화 분석 보고서)

범위: Vue.js 1.0.0 릴리스 직후 연속으로 배포된 3개 패치 버전(v1.0.1, v1.0.2, v1.0.3)의 변화 요약 및 기술적 의미 정리

---

0) 한눈에 보는 요약

메타 관찰: SemVer 관점에서 “patch”에 기능이 들어가는 건 보수적으로 보면 예외지만, 1.0 막 직후에는 DX(개발 편의) 기능 + 긴급 버그 픽스가 같이 묶이는 패턴이 실제로 나타납니다.

---

1) v1.0.1 — 초기 버그 수정 중심의 패치

• 릴리스 일자: 2015-10-27 (v1.0.0과 같은 날 배포)
• 핵심: “정확도(표시) + 안정성(메모리)” 두 축을 빠르게 보강

1.1 v-for 인덱스 업데이트 버그 수정

증상

v-for="(index, val) in array" 스타일에서 index가 갱신되지 않는 문제가 보고되었습니다.

배열 변경/재렌더 시 index alias가 stale 값으로 남아 화면에 잘못 표시될 수 있었습니다.

사용자 관점 영향

• 리스트에서 “번호”나 “순서”를 표시할 때 가장 먼저 눈에 띄는 오류
• “데이터는 맞는데 화면 번호가 틀림” → 디버깅 난이도 상승

예시 (개념)

<li v-for="(i, item) in list">{{ i }} - {{ item }}</li>

이제 list에 항목을 추가/삭제해도 i가 안정적으로 업데이트됩니다.

---

1.2 겹치는 객체로 배열 교체 시 메모리 누수 수정

문제 맥락

배열을 통째로 교체할 때, 이전 배열과 새 배열이 동일 객체 참조를 공유하면

Observer/Dep/Watcher 구독이 “이중으로 남는” 형태의 누수가 발생할 수 있습니다.

대표 시나리오

• 기존: [objA, objB]
• 교체: [objB, objC] (※ objB가 양쪽에 모두 존재)

왜 누수가 생기나 (직관)

• “새 배열을 관찰”하면서 objB에 대한 관찰 연결이 추가되는데 “이전 배열에서 objB가 빠지는 과정”에서 정리가 완벽히 되지 않으면objB를 중복으로 추적하는 연결이 남을 수 있습니다.

간단 도식 (개념)

[before]
array#1 -> objB (observer 링크 #1)

[replace]
array#2 -> objB (observer 링크 #2 추가)

[bug]
observer 링크 #1이 완전히 정리되지 않음 -> 누수/불필요 업데이트 가능성

효과

• 반응성 시스템의 “구독 정리(cleanup)”가 더 정확해짐
• 동일 객체를 여러 데이터 구조에서 재사용하는 패턴에서 안정성 향상

---

2) v1.0.2 — 기능 추가 시도 (권장되지 않는 버전)

• 릴리스 일자: 2015-10-29
• 특징: 배포 후 곧바로 1.0.3으로 대체(권장 X)

실무적 결론: 1.0.2는 “중간 산출물”에 가깝고, 분석은 1.0.3 기준으로 합쳐 보는 편이 합리적입니다.

2.1 v-bind 객체 문법(다중 속성 바인딩) 시도

기존에는 속성마다 v-bind:attr를 반복 작성해야 했습니다.

<!-- 이전 스타일 -->
<div :id="someId" :title="someTitle"></div>

객체 문법은 “속성 묶음”을 한 번에 전달합니다.

<!-- 객체 문법 -->
<div v-bind="{ id: someId, title: someTitle, 'other-attr': otherProp }"></div>

이 문법은 v2/v3에서도 계속 살아남는 “익숙한 형태”의 시작점입니다.

2.2 limitBy 필터(배열 일부만 출력) 시도

<li v-for="item in items | limitBy 10">{{ item }}</li>

• 첫 10개만 렌더링
• 오프셋 지원: limitBy 10 5 → 5번째부터 10개

큰 리스트에서 “일부만 보여주기”를 템플릿 레벨에서 바로 처리할 수 있다는 점이 DX 장점.

---

3) v1.0.3 — 기능 완성 및 추가 버그 수정

• 릴리스 일자: 2015-10-29 (v1.0.2와 같은 날짜)
• 핵심: 1.0.2에서 시도한 기능을 “공식화/문서화”하고, 초기 1.0대의 엣지 케이스를 빠르게 봉합

3.1 (신규) v-bind 객체 문법 공식 지원

<div v-bind="{ id: someId, title: someTitle }"></div>

제한(중요)

• class/style에 적용 시 “문자열 값만 동작” 같은 제한이 언급됩니다.
• 이유는 :class/:style의 특수 처리(배열/객체 지원 등)와 충돌을 피하기 위한 안전장치로 이해할 수 있습니다.

---

3.2 (신규) limitBy 필터 추가

템플릿에서 리스트를 “부분 노출”할 수 있는 기본 필터가 완성됩니다.

<li v-for="item in items | limitBy 10">{{ item }}</li>

이 시점에 Vue 1.x의 리스트 관련 빌트인 필터가 실질적으로 다음 “3종 세트”로 정리됩니다.

• filterBy (검색/필터)
• orderBy (정렬)
• limitBy (개수 제한)

---

3.3 filterBy 중복 결과 버그 수정

버그

여러 키를 대상으로 filterBy를 적용할 때, 동일 객체가 중복으로 결과에 들어가는 문제가 발생할 수 있었습니다.

<!-- 예시 (개념): name/email 둘 다 검색 -->
<li v-for="u in users | filterBy q in 'name' 'email'">{{ u.name }}</li>

• 어떤 사용자가 name에도 q가 있고 email에도 q가 있으면
• 결과 배열에 동일 객체가 2번 들어가 렌더가 2번 될 수 있음

수정 효과

• 결과 정확도 개선
• 불필요한 중복 렌더 방지(성능/UX 둘 다 개선)

---

3.4 컴포넌트 name 옵션 덮어쓰기/충돌 수정

컴포넌트 정의에서 name 필드가 내부 옵션/프로퍼티와 충돌해 의도치 않게 덮어쓰여지는 문제가 수정됩니다.

영향

• Devtools에서 컴포넌트 이름이 정확히 표시
• 이름 기반 식별(디버깅/로그/구조 추적)이 안정화

---

3.5 v-for 키 표현식 falsy 처리 개선

객체 반복에서 key가 0, "" 같은 falsy 값일 때 렌더 과정에서 누락/오작동이 발생할 수 있는 엣지 케이스를 보완합니다.

실무 포인트: “키는 truthy일 것”이라는 암묵 규칙을 강제하기보다,

---

3.6 IE10/11 title prop 이슈 수정

구형 IE(10/11)에서 컴포넌트 prop으로 title을 사용할 때 생기는 문제를 보완합니다.

<my-component title="..."></my-component>

의미

• “초기 1.0”은 실제로 다양한 브라우저에서 즉시 사용되기 때문에 구형 환경의 엣지 케이스가 패치에서 빠르게 반영되는 흐름을 보여줍니다.

---

4) 모듈별 변화 요약 (기술적 의미)

4.1 반응성(Reactivity)

• v1.0.1의 “배열 교체 + 중복 객체 참조” 메모리 누수 픽스가 핵심
• 효과: 구독 정리/관찰자 관리가 더 정확해져 누수/불필요 업데이트 리스크 감소

4.2 디렉티브(Directive)

• v1.0.1: v-for index 갱신 정확성
• v1.0.3: v-for falsy key 처리
• v1.0.3: v-bind 객체 문법 확장(파서/런타임의 기능 확장)

4.3 컴포넌트(Component)

• 큰 구조 변화는 없지만,
• name 충돌 수정으로 디버깅/툴링 체감 품질이 크게 개선

4.4 필터(Filter)

• limitBy 도입: 리스트 가공 기능의 “완성도” 상승
• filterBy 중복 제거: 결과 정확성 + 성능(중복 렌더 제거)

---

5) “패치 릴리스”에서 읽을 수 있는 교훈

1. 초기 안정화의 우선순위는 ‘사용자가 바로 체감하는 버그’
2. DX 개선은 작은 기능이라도 빠르게 들어올 수 있다
3. 브라우저 호환성은 1.0 직후에 특히 중요

---

6) 마무리

v1.0.1~v1.0.3은 Vue 1.0의 “첫 인상”을 결정한 구간입니다.

1.0.0에서 큰 틀이 완성되었다면, 이 패치들은 나사 조임(버그 픽스)과

작은 공구 지급(DX 기능)으로 현장에서 바로 쓸 수 있는 완성도를 끌어올렸습니다.

• v-for 정확도 → “리스트 렌더는 믿고 써도 된다”
• 반응성 누수 보완 → “장기 운영에도 안정적이다”
• v-bind 객체 문법/limitBy → “실용주의 + 개발자 경험” 이 패치들의 의도를 따라가다 보면, Vue가 이후 버전에서도 유지한 핵심 가치—

성능·안정성·DX의 균형—이 1.0 직후부터 이미 구현/운영 원칙으로 자리 잡았음을 확인할 수 있습니다.

---

참고

• Vue 공식 릴리스 노트 및 GitHub 커밋 로그
• Vue 1.x 아카이브 문서, 커뮤니티 릴리스 정리 자료 등 (본 문서는 사용자 제공 요약을 기반으로 “기술 고고학 관점의 구조화”에 초점을 맞췄습니다.)