Angular 6 업그레이드 후 RxJS 6 마이그레이션 삽질기

문제 상황

회사 프로젝트를 Angular 5에서 6으로 업그레이드했다. ng update로 패키지는 올렸는데, 빌드 시 RxJS import 에러가 500개 넘게 쏟아졌다.

// 기존 코드 (RxJS 5)
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';

this.http.get('/api/users')
  .map(res => res.json())
  .filter(user => user.active)
  .subscribe(...);

RxJS 6부터는 import 경로가 완전히 바뀌었다.

해결 방법

1. rxjs-compat 설치 (임시)

npm install rxjs-compat --save

일단 호환 패키지로 빌드는 통과시켰다. 하지만 deprecated 경고가 계속 뜨고, 번들 크기도 늘어났다.

2. 파이프 연산자로 전면 수정

// RxJS 6 방식
import { Observable } from 'rxjs';
import { map, filter } from 'rxjs/operators';

this.http.get<User[]>('/api/users').pipe(
  map(users => users.filter(u => u.active))
).subscribe(...);

모든 .map(), .filter() 체이닝을 pipe() 안으로 이동했다. 정규식으로 대부분 치환했지만, 복잡한 중첩 스트림은 수동으로 수정했다.

3. Subject 사용 부분

// 기존
import { Subject } from 'rxjs/Subject';

// 변경
import { Subject } from 'rxjs';

모든 Observable 관련 import를 rxjs에서 직접 가져오도록 수정했다.

결과

• 500개 에러 → 0개
• 번들 크기 12% 감소
• rxjs-compat 제거 완료

작업 시간은 이틀 정도 걸렸다. 파이프 연산자가 처음엔 어색했지만, 오히려 가독성은 나아진 것 같다. TypeScript와 함께 쓰니 타입 추론도 더 잘 된다.