블로그에 마이크로 프론트엔드 적용해보기

최근에 웹 컴포넌트와 더불어 가장 관심있는 부분이 마이크로 프론트엔드이다. 마이크로 프론트엔드를 잘 사용하기만한다면, 대규모 프로젝트를 잘게 쪼개서 개발할 수 있다. 잘게 쪼개면 뭐가 이득일까? 마이그레이션 및 각종 프레임워크 및 라이브러리 버전관리가 쉬워진다. 대규모 어플리케이션일 수록, 사용하는 프레임워크나 라이브러리가 많을 수록 각 버전업 및 node 버전 업도 힘들어진다. 하지만 단위가 작으면 마이그레이션 및 버전업(노드, 라이브러리, 프레임워크)이 쉬워진다. 때문에 현재 프로젝트에도 마이크로 프런트엔드를 적용하며 개발하고 있다. 아직 배포방식이나 앱을 쪼개는 방식 관련해선 어떤 룰을 가져가야될지 확실하게 정하진 않았지만(수평적으로할지, 수직적으로할지 또는 도메인 위주로할지, 레포는 어떻게 가져갈지 등등) 일단 다음과 같이 진행하고 있다. 1. 모노레포 현재 내가 관리하는 프로젝트나 내 개인 블로그는 모노레포 방식으로 되어있다. 한 레포 안에서 여러 프로젝트를 관리할 수 있다는 장점이 있다. 하지만 앱이 많아질 수록 레포는 무거워지고 앱 실행할 때, 시간이 오래걸린다. 또한, 빌드 결과물이 한 폴더 안으로 나온다면, 배포 한번하는데, 여러 앱을 다 같이 빌드해야된다는 단점도 있다. 그래도 시각적으로 하나의 레포에서 모든 앱을 볼 수 있으니 덜 복잡하다.(이건 내 개인적인 생각) 모노레포를 사용해서 개발할 때, lerna나 yarn berry 같은 것들을 많이 사용한다고한다. 하지만 난 lerna나 yarn berry를 적용하지 않았다. 개인 프로젝트에서 연습삼아 lerna, yarn berry를 사용해보긴했지만, 딱 한가지 내 욕구를 채워주지 못하는 점이 있었다. (그거 빼면 정말 대단한 도구임에는 틀림없다.) 내가 그 방법을 못 찾은 걸 수도 있지만(못 찾은거겠지?), 여튼 한가지 욕구를 충족시키지 못해서 lerna나 yarn berry를 쓰지 않았다. 그 욕구란 각 프로젝트마다 노드버전을 다르게 가져가고 싶다는 점이었다. 모노레포로 관리되는 어떤 프로젝트는 예전에 생성되어 노드 버전이 옛날 버전일 수도 있다. 나중에 생긴 프로젝트는 당연히 노드 버전이 그보단 최신일 것이다. 그런데 lerna로 테스트했을 땐, 노드 버전이 하나로 통일되었다. 아마 package.json의 workspace에 정의된 프로젝트의 의존성 관리에 초점을 둔 라이브러리라 그럴 것이다(노드 버전 관리가 주 목적이 아님)라고 추측하고 있긴한데.. (맞는진 잘 모름) 여튼 노드 버전이 하나로 통일되는건 내가 바라는 것이 아니었다. 때문에 lerna나 yarn berry를 쓰지않고 루트 폴더에 쉘 스크립트를 작성해, 버튼 하나만 누르면 각 프로젝트들을 설치해주고, 로컬 실행 및 빌드 및 배포까지 해주는 기능을 만들었다. 2. vite module federation 이건 내 개인 블로그에 적용한 방법이다. 내 개인 블로그는 vuepress version2로 되어있고, 그 안에 여러 작은 앱은 vite기반 바닐라 자바스크립트 앱 및 vue 앱으로 되어있다. 아직 vite엔 webpack version5 처럼 공식적인 module federation 기능은 없지만, https://www.npmjs.com/package/@originjs/vite-plugin-federation 해당 라이브러리를 사용하면 vite에서도 module federation을 적용할 수 있다. 3. vite build hook 내 개인 블로그는 github pages에 배포했다. 하지만 github pages에 내장된 서버 설정.. 때문일까? assets 폴더에 있는 index.js, main.css 이런 이름의 파일들에는 잘 접근했는데, __federation~~.js 이런식으로 앞에 언더바(_) 2개 붙은 파일들에는 접근하질 못했다. (module federation으로 불러오는 스크립트 파일들이 배포되는 장소가 블로그 파일이 배포되는 github pages와 동일한 곳이라 파일들을 탐색하지 않고 블로그를 리턴해주는 듯했다. 때문에 블로그 안에서 /__federation~~.js 라우터를 탐색하니까 404 에러가 뜬 것이다.) 즉, 다시말해 github pages 서버설정에 assets 폴더안에 index.js 이런식의 파일을 탐색하면, 해당 파일이 있는지 없는지 탐색 후에 있으면 해당 파일을 내려주도록 설정되어있는데, 파일명 앞에 __ 이런식으로 언더바가 붙어있으면 탐색을 안하고 바로 블로그를 리턴해주는 식으로 되어있는 것 같았다. (잘은 모르지만..) 그래서 vite build hook을 사용해 빌드 후에 언더바가 붙은 파일들의 언더바를 제거해주고, 해당 파일을 참조하고 있는 파일들도 수정하도록 했다. 그랬더니 아주 잘 작동한다. 4. 정리 요즘 내 관심사는 마이크로 프론트엔드와 웹 컴포넌트이다. 이 둘을 자유자재로 다루면 프론트엔드에서 내가 원하는 구조로 서비스를 만들 수 있을거 같다는 느낌이 들긴하지만.. 막상 그때되면 또 다른 장애물이 생기겠지..? 여튼 블로그에도 마이크로프론트엔드를 적용해서 너무좋다~! 끝.