Micro FE 아키텍쳐

이 글은 Navdeep Singh Gill의 원문을 해석하며 써내려간 글입니다.

목차

• 마이크로 프론트엔드 소개
• 마이크로 프론트엔드가 작동하는 방법
• 마이크로 프론트엔드의 베스트 프랙티스
• 마이크로 프론트엔드 아키텍쳐를 어떻게 적용시킬것인가
• 마이크로 프론트엔드가 중요한 이유
• 마이크로 프론트엔드의 이점
• 요약 및 마무리

마이크로 프론트엔드 소개

마이크로 프론트엔드는 프론트엔드 생태계의 복잡성을 조사하지 않는 한 올바른 선택입니다.

마이크로 프론트엔드가 작동하는 방법

PubSub 시스템은 Publisher-Subscriber 구조를 의미합니다.

마이크로 프론트엔드의 베스트 프랙티스

• 단일 SPA 메타 프레임워크는 React, Vue, Angular 1, Angular 2 등과 같은 페이지를 새로 고치지 않고 동일한 페이지에 여러 프레임워크를 결합합니다.
• 여러 단일 페이지 애플리케이션이 서로 다른 URL에 있습니다. 공유 기능 응용 프로그램의 경우 NPM 또는 Bower 구성 요소를 사용합니다.
• Windows를 사용하여 마이크로 앱을 Iframe으로 격리. Post Message API 및 라이브러리를 조정합니다. IFrame은 상위 창에 의해 노출된 API를 공유합니다.
• 공유 이벤트 버스를 통해 통신하기 위한 다른 모듈. 각 모듈은 들어오고 나가는 이벤트를 처리하는 한 자체 프레임워크에서 작동합니다.

D3.js는 Data-Driven Documents의 약자로 대화형 및 동적 웹 기반 데이터 시각화를 생성하기 위한 자바스크립트의 프론트 엔드 시각화 라이브러리입니다.

Iframe이란 내부 프레임(inline frame)이라는 의미로 하나의 HTML문서내에서 다른 HTML문서를 보여주고자 할때 사용합니다.

마이크로 프론트엔드 아키텍쳐를 어떻게 적용시킬것인가

1. Custom Elements
2. Shadow DOM
3. HTML Imports
4. HTML Templates

• CreatedCallback - 구성 요소가 등록될 때 발생하는 동작을 정의합니다.
• AttachedCallback - 컴포넌트가 DOM에 삽입될 때 발생하는 동작을 정의합니다.
• DetachedCallback - DOM에 요소가 없을 때 발생하는 동작을 정의합니다.
• AttributeChangedCallback - 속성이 추가, 변경 또는 제거될 때 발생하는 동작을 정의합니다.

class CheckoutBasket extends HTMLElement {

constructer (){...} // is created

connectedCallback (){...}  // attached to DOM

attributeChangedCallback (attr , oldVal , newVal)  // someone changed an attribute

disconnecteCallback () {...}  // removed from DOM, cleanup events that have been registered
}

• Shell은 구성 요소 및 구성 요소 선택기에 대한 컨테이너로 구성된 최상위 래퍼입니다. 여기에는 사용자가 구성 요소를 조작할 수 있는 컨트롤러 또는 보기가 포함되어야 합니다.
• 컨테이너는 중첩된 애플리케이션의 HTML 코드가 삽입되어야 하는 실제 루트 위치입니다. 모든 중첩 앱의 경우 단일 진입점이 있어야 합니다.
• 구성 요소 선택기를 사용하면 현재 활성화된 중첩 응용 프로그램을 관리할 수 있습니다.

클라우드 마이그레이션에는 조직의 온프레미스 컴퓨터에서 클라우드 컴퓨팅 환경으로 필수 데이터, 애플리케이션 및 비즈니스 부분을 이동하는 작업이 포함됩니다.

npm install -g create-react-app

create-react-app head

cd head/

npm start

Change src/App.js to an actual header:

import React from 'react';

export default () => 


<header>

<h1>Logo</h1>
<nav>
<ul>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>;

const path = require('path');

const fs = require('fs');

const express = require('express');

const React = require('react');

const App = require('./transpiled/App.js').default;

const { renderToString } = require('react-dom/server');

const server = express();

server.get('/', (req, res) => {

const htmlPath = path.resolve(__dirname, 'build', 'index.html');

 fs.readFile(htmlPath, 'utf8', (err, html) => {


const rootElem = '

const renderedApp = renderToString(React.createElement(App, null));  res.send(html.replace( rootElem, rootElem + renderedApp) );  server.use(express.static(‘build’)); const port = process.env.PORT || 8080; server.listen(port, () => {  console.log(`App listening on port ${port}`);  });

npm install --dev babel-cli babel-preset-es2015

"transpile": "NODE_ENV=production babel src --out-dir transpiled --presets es2015,react-app",

"start:prod": "NODE_ENV=production node server.js"

npm run build

npm run transpile

npm run start:prod

마이크로 프론트엔드가 중요한 이유

데이터를 효과적으로 표현하는 것은 데이터 시각화에서 중요한 작업 중 하나이며 JavaScript에서 다양한 라이브러리는 작업을 쉽게 수행할 수 있는 오픈 소스입니다.

마이크로 프론트엔드의 이점

• 지원 코드 및 스타일 격리, 개별 개발 팀은 자신의 기술을 선택할 수 있습니다. 개발 및 배포 속도가 매우 빠릅니다.
• 지속적인 배포에 도움이 됩니다.
• 테스트가 매우 간단해지며 모든 작은 변경 사항에 대해 전체 애플리케이션을 만질 필요가 없습니다.
• 프론트 엔드 혁신 - 새로운 것을 개선하는 것이 더 쉬워집니다.
• 높은 탄력성과 더 나은 유지 보수.
• 코드 및 스타일 격리를 지원합니다.

요약 및 마무리