WeAreDevelopers 에서 듣고온 내용을 토대로 마이크로 프론트엔드의 설명과 프레임워크 소개 및 간단한 시연을 합니다.

2. WeAreDevelopers World Congress
• 매년 독일 베를린

3. • 코로나로 인해 2년만에 대면 행사 진행
• 8000명 이상의 개발자 참석
WeAreDevelopers World Congress

4. 오프닝 키노트
How we will build the software of tomorrow
• Github CEO Thomas Dohmke
• AI 가 함수 메서드명으로 코드 자동 완성 기능을 제공하는 Github Copilot 프로그램을 통해, 개발
자가 코어개발에 집중하게끔 돕는 역할. (대체가 아님을 강조)
• 개발자가 행복해야 세상을 변화시킬 수 있다는 신념으로, Copilot 을 5년 이내에 80% 정확도를 제
공하겠다고 발표.

5. 오프닝 키노트
How we will build the software of tomorrow
• Internet Explorer 종료 발표. 환호를 내지르는 개발자들.
• Backend, Frontend, Devops 손 들라고 하자, 비율이 7 : 2.5 : 0.5
Fullstack 도 은근히 존재.
• 생각보다 없었던 동양인

6. Micro-frontend 배경
- 모노리스 : 하나의 프로젝트에서 백엔드와 프론트엔드 영역을 함께 개발하는 것.
ex) 스프링, 장고 프레임워크로 서버와 화면을 함께 만든다. 단점은 하나의 에러가 발생하게 되면, 모든 영역에 영향을 줄 수 있음.
- 프론트엔드 백엔드 분리 : 서버와 화면 개발을 분리. 장점은 프론트, 백 엔드 분리 개발/배포가 가능.
대규모 서비스 시 프로젝트가 너무 크기에 긴 배포 시간과 에러 발생시 프로젝트 영향 범위가 크다.
- 마이크로 서비스: 서버의 api 영역을 나눠서, Gateway를 통해 하나의 문으로 접근하여 api를 사용하는 것.
- 마이크로 프론트엔드: 화면/기능/도메인 별로 나눠 독립적인 개발/배포, 조립 후 화면 제공.

7. 마이크로 서비스와 마이크로 프론트엔드?
마이크로 서비스: 각 서비스별, 담당자 별로 팀이 구성되고 운영. (작년)
분리되어 있기에 팀 별로 커뮤니케이션이 느려지는 현상.
마이크로 프론트엔드는 기능/도메인 별로 팀마다 구성원이 조합되기에, 빠른 의사소통과 개발 가능.
특정 기능에 구성원들이 집중하여 End to End 독립적으로 개발/운영이 가능. 팀의 확장과 연관.

8. 기능 별로 각 영역을 담당한다면, 오른쪽 화면처럼 개발 가능.
한 페이지를 개발하는게 아닌, 결제/제품/검색 등으로 독립적인 모듈을 End to End로 개발.
서로의 기능과 코드, 기술을 신경쓰지 않아도 되는(black box) End-to-End 개발.
(물론 신경 쓰지 않을 순 없겠지만…)
https://micro-frontends.org/1-composition-client-only/

9. : Single SPA , Open Components , Mosaic , Podium , Luigi 및 Piral
- https://single-spa.js.org/
- 여러 프론트엔드 프레임워크(React, AngularJS, Vue, …)를 같은 페이지에 사용하여 구성 가능
마이크로 프론트엔드 프레임워크

10. : react, typescript, bootstrap
개념
1. Pilets (feature modules)
- 개별 기능 모듈, 각각 고유한 종속성과 자산을 포함하며 완전히 독립적
- pilet 자체가 페이지, pilet내 pilet 일 수 있음.
2. Feed Service (piral cloud)
- pilet들을 배포하는 곳
- feed service에 등록된 모든 pilets을 (Piral instance에서) 다운받아 전체 완성된 서비스를 반영한다.
3. Piral instance (app shell)
- 모든 feature 모듈이 통합되는 곳
- 기본 레이아웃을 위치 시키는 곳 : navbars, headers, footers, shared components
- app shell을 빌드한 결과
- dist/release 호스팅을 위한 결과물로 배포
- npm registry에 배포하여 dist/emulator 개별 pilet의 디버깅 가능
마이크로 프론트엔드 프레임워크

11. Process
1. App Shell역할을 하는 Piral instance 생성
2. Piral cloud에서 Feed 생성
3. Piral instance와 생성한 Feed와 연결
4. Piral instanc를 npm registr에 배포
5. 배포한 piral intance를 기반으로 pilet 생성
6. 개발한 Pilet을 Feed service에 배포
7. Piral instance를 실행
마이크로 프론트엔드 프레임워크

12. 1. Piral cli 설치
npm i piral-cli g
2. Piral instance (app shell) 생성
piral new --target netflix-piral

13. 3. Piral instance 실행
piral debug

14. 4. Piral cloud 가입 & Feed service에 feed 생성
https://portal.piral.cloud/
5. Piral Instance와 feed와 연결
- piral instanc의 src/index.ts
=> Piral instanc와 연결 가능하고, pilet들을 배포가능
=> Feed에 접근해 배포된 pilet들을 다운로드 가능

15. 6. Emulator build & npm publish
- Pilet 개발시 Piral Instance 접근 필요
- Emulator: Piral Instance 안에서 Pilets 이 어떻게 동작되는지 확인할 수 있도록 제공
piral build --type emulator
npm publish dist/emulator/netflix-piral-ys-1.0.1.tgz
//build emulator
//emulator publish to npm registry
browse 메뉴, 페이지 추가

16. 7. Create & develop Pilet & deploy
pilet new netflix-piral-ys
pilet publish --fresh --url <feed_url> ---api-key <feed_api_key> //deploy pilet to feed service
// create new pilet with piral instance npm package name
// piral instanc가 npm registry에 배포 되있어야 함.

17. 8. Execute Pilet
pilet debug
9. Execute Piral Instance
piral debug

18. Pilets
Piral Instance

19. Feed service

20. Thank You!