Vue 2 프로젝트 온보딩 후기: 구조 파악
이직 후 첫 출근 날, 제가 가장 먼저 한 일은 기존 Vue 2 코드베이스를 파악하는 것이었습니다. 주로 React를 써왔고, Vue는 과거 프로젝트에서 몇 달 정도 써본 게 전부였기 때문에 Vue 2는 익숙하진 않았습니다. 문법과 구조도 생소해서 초반에는 낯설었지만, Vue 자체의 개념은 어느 정도 익혀둔 상태였기에 하나씩 흐름을 따라가며 익숙해지기 시작했습니다.
👀 컴포넌트 구조 파악: 전체 흐름을 그려보다
먼저 프로젝트에 사용된 컴포넌트들이 어떤 역할을 하고, 데이터는 어떻게 흐르는지를 큰 틀에서 파악하는 데 집중했습니다.
data,methods,computed,watch와 같은 Vue 2의 옵션 API를 살펴보며 각 컴포넌트의 책임을 이해했고,- 상위에서 하위로, 또 이벤트를 통해 하위에서 상위로 흐르는 데이터의 흐름을 그리면서 Vue의 핵심 패턴을 다시 한 번 체득할 수 있었습니다.
🗂 폴더 구조와 파일 네이밍: 유지보수의 힌트를 얻다
전체 프로젝트의 폴더 및 파일 구조도 눈여겨봤습니다.
- 기능별로 잘 분리된 구조, 공통 컴포넌트의 재사용 방식, 그리고 상태 관리 방식 등을 통해
- 이 프로젝트가 어떤 기준으로 구성되었고, 어떻게 확장되고 유지보수되었는지를 유추할 수 있었어요.
이 과정은 앞으로 제가 어떤 방식으로 새로운 기능을 추가하거나 리팩토링해야 할지 방향을 잡는 데 많은 도움이 됐습니다.
🛠 첫 삽: 작은 수정으로 느낀 기여의 기쁨
코드를 파악하던 중, 인수인계를 받으며 직접 수정해야 할 이슈들도 하나둘 발견하게 되었어요. 크지는 않았지만, 실제 서비스에 기여할 수 있는 의미 있는 경험이었습니다.
✅ 파일 상태 아이콘 및 색상 표시 누락 수정
사용자에게 파일 상태를 시각적으로 보여주는 아이콘과 색상 표시가 누락된 부분을 발견했습니다. UX에 직결되는 영역이라 섬세하게 확인하고, 관련 로직을 수정하여 정상적으로 아이콘이 표시되도록 반영했어요.
✅ 우클릭 메뉴 미작동 이슈 해결
특정 UI 요소에서 우클릭 시 메뉴가 나타나지 않는 버그도 있었습니다. 관련 코드 흐름을 추적하고, 잘못된 이벤트 핸들링을 수정하여 정상적으로 메뉴가 작동되도록 해결했어요.
이런 디테일한 경험을 통해 단순히 코드를 이해하는 수준을 넘어, 서비스를 바라보는 시야도 함께 넓힐 수 있었습니다.
🔜 앞으로의 과제: Vue 3 마이그레이션
이번 Vue 2 코드 탐색 경험은 단순한 이해를 넘어서, 앞으로 진행될 Vue 3 마이그레이션의 밑그림이 되리라 생각합니다.
Vue 3의 Composition API와 Vue 2의 Option API는 구조적으로 큰 차이가 있기 때문에,
로직의 재사용성, 타입스크립트 호환성, 성능 개선 측면에서 어떻게 전환해야 할지를 고민하고 준비해 나가야겠죠.
✍️ 마무리하며
첫 출근부터 많은 것을 보고, 듣고, 배우고, 경험한 하루였습니다. 앞으로 Vue 2 프로젝트를 안정적으로 개선해 나가며, 팀과 함께 성공적인 Vue 3 마이그레이션을 이뤄내는 여정을 잘 해보려합니다.
Vue를 사용하시는 분들, 특히 마이그레이션을 고민 중이신 분들과 경험을 나누며 함께 성장할 수 있기를 기대합니다. 🙌