마이크로 프론트엔드는 일반적으로 5가지 이슈가 있다.
•
성능
•
보안
•
지식 공유
•
신뢰성
•
사용자 경험
성능
리소스 캐싱
•
SSG
•
SSR
•
CSR
•
SPA
각 방법에 따라 캐싱 방법이 존재하는데
SSG는 하드디스크의 in-memory 캐시를 통해 hit 시 데이터를 사용합니다.
또한 브라우저 캐시와 응답 캐시등을 사용해서 성능을 향상 시킬수 있습니다. 하지만 하나의 캐시 사이즈가 너무 커지면 미스가 많이 발생하고, 에러가 발생할 확률이 높아집니다. 따라서 각 마이크로 프론트엔드마다 리소스를 소비하도록하는 거싱 더 안전할 수 있습니다.
번들 크기
여러 의존성 파일들이 너무 많아졌을땐 번들 크기가 너무 작아져서 성능에 악영향을 줄 수 있습니다. 따라서 React의 lazy와 같이 번들들을 분리하고 각 애셋들의 사이즈를 줄여 사용자 경험을 높일 수 있습니다.
요청 최적화
모듈화를 했을 땐 요청의 수가 많아 질 수 있습니다. 이때 유사하거나 같은 데이터를 요청할 수 있는데, 이는 마이크로 캐싱을 통해서 완화할 수 있습니다. 각 api에 대한 요청이 캐시되면 동일한 요청을 거의 동시에 실행했을 때 값을 바로 얻어낼 수 있습니다. 또한 비슷한 요청들을 한번에 모아서 일괄 처리(batch)하는 방법도 있습니다.
보안
중앙 사용자 관리
백엔드가 한개일 때 적합한 방식입니다. 중앙인 벡엔드에 모든 HTTP를 요청 처리하도록 하고, 내부적으로 세션등을 붙인 쿠키를 사용합니다. 또한 사용자 관리 부분은 미들웨어를 통해 API 요청자와 분리시켜 필요한 다양한 통신 기술을 사용할 수 있습니다.
개별 사용자 관리
서드 파티 소스로부터 나가거나 들어오는 백엔드나, 마이크로 프론트엔드가 있을 때 고려할 수 있는 방법입니다. 각각 마이크로 프론트엔드가 토큰을 갖는다고 했을 때 백엔드에서 중복된 토큰 생성을 막기위해 요7청을 캐싱하는 것과 잘 맞습니다.
스크립트 실행
격리를 위해서 여러 노력이 필요한데 iframe이나 worker를 생성할 수 있습니다.
… 이거 맞나요?
백엔드에서 중앙 사용자 관리하는 방법에는 내부 쿠키 경우와 토큰 저장이 있습니다. 전자는 BFF가 필요하고, 후자는 JWT가 필요합니다.
BFF : 프론트엔드를 위한 중간 서버로, 여러 플랫폼을 지원할 때 사용해줄 수 있습니다.
지식 공유
이상적인 마이크로 프론트엔드라면 각자에게 어떠한 참조도 없어야하지만 이는 현실적으로 거의 불가능합니다. 따라서 느슨한 결합이나 강한 결합 둘중 하나를 선택해야합니다. 예를들어 flow, 작동 방식, 버전 등을 맞춰줘야합니다.
신뢰성
다양한 소스에서 수십개의 작은 모듈을 불러오는데, 모든 요청은 실패의 가능성이 있습니다. 이중 하나를 비활성화 해봄으로써 프로젝트가 얼마나 견고한지 확인할 수 있습니다. 따라서 신뢰성을 높일 수 있는 방법은, 느슨한 결합을 도입하는 것 입니다. 이를 통해 어떠한 경우에도 메인 애플리케이션이 죽지 않으면서, 다양한 상황에 대처할 수 있어야 합니다.
사용자 경험
워딩
컴포넌트, 디자인, 특정 워딩들을 맞춰서 타협점을 찾아나가야합니다.
패턴 라이브러리
CSS등 여러 중복되는 라이브러리들을 맞춰줘야합니다.