[프론트엔드 아키텍쳐] SARDIP WEB-GIS Monorepo

 

안녕하세요. 이번 글에서는 현재 회사에서 진행중인 프로젝트의 규모가 확장됨에 따라 기존 모놀리식 프로젝트를 확장해서 새로운 아키텍쳐를 도입한 내용을 공유하고자 합니다. MFA, FSD 등 프로젝트 확장에 적용할 수 있는 다양한 프론트엔드 아키텍쳐가 존재하지만, 그중에서도 저희는 Vercel에서 추천하는 모노레포 라이브러리인 turbo와 최근 모노레포 구성에서 각광받고 있으며 또한 Vercel에서 모노레포 구성 시 추천하는 pnpm을 사용했습니다. 간단한 사용법은 turbo 공식 홈페이지에 나와있어서 문서를 읽어보시면서 따라하시면 충분히 이해하실 수 있을 것입니다.

 

중요한 것은 사용한 게 아니라 왜 turbo + pnpm 구조인 모노레포를 사용하였는지 이므로, 본 글에서는 그에 대해 작성하겠습니다.

 

MFA vs 모노레포

기존에 진행한 SARDIP WEB-GIS 프로젝트는 Next.js를 사용한 모놀리식 아키텍쳐로 이루어져 있습니다. 모놀리식 프로젝트를 계속 운용하면서 프로젝트 내부적으로 계층(layer)을 쌓아올리는 방식의 아키텍쳐(ex. FSD)에 대한 도입도 검토했으나, 합류할 팀원들이 프로젝트 구조에 대한 이해도가 얼마나 될지에 대한 의문과, 여러 계층으로 나뉘어지면서 관리가 용이할지에 대한 문제가 존재하였습니다. 따라서 누가 프로젝트에 투입될지라도 업무 적응에 최소한의 시간이 소요될 수 있도록 프로젝트가 모듈화가 될 수 있는 방향으로 진행하자는 의견으로 귀결되었습니다. 결론적으로 MFA와 모노레포 아키텍쳐, 두가지 중에서 고민하게 되었습니다.

 

MFA(MicroFrontend Architecture)

MFA는 경우 많은 대기업들에서 도입하여 사용하고 있는 프론트엔드 아키텍쳐 입니다. 하나의 페이지를 여러 개의 컴포넌트로 모듈화하여, 각 컴포넌트에 해당하는 프로젝트를 따로 운용하면서 이를 빌드하여 배포하고 최종적으로 하나의 어플리케이션으로 만드는 과정입니다. 특정 컴포넌트에서 에러가 발생하더라도 전체 애플리케이션으로 에러가 전파되지 않으며, 각 프로젝트별로 개발자들이 최적의 효율을 낼 수 있는 라이브러리와 프레임워크를 자유롭게 사용할 수 있어서 개발 효율이 좋다고 알려져 있습니다.

 

다만, 이를 위해서는 많은 프론트엔드 개발자가 필요합니다. 또한 초기 설정에 모노레포 아키텍쳐에 비해 많은 노고가 들게 됩니다. 인원이 부족하기 때문에 개발자 친화적인 환경보다는 속도에 치중해야하는 저희 회사의 상황과는 맞지 않는 방법이었습니다.

 

또한 현재 MFA를 도입하기 위해서는 React와 그 생태계의 라이브러리들 만을 사용해서 구현하거나, Next.js의 page-router를 사용해야 합니다. 제가 찾아본 바로는 webpack의 module-federation 방식을 사용한다면 Next.js의 pages-router 에서는 MFA를 사용할 수 있었지만, Next.js 13 버전부터 도입된 app-router에는 아직 webpack의 module-federation 방식의 MFA를 지원하지 않고 있습니다. 해당 라이브러리의 코어 개발자의 말에 따르면 X에서 Vercel ceo가 앞으로 app-router에서도 MFA를 사용할 수 있는 module-federation 방식을 지원하겠다고 해서 오픈소스 개발이 멈췄다고 말했습니다만, 언제 진행될 지에 대해서는 미지수입니다.

 

현재 Next.js를 사용하여 프론트엔드 개발 방식의 변화가 찾아오고 있는데 React와 그 관련 생태계의 라이브러리들만을 사용해서 MFA로 개발하기에는 많은 노고가 들게 됩니다. 또한 Next.js의 이점을 포기하면서까지 MFA를 도입하기에는 그 장점에 의문이 들 수 밖에 없습니다.

 

모노레포(Mono-Repository)

모노레포는 하나의 Git 레포지토리에 두 개 이상의 프로젝트를 운용하는 레포지토리를 줄여 말하는 것입니다. 모노레포의 장점은 코드 재사용성과 의존성 관리가 용이하며, 여러 프로젝트 간의 일관성을 유지하기 쉽다는 점입니다. 이는 사람이 적은 팀에서도 대규모의 프로젝트를 진행할 수 있는 큰 이점을 제공해줍니다. 

 

왼쪽이 모놀리식 프로젝트의 폴더 구조, 오른쪽이 모노레포 아키텍쳐 구조입니다. 모노레포의 경우 apps 폴더에 Next.js로 구성된 여러 메인 프로젝트들을 운용하고 packages 폴더에는 이 메인 프로젝트들에서 공통으로 사용가능한 라이브러리 또는 프로젝트 코드의 일관성을 위해 사용하는 파일들이 존재합니다. (ex. eslint, prettier)

 

apps 폴더 내부에 여러 메인 프로젝트들이 운용되고 있기 때문에, 하나의 Git 레포지토리에서 여러 개의 프로젝트 관리가 가능하다는 장점이 현재 개발 인원이 부족한 팀의 상황에 적합했습니다. 또한 확실한 기획과 정책이 마련되지 않은 상황에서 유동적으로 페이지와 전략이 바뀌어야 하는 상황에서 모노레포 구조는 쉽게 변화가 가능해서 많은 이점이 있었습니다.

 

현재 개발 스프린트가 진행중입니다. 개발이 완료되고 나면 내용을 추가하도록 하겠습니다.