Airbnb에서 배우는 React 버전 업그레이드 전략

개발자에게 있어 메이저 라이브러리 업그레이드는 다소 까다로운 과제입니다. 반드시 필요하지만, '예측하기 어려운 호환성 이슈, 트러블슈팅' 등의 이유로 여러 난관이 존재하기때문인데요.

이런 배경에서, Airbnb가 제시한 React 업그레이드 전략을 재미있게 읽었습니다. Airbnb는 두 가지 전략을 통해 점진적이고 안전한 업그레이드를 실현했는데요.

1. 모듈 별칭(Module Aliasing)

React 16에서 React 18로의 점진적인 업그레이드를 위해서는 두 버전의 React를 동시에 사용해야 하는 상황이 발생합니다. 하지만 일반적으로 'react' import 구문은 하나의 버전만을 가리킬 수 있다는 기술적 제약이 있는데요. Airbnb는 이 문제를 모듈 별칭으로 해결했습니다.

아래와 같이 package.json에 두 가지 버전의 React를 다음과 같이 정의합니다

{
  "dependencies": {
    "react": "^16.0.0",              // 기본 React 버전
    "react-18": "npm:react@18.0.0"   // 별칭을 통한 React 18
  }
}

이렇게 설정하면 개발자들은 필요에 따라 각 컴포넌트에 선택적으로 React 버전을 import하여 사용할 수 있습니다:

// 기존 React 16 컴포넌트
import React from 'react';

// 새로운 React 18 컴포넌트
import React from 'react-18';

이런 접근 방식으로 기존 코드를 수정하지 않고도 새로운 버전의 React를 도입하고 컴포넌트 단위로 점진적인 마이그레이션이 가능해졌습니다.

2. 환경 타겟팅(Environment Targeting)

서로 다른 버전의 React로 빌드된 애플리케이션을 안전하게 운영하기 위해서는 환경을 명확히 분리할 필요가 있습니다. 이를 위해 환경 변수를 활용한 타겟팅 전략을 활용했습니다.

아래처럼 빌드 시점과 런타임에서 환경 변수를 통해 React 버전을 제어합니다:

REACT_UPGRADE=true/false

if (process.env.REACT_UPGRADE) {
  // React 18 기반의 애플리케이션 로직 실행
} else {
  // React 16 기반의 기존 애플리케이션 로직 유지
}

프로덕션 환경에서는 쿠버네티스를 통해 두 버전의 애플리케이션을 완전히 분리하여 운영합니다:

# React 16 환경 (기존 버전)
deployment-react16:
  env:
    REACT_UPGRADE: "false"

# React 18 환경 (신규 버전)
deployment-react18:
  env:
    REACT_UPGRADE: "true"

이러한 이중 전략을 통해 인프라를 구성함으로써, 독립된 배포 파이프라인을 운영하며, 안전하고 효과적으로 업그레이드가 가능해졌습니다.

기존에 라이브러리 메이저 업데이트시, 개발 과정에서는 미처 발견되지 못한 버그나 장애가 우려스러웠는데요. 이런 방식으로 점진적으로 업그레이드를 진행한다면 일괄 업데이트 보다 더 안정적인 업그레이드가 가능할 것 같습니다.

https://velog.io/@typo/how-airbnb-smoothly-upgrades-react