개요
vue 강의로 유명한 캡틴판교 장기효님이 발표한 내용입니다. 기존 레거시 코드를 제거한 경험을 공유하는데, vue를 TS로 개선한 작업이지만, 언어가 중요한 것이 아닌 레거시 개선을 중점으로 확인하니 좋은 세미나였습니다.
문제상황은 무엇인가?
Clova 더빙이라는 웹 편집기로 비디오, 오디오 등의 미디어 제어와 타임라인을 편집한다
- 왜 타입스크립트를 도입했나?
-> 적은 인원으로 빠르게 서비스를 오픈하면서 기술 부채가 심하게 쌓였던 상황
하지만 문제가 있었으니...
- 안정성
- 잘 돌아가는 서비스는 건드리지 않는게 좋다
- 오랜 기간을 거쳐 안정성을 확보한 서비스와 기능을 건드리는 건 위험하다
- 학습 비용
- TS를 아는 사람은 나 혼자
- 팀 전체의 학습 비용이 큰 상황
- 테스팅
- 기능을 보장할 수 있는 테스트 코드는 없었다
그렇게 개선은 무엇을 하였나?
- 전환의 작업 내용
1. TS 기반 별도의 신규 Vue.js 프로젝트 환경 구성(기존 프로젝트에 점진적 TS 적용 불가능)
2. 페이지, UI 영역별 코드 재작성(TS 코드를 역으로 JS 코드에 병합)
3. 코드 재작성 중 추가되는 신규 비지니스 기능은 JS 소스 그대로 TS 프로젝트에 포함(allowJS를 이용)
- 전환을 위한 원칙
1. JSDoc 작성
2. 부분 부분 갈아끼우기(결합도가 낮은 컴포넌트 위주로 먼저 포팅 작업)
3. allowJS로 포용하기(TS 전환시 에러가 많다면, allowJS를 통해 기존 JS를 포용하기)
4. 설계 5원칙
- JS -> TS 전환 이후 효과
1. 가독성 향상
2. 에러의 사전 검출
3. 기능 향상
- 아쉬웠던 점
1. 서비스 전체 구조를 개편하는데 홀로 진행
-> 새로운 구조 & 언어에 대한 팀 학습 비용 증가
2. 코드 베이스에 대한 이해가 높았다면 주요 사용자 액션 기준으로 e2e 테스트 코드라도 작성하고 시작했을 듯
느낀점
레거시 개선은 분명 비용이 듭니다. 잘 돌아가는 프로그램은 건드리는게 아니라고 배웠습니다. 그럼에도 개선을 하는 것은 더 나은 미래의 유지보수를 위한 길입니다. 그 과정에서 테스트를 철저히 하고, 학습곡선이 필요한 일을 다른 팀원들이 동의하도록 설득하는 것도 필요합니다. 나름대로, 저도 레거시 시스템을 좀 더 효율적으로 관리하기 위한 많은 개선들을 했던 경험이 있습니다.
결국 전환을 하는 이유를 확실하게 설득하는 일이 가장 중요합니다. 결과적으로는 가독성 증가, 오류 사전 검출, 기능 만들기 향상을 이루어냈는데, 만약에 기능 만들기에 향상을 이루어내지 못한다면? 설득은 더욱 어렵습니다. 함께 자라기 책이 생각합니다. 함께 자라기에서는 단순히 좋은 기술을 소개하고 팀원들을 독려하는 것이 아니라, 기존에 미리 쌓아두었던 친밀함과 관계에 따라서 팀원들의 찬성/반대가 결정 될 수 있다고 합니다.
또한 항상 테스트코드를 작성하는 일은 힘든 일입니다. 빠르게 서비스를 배포해야하는데 먼저 기능을 만드는 것이 당장 편해보이기 때문입니다. 물론 기능을 완성하고나서라도 테스트를 작성하기도 합니다. 결국 안전한 서비스를 만들기 위해서는 꼭 테스트를 작성해야 합니다. 한가지 더 나아가서 지금 내가 만든 테스트가 정말 제대로 된 오류를 검출 할 수 있는지 확인하도록 노력 할 것입니다.
영상주소
'회고 > 영상, 칼럼, 스터디 회고' 카테고리의 다른 글
| 갑작스런 문제 해결하기(feat.워드 커닝햄의 "Hm... That's interesting.) (0) | 2023.01.05 |
|---|---|
| 지금 하는 일들을 절반의 시간 안에 해야 한다면? (0) | 2022.12.23 |
| 주니어 개발자의 대나무숲 - 강지현, 이민우, 이지환, 한예은 (0) | 2022.10.07 |
| 나도 내 코드의 문제를 찾고 싶다구요?! - 테스트 할 때 기억할 7가지, 한주승 (0) | 2022.10.07 |
| 성공하는 스터디를 만드는 10가지 방법 - 인출 위주의 스터디 여정기, 한윤석 (0) | 2022.10.01 |
