때는 작년 3월, 우리 팀에서 계속 미뤄왔던 Angular 버전 업그레이드를 진행하기로 했다. v4를 사용하고 있었으니 현재 버전(v16)과 꽤 차이가 나는 것...

시니어 개발자 분께서 말씀하시길 꾸준히 업그레이드를 해왔어야 하는데, 계속 미루느라 기술 부채가 되어버렸다고 했다.😅

목표는 v12까지 업그레이드 하는것이었다.
한 번에 12까지 갈 수 없으니 각 버전별로 branch를 만들고 차근차근 올려보기로 했다. 한 스프린트 내에 하긴 무리라고 판단되어 기간도 넉넉히 2-3 스프린트 정도로 잡았다.

가장 큰 이슈는 dependency가 걸리는 package들이 꽤 많아, 버전 업그레이드 시 사용할 수 없는 패키지들이 생긴다는 것이었다.

Angular 공식 페이지에 업데이트 가이드는 잘 되어있다.

ex)

내 주요 업무는 dependency가 걸리는 package들을 변경하는 것이었다.

1. CSV 다운로드 모듈 변경
패키지 이름에서 알 수 있듯이, 현재 사용중인 angular2-csv는 Angular6까지 밖에 지원하지 않았다.

Angular 최신버전까지 지원 + 비교적 최근까지 업데이트 되어있음 + 깃헙 스타 갯수 까지 적절한 조건이면서, 안정적인 패키지를 찾는 일이 쉽진 않았다.

여기서 한가지 팁은, npmjs에서 Angular 관련패키지를 검색하고 싶다면 앞에 ng or ngx를 붙이면 더 정확한 검색 결과를 얻을 수 있다.

ex) ng csv download

한참 검색하다가, 이전에 사용하던 패키지를 fork 해서 Angular 최신 버전까지 지원 하는 걸 발견했다.🙌

패키지를 교체하고 이제 이전과 동일하게 잘 동작하는지 확인하는 과정을 거쳤다.
우리 서비스에 CSV 다운로드 하는 기능을 지원하는 곳이 꽤 많이 있었기에, 전반적으로 다 꼼꼼하게 확인이 필요했다.

다운로드시 column header 순서가 이전과 달라져서, 그 부분만 로직을 추가하니 잘 동작했다.

2. Renderer => Renderer2
Angular4 이후로 Renderer에서 Renderer2로 변경되면서 이전 모듈에 depdency가 걸리는 패키지들이 있었다.

이 중에 하나 이슈가 있었던 건, 고객 정보 영역에 사용하던 필드 수정 / 편집이 가능한 패키지였다. Renderer2로 모듈이 변경되면서, 현재 사용중인 라이브러리를 대체할 수 있는 것을 찾지 못했다. 기존 기능과 동일하게 동작하지 않거나, UI가 너무 달라지는 등 적합한 패키지가 없었다.

그리고 사실, 해당 부분은 UI 개선이 곧 이루어질 계획이 있었기에 이번 기회에 라이브러리에 의존하지 않고 component를 직접 구현하는 것이 낫겠다는 의견이 나왔다.

사실 좋은 라이브러리가 있다면, 가져다쓰는 것도 좋지만 이벤트나 method, property등 내부 요소가 한정적이기 때문에 그 확장성이 제한적이라는 단점도 있다.

자체 component로 만들어 쓴다면, 확장성 뿐만 아니라 패키지 의존성을 낮출 수 있기 때문에 해당 부분은 기존 기능과 동일하게 공통 component로 분리하는 작업도 같이 진행했다.

3. style-loader 제거
추후 v14까지 업그레이드를 위해 CSS파일 load방식도 변경하기로 했다.

• 글로벌 css파일은 angular.json의 styles에 추가
• 각 component.ts의 css파일 styleUrls에 추가

[변경 전]
component.ts

import 'style-loader!quill/dist/quill.core.css';
import 'style-loader!quill/dist/quill.snow.css';

[변경 후]
angular.json

"styles": [
  "node_modules/quill/dist/quill.core.css",
  "node_modules/quill/dist/quill.snow.css"
],

[변경 전]

import 'style-loader!./exampleComponent.scss';

[변경 후]

@Component({
  selector: 'example-component',
  templateUrl: './exampleComponent.html',
  styleUrls: ['./exampleComponent.scss']
})

이 때, 한가지 이슈가 있었다.

styleUrls로 css파일 load시 parent component의 css child component에 적용되지 않는 것!!

css 선택자에 ::ng-deep을 사용하여 해결할 수 있지만, 권장하지 않는 방법이었다. (참고 링크)

구글링하다 찾은 방법은, encapsulation 속성을 사용하는 것이었다.

import { ViewEncapsulation } from '@angular/core';

@Component({
    ....
    encapsulation: ViewEncapsulation.None
})

위에 언급한 이슈들 외에도, 자잘한 이슈들이 많이 있었다. 아마 버전 업그레이드 후기2탄을 작성해야 할 수도...

v4에서 v12로 가는 건 쉬운일은 아니었다.

패키지 뿐만 아니라, 사용 모듈이 변경되면 이전과 방식이 달라져 또 일일이 확인해야하고, ivy엔진으로 인한 build 에러, UI 깨지는 이슈 등 전체 서비스 기능에 영향을 미치는 부분이라 시간도 꽤 오래 걸렸다.

또 업그레이드를 진행하는 동안 약 한달 넘게 정식 배포를 하지도 않아서, 업그레이드 후 최종 배포하는 날 심장이 두근두근 했던 게 생각난다.

사용자가 직접적으로 큰 변화를 느낄 순 없었겠지만, 개인적으로 매우 뿌듯했다. 버전 업하면서 Renderer나 encapsultaion등 Angular에 대한 더 깊은 지식도 생기고 여러 패키지들을 살펴보며 보는 눈(?)이 생겼다고 해야하나 여러모로 많이 배울 수 있는 기회였다.

프레임 워크를 최신 버전으로 꾸준히 유지한다면, 그 다음 버전으로 가는 것은 크게 어렵지 않다고 한다. (그 사이 구조적으로 큰 변화가 생기거나 사이즈가 큰 feature가 추가되는 것이 아니라면)

개인 프로젝트를 진행할 땐, 버전의 중요성을 크게 깨닫지 못했었던 같다. 항상 최신버전의 최신 기능들을 모두 사용할 수 있다보니 불편함도 없었다.

v16까지 업그레이드 하는 날을 기대하며..🤩🤩