<김용욱> 마이크로서비스 아키텍처 구축 가이드: 프론트엔드 마이크로 서비스 아키텍처

5.1.3 프론트엔드 마이크로 서비스 아키텍처

프론트 도메인 분리하기

프론트엔드를 여러 도메인 별로 분할해야하는 경우가 있다. 

1. 프론트엔드 팀의 규모가 지나치게 큰 경우다.
   • 이 경우, 개발 생산성이 낮아지고, 테스트와 배포가 어려워진다. 
2. 도메인 별로 팀을 묶어두었으나, 프론트엔드 애플리케이션은 1개인 케이스다.
   • 이렇게 되면 팀 별로 독립적인 배포가 어려워진다. 

 

UI 조합하기



화면을 도메인 별로 분리하고 난 이후에는, 분리된 화면을 연결해줄 수 있는 방법이 필요하다. 크게 두가지 방법이 있다.

분리된 UI를 조합하는 심플한 방법은 HTML 링크를 사용하는 것이다. 서비스마다 별도의 사이트를 두고, 메뉴를 선택할 때 해당 사이트로 전환한다.

각 서비스는 같은 인증 체계를 갖고 있어서, 별도의 로그인 없이 화면을 사용할 수 있다. 서비스를 오갈 때는 상대적으로 시간이 오래 걸리지만, 각 서비스의 업무 종류가 다르기 때문에 사용자는 주로 자신과 관련된 페이지에만 머무른다.

이는 보편적인 기술을 사용하므로 구현이 쉽고, 사용자가 불편해하지 않는다. 특히 JSP으로 구축된 시스템을 점진적으로 전환하는 경우, JSP와 SPA를 혼용하여 사용해야해서 가장 적합하다. 

단, 모든 사이트가 동일한 어드민 포털 코드를 갖게 된다. 만약 어드민 포털 코드가 자주 변경된다면, 별도의 담당팀이 코드를 지속해서 갱신해야할 수 있다. 

두번째 방법은 메뉴를 선택하면, 페이지가 동적으로 로딩 되는 것을 말한다. 공통개발팀이 담당하는어드민 포털이 항상 화면에 표시되고, 사용자가 선택하는 콘텐츠 화면을 동적으로 로딩하여 표시한다. 페이지를 처음 로딩할 때는 시간이 조금 오래 걸리겠지만, 각 서비스의 업무 종류가 달라서 사용자가 체감하는 차이는 크지 않다.

이러한 방식은 마이크로 프론트엔드라는 주제로 많이 다뤄지고 있다. 화면을 동적으로 로딩하여 조합하는 기술은 전통적인 iframe, 자바스크립트, 웹 컴포넌트 등을 이용할 수 있다. 화면이나 화면 조각 간의 통신은 ㅂ브라우저의 커스텀 이벤트 그리고 데이터 공유는 브라우저의 로컬 스토리지로 사용할 수 있다. 

웹팩 5부터는 모듈 단위로 빌드하고, 런타임에 조합할 수 있는 module federation 기능이 추가되었다. 또 single-spa 같은 마이크로 프론트엔드 프레임워크도 사용되고 있다.