Dooray 웹앱이 커지면서 유지보수가 어려워지고, 이를 해결하기 위해서 정리해 나간 방법이 왜 필요했고 어떻게 바뀌었는지 공유합니다.

목차

1. 왜? 정리를 시작했을까?

2. 컴포넌트는 어떻게 정리했을까?

3. 데이터는 어떻게 정리할까?

4. 테스트는 어떻게 진행할까?

대상- 웹앱이 복잡해져 어떻게 정리할지 고민하시는 분

왜?

• 개발한지 오래된 레거시 프로젝트
• 하나의 SPA에 여러 프로덕션이 물려 있음

처음에는 AngularJS to Vue 점진적으로 교체하기 방법을 사용함

문제점

• 유지보수, 각 서비스의 추가개발이 이어지고 정리는 순서가 뒤로 밀린다.
  • 시간이 오래 걸림
• 공통 컴포넌트에서도 문제가 발생
  • 새로운 common 컴포넌트를 만들어 적용하는 방법을 사용하여 2배의 코스트가 발생
• 서로 다른 라이프사이클을 가지게 되어 오류 발생

Vue에서 문제점

• 타입 추론 안됨
• 한 타입에 다 들어가다 보니? 빅 컴포넌트