LogBridge: AngularJS와 React 간 호환성을 위한 UMD 모듈 솔루션

이 글은 AngularJS와 React 간 중복 개발 문제를 해결하기 위해 UMD 모듈을 활용한 프론트엔드 솔루션인 ‘LogBridge’를 개발한 경험을 다룬 글입니다.
프로젝트를 진행하며 겪은 기술적 문제를 **직접 해결한 경험**을 바탕으로 작성했습니다.
주요 로직이 노출되지 않도록 샘플 코드 및 명칭은 일부 변경하였고, 전반적인 해결 흐름과 고려했던 판단들을 중심으로 정리했습니다.

프로젝트 문제와 배경

올해 회사에서 새로운 화면을 개발하게 되었습니다. 편의상 ‘통합 로그 화면’이라고 하겠습니다. 기존 로그화면에 새로운 기능이 추가되는 것은 물론이고, UI/UX도 전체적으로 새로 디자인되는 꽤나 큰 패치가 진행될 예정입니다. 그냥 새로운 대(大) 메뉴를 처음부터 끝까지 새로 개발하는 것과 마찬가지죠. 문제는 내년에 React 기반의 서비스 리뉴얼이 예정되어 있다는 점입니다. 현재 앱은 AngularJS를 사용 중이고, 리뉴얼 앱은 별도의 저장소에서 개발되고 있습니다.

현재 계획대로라면 개발을 두 번 진행해야 합니다. 패치 크기가 커서 한 달 이상이 걸릴 예정인데, 현재 서비스에서 ‘통합 로그 화면’을 개발하고, 내년에 진행되는 새 서비스에서도 ‘통합 로그 화면’으로 두번씩 들어가야 하는 것입니다. 게다가 두 프로젝트(현재, 신규)의 프레임워크가 다르기 때문에 코드를 재사용 할 수 없어 개발자가 수동으로 코드를 포팅해서 작성해야 합니다. 코드의 안정성도 보장할 수 없고, QA도 검사해야 할 부분이 많아지겠죠. UI/UX 또한 현재 프로젝트용과 신규 프로젝트용의 디자인을 각각 진행해야 합니다.

시간과 인력도 많이 들고, 안정성도 떨어지는 작업을 두 번씩 진행해야 할까요? 그냥 한번에 개발을 해서 두 프로젝트에서 같이 사용할 수는 없을까요?

LogBridge 솔루션 설계

결론부터 말씀드리면 가능합니다. 신규 React 프로젝트의 페이지를 모듈로 빌드해 기존 AngularJS 프로젝트에 이식하면 React 기반 컴포넌트를 AngularJS 환경에서 문제없이 사용 가능합니다. AngularJS는 npm 라이브러리 사용이 제한적이지만, 예전에 bower와 npm 병용 환경을 구축해두었기 때문에 AngularJS에서 라이브러리를 사용하는데 문제도 없었습니다. (기회가 된다면 bower-npm 병용 과정도 별도의 글로 작성하겠습니다.)

최종적으로 React앱의 일부 페이지를 떼어내 라이브러리로 빌드하고, 이 빌드본을 Angularjs앱에 이식하여 개발 시간을 절반으로 줄이고, 코드의 일관성과 안정성을 확보하며, 두 프로젝트 간 호환성을 보장할 수 있었습니다. 이 라이브러리를 LogBridge라고 부르겠습니다.

해결방법은 단순해 보이지만 LogBridge를 구현하며 실무적으로 마주한 문제들이 많았습니다. 기존 Angularjs 프로젝트의 로그 페이지는 단순히 로그만 보여주는 것이 아니라, 다른 페이지와 유기적으로 연동되는 주요 기능들을 포함하고 있었습니다. Angularjs 프로젝트 내부에 LogBridge를 이식할 때에도 이 기능들이 그대로 동작해야 했습니다. 예를 들어, AngularJS로 로그인한 세션을 LogBridge에 공유해야 했고, 다른 페이지에서 LogBridge로 이동 시 특정 로그를 필터링한 상태로 진입해야 했습니다. 또한, CSS 충돌로 인해 스타일이 꼬이는 문제와, LogBridge 내부에서 세션 만료 시 AngularJS의 로그인 화면으로 리다이렉트하는 기능도 구현해야 했습니다. 그리고 React 프로젝트로 리뉴얼할때 LogBridge를 재사용할수 있어야 하죠. LogBridge와 다른 React 페이지간의 연동성과 통일성도 고려해야 했습니다.

프로젝트 목표와 인사이트

저는 이러한 도전들을 해결하며 얻은 경험을 글로 공유드리고자 합니다. 복잡한 환경에서 호환성과 확장성을 유지하고, LogBridge 구현 과정에서 마주한 실무적 문제들과 그 해결 과정을 체계적으로 정리하여 비슷한 도전을 마주한 개발자들과 인사이트를 공유드리고자 합니다.

본 시리즈에서는 LogBridge를 AngularJS와 React에서 호환하도록 만들며 마주한 실무적 도전들을 다룹니다. 이번 글에서는 문제와 해결책의 개요를 소개하며, 이후 시리즈에서는 LogBridge 구현과 환경 구성의 세부 과정을 공유하겠습니다.

UMD 모듈 구현 과정

• 이식 방법 결정하기: iframe vs npm package vs umd 모듈

• 외부에서 내부로 상태 전달하기: angularjs → react umd

• 내부에서 외부로 상태 전달하기: react umd → angularjs

• CSS 누수로 인한 스타일 충돌 해결하기

• 라우팅: react umd 내부, react umd와 angular js 사이

실무에서 고려한 점

• 세션 연동: AngularJS로 로그인한 세션을 React 기반 LogBridge에 공유.

• 상태 공유: 다른 페이지에서 LogBridge로 이동 시, 특정 로그를 필터링한 상태로 진입.

• 새로고침 유지: AngularJS에서 새로고침 시 LogBridge의 상태 유지.

• 세션 만료 처리: React 앱의 API 호출에서 세션 만료 시, AngularJS의 로그인 화면으로 리다이렉트.

• CSS 충돌 방지: AngularJS와 React의 CSS가 충돌하지 않도록 스타일 격리.

• 라우팅 호환: AngularJS의 ui-router와 React Router 간 충돌 해결.

실무 개발 환경 구성

실제로 서비스를 운영할때 고려해야하는 부분들을 해결한 방법도 다룰 예정입니다. 빌드라던가, 개발서버를 어떻게 구성할 것인가 하는 것들이요.

• 별개의 프로젝트 개발 환경 분리하기: 빌드 환경, 개발 환경

• 리뉴얼 앱에서도 사용할수 있게 하기: react umd - react app

이번 글에서는 LogBridge 개발의 큰 그림을 다뤘습니다. 다음 편에서는 UMD 모듈 구현의 첫걸음, 즉 이식 방법 선택과 실무에서 마주한 기술적 도전들을 공유하겠습니다. 이 글이 여러분의 프로젝트에 새로운 아이디어를 제공하길 바랍니다.

프로젝트 요약

• 환경: 현재 앱(AngularJS), 신규 앱(React)

• 목적: 중복 개발 방지, 오류 감소

• 기대효과: 개발 기간 단축, 리소스 절감, 개발 진행상황 동기화

• 요구사항: 양 프로젝트 호환, 기존 기능 지원, 재사용 가능

• 산출물: UMD 모듈 기반 LogBridge 앱