국내유일
Micro Frontend부터 모노레포까지
대규모 서비스를 위한 프론트엔드 아키텍처

  • 01 MFA 개념부터 구현까지 한 번에

    낯선 개념을 한 번에 정리하고 프로젝트로 직접 구현하며 완벽 이해하는 커리큘럼!

  • 02 빅테크에서 도입을 이끈 강사님

    빅테크의 발표 영상에만 의존했다면 이 강의가 답! 현업 경험을 농축해 실무에 바로 적용!

  • 03 패키지매니저+번들러+모노레포도구

    Webpack의 모듈페더레이션부터 Vite, pnpm, nx, turborepo까지 10종 이상!

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

이런 적 있으시다면 지금 강의에 꼭 주목하세요.

걱정마세요!
이런 모든 고민, MFA 면 해결 가능합니다.

MFA는
이미 세계 유명 기업들이 도입하여 적용하고 있습니다.

* MFA : Micro Front-end Architecture

높은 개발 효율과 탁월한 유지보수
모놀리식보다, 훨씬 편안한 개발환경을 제공하는 MFA를 국내 유일의 강의로 만나보세요!

잠깐, MFA를 자세히 알고 싶다면? Click!
∙ MFA는 Micro Frontend Architecture의 준말입니다.
∙ 프론트엔드 애플리케이션을 작은 단위로 나누어 개별적으로 개발 및 배포하는 
아키텍처 패턴입니다.
∙ 애플리케이션이 명확한 경계와 책임이 있는 독립된 구성요소 집합으로 분할되는 
접근 방식이며,
모듈성과 확장성 기능을 갖추고 있어 유지 관리 및 테스트가 더 쉽습니다.
∙ 주로 다양한 팀이 협업하는 대규모 애플리케이션에서 발생하는 문제 때문에 필요로 됩니다.
∙ 중복 개발의 늪, 업무 결합도가 높을 때 발생하는 일정 관리 및 코드 관리 문제, 
유지보수의 오랜 시간 등을 해결할 수 있습니다.

Curriculum
대규모 커리어 플랫폼 서비스를
MFA로 설계하며 강의가 진행됩니다

| MFA를 가장 잘 학습할 수 있는 학습 프로젝트를 선정했습니다.

* 위 이미지는 예시 이미지로 실제 프로젝트와 다를 수 있습니다.

위와 같은 서비스에 적합한 아키텍처 판단 후

MFA 설계 - 구현 - 배포 - 운영까지의 4단계 커리큘럼으로 학습합니다.

STEP 01
MFA 설계
✓ 학습 Point : 프로젝트에 맞는 아키텍처를 검토 & 그에 적합한 개발 도구를 비교하여 최종 결정

STEP 02
마이크로 앱 & 공통모듈 구현
✓ 학습 Point : 명확한 의존 관계를 가지도록 기반이 되는 패키지와 비즈니스 로직을 다루는 마이크로 앱으로 분리 및 개발

STEP 03
통합 후 빌드 및 배포
✓ 학습 Point : 많은 기업들이 선택한 모듈 페더레이션 기술로
빌드하여 런타임에 페이지 및 프레그먼트 통합

STEP 04
운영
✓ 학습 Point : 장애가 전체 앱으로 퍼지지 않도록 운영, 배포하고
배포의 범위를 적절히 선정


위 커리큘럼의 단계별 학습 포인트를 확인하세요!

STEP 1
설계의 시작, 적합한 레포지토리 형식 결정!

모노레포로 설계하고, 최적의 도구까지 한 번에 학습합니다.

| 모노레포 Best Practice로 학습

MFA를 보완하는 모노레포 설계 1 | 의존성 충돌 보완
여러 앱이 공통 라이브러리나 모듈을 사용하다가 버전 충돌이 발생 가능한 상황까지 대비하여 진행됩니다.

∙ 모노레포를 이용해서 패키지 별로 의존 관계를 명확히 정의하는 방식으로 해결합니다.
∙ 순환참조나 역참조가 일어나지 않도록 패키지의 위계를 정확히 설정합니다.

MFA를 보완하는 모노레포 설계 2 | 성능이슈
저장소가 커지면서 낮은 체크인/체크아웃의 성능 이슈가 발생 가능한 상황까지 대비하여 진행됩니다.

∙ 초기 로딩되는 번들 사이즈를 다이어트하고, 필요할 때 lazy하게 로딩합니다.
∙ 공유 라이브러리는 여러번 로드되지 않도록 자원을 재사용합니다.
∙ 불필요한 렌더링이 여러번 발생하지 않도록 체크하고 해결합니다.

모노레포 구축 도구 최소 10종 이상 학습
목적에 맞는 구현 도구를 선택할 수 있습니다.

  • #01
    최적의 솔루션 선택

    상호보완적으로 기능을 조합하여
    프로젝트를 더욱 효율적으로 관리할 수 있습니다.

  • #02
    유연한 대처

    팀과 프로젝트의 요구사항에 부합하는 환경을 구축할 수 있습니다.

  • #03
    폭넓은 시야 확보

    현재와 미래의 기술 동향을 파악하고, 프로젝트에 적용할 수 있는 다양한 방법들을 알게 됩니다.

| 모노레포 도구 12종 |
2021.stateofjs.com 기준으로 현업에서 많이 사용하고, 만족하는 도구들을 꼽아 모았습니다.

지금 프로젝트가 아래 상황에 해당한다면 모노레포를 적용하는게 좋습니다.

  • 수십 개의 멀티 레포를
    관리하기 어려움

  • 거대한 모놀리식 프로젝트를 작은 단위의 패키지로 분해하고 추상화해야 할 때

  • 공통으로 관리& 사용하는 프로젝트가 많을 때

  • 프로젝트 설정이 유사하고 반복적인 작업으로 귀찮을 때

다른 것들과 비교되는 모노레포 만의 장점을 확인하세요!

  • 모놀리틱 구조는 아래의 치명적인 단점을
    가지고 있어 한계가 명확함.
    자세히 보기 ∙ 의존성 지옥
    ∙ 개발비효율 발생
  • 모놀리틱의 구조를 해결했지만
    고립성 때문에 아래 문제들이 또 발생함.
    자세히 보기 ∙ 번거로운 프로젝트 생성
    ∙ 패키지 중복코드 발생
    ∙ 관리 포인트 증가
    ∙ 일관성없는 개발자 경험
    ∙ 다른 패키지 변경사항 파악
    ∙ 교차 저장소의 리팩토링 비용
  • 멀티레포의 단점을 해결하기위해 모노레포 등장
    모노레포가 해결해주는 멀티레포의 문제
    자세히 보기 ∙ 더 쉬운 프로젝트 생성
    ∙ 더 쉬운 의존성 관리
    ∙ 단일화된 관리 포인트
    ∙ 일관된 개발자 경험 제공
    ∙ 프로젝트들에 걸친 원자적 커밋
    ∙ 서로 의존하는 저장소들의 리팩터링 비용 감소

STEP 2
도메인을 기준으로 분리하여 마이크로 앱을 구현하고
디자인 시스템과 인프라 레벨의 코드를 공통 모듈로 작성합니다.

* 위 이미지는 예시 이미지로 실제 프로젝트와 다를 수 있습니다.

개별 마이크로 앱 분리시 학습 Point Check

마이크로 프론트엔드
개발 및 디자인의 주요 기준!

  • 공통 인프라 코드 개발

    공통적으로 사용하는 인프라 레벨의 코드를
    직접 개발하고 공유하여 사용

  • UI 라이브러리 패키지 제작

    디자인 시스템의 역할을 하는
    UI 라이브러리 패키지를 제작하고 사용

  • App Shell 구현

    마이크로 앱을 하나로 묶는 App Shell에서
    전체 컨텍스트를 유지해야하는 코드 작성 및 마이크로앱의 라우팅 구현

MFA의 구현 핵심 = 모노레포 안에 개별적으로 구성된 마이크로 앱들을 통합하는 것!

독립된 앱들을하나의 앱으로 완벽하게 보일 수 있게 통합하고,
하나의 앱이 장애가 나더라도 다른 앱들이 동작할 수 있는 것이 MFA의 끝입니다.

STEP 3
개별 마이크로 앱들을 수많은 회사들이 선택한
Webpack의 Module Federation으로 런타임에 통합합니다

토스, N사, 쿠팡 등이 Module Federation으로 MFA를 구현한 이유

  • 중복 작업 감소
    공통 모듈이나 기능은 한 번 개발하여 여러 앱에서 공유할 수 있습니다.

  • 코드 공유 및 재사용
    Exposes와 Remotes 설정으로 다른 앱과 모듈을 공유하고 활용할 수 있습니다.

  • 성능 향상
    필요한 모듈만 로딩하여 앱의 부하를 줄이고, 필요한 시기에 앱을 확장하는 것이 가능해집니다.

  • 개발 유연성
    특정 기능 수정/추가시 해당 앱만 수정하여 배포할 수 있어 전체 시스템에 영향을 미치지 않습니다.

모듈 페더레이션이란? Click!
Module Federation은 Webpack 5에 새로게 추가된 기능으로, 여러 분리된 빌드들로 하나의 어플리케이션을 구성할 수 있도록 해줍니다.

컴포넌트 또는 코드 단위로 빌드된 결과물을 단/양방향에서 공유하여 사용할 수 있습니다. 
다른 빌드에 있는 코드를 동적으로 불러와서 사용할 수 있으며, 개별 빌드는 서로 의존성이 없어서 개별적으로 개발하고 배포할 수 있습니다.

Check Point 01
통합시 발생하는 주요 예상 문제들을 해결하며 통합합니다.

01 공통모듈구현
어떻게 여러 개의 마이크로 앱들을
하나로 통일되게 보여줄 수 있을까?
| 핵심 기술 키워드
App Shell 만들기
| 상세 내용
∙ App Shell로 전체 애플리케이션의 기본적인 레이아웃과 뼈대를 형성하는 역할을 만들고 그 안에 독립된 마이크로 앱들을 집어 넣는다.

*App Shell에는 공통적인 레이아웃, 네비게이션, 헤더, 푸터 등이 포함된다.
02 중복 로드
마이크로 앱이 독립적으로 빌드&배포되면서
코드나 모듈이 중복되면 속도 저하 등의 문제가 생기진 않을까?
| 핵심 기술 키워드
Shared 설정
| 상세 내용
∙ App Shell에 Shared 설정으로 여러 마이크로 앱 간에 공유되는 모듈을 정의한다. 이 설정을 사용하면 동일한 모듈이 여러 마이크로 앱에서 중복으로 로드되는 것을 방지하여 성능 향상과 일관성을 유지한다.
03 모듈통합
하나의 마이크로 앱에서 문제가 발생했을 때
다른 앱에 영향을 주면 어떡하지?
| 핵심 기술 키워드
에러 격리
| 상세 내용
∙ 에러 격리를 위해 React 에서 제공하는 Suspense, ErrorBoundary 를 활용한다.
각 마이크로 앱을 독립적인 유닛으로 분리하고, 하나의 앱에서 발생한 에러가 다른 앱에 영향을 미치는 것을 방지한다.

Check Point 02
쪼개진 앱들이 코드를 공유할 수 있도록 상호관계를 정의합니다.

핵심 설정을 100% 이해할 수 있도록 예제로 학습하여
탄탄한 실무 역량을 키울 수 있습니다.

STEP 4
구현만 한다고 끝이 아니죠!
아키텍처 도입 후 운영까지 책임집니다.

MFA 도입 이후 주요하게 발생할만한 문제들을 해결하는 방법까지 강의에 담았습니다.
MFA를 편안하게 도입하고 운영할 수 있게 도와드릴게요!

Module Federation으로 발생하는 실무 문제도 CASE별로 모두 사전차단!

CASE 1

MFA를 도입하면 각각의 마이크로 앱에서 불필요한 중복 코드가 존재하여 전체적인 소스 코드의 양은 증가할 수 있는 단점이 있습니다.
이로 인해 앱간 전환시에 성능 저하가 발생할 수 있으며, 소스 코드 레벨에서 잘못된 의존 관계로 인해 초기 로딩시에 불필요한 부분까지 실행이 될 수 있습니다.

∙ Web Vitals, Lighthouse, Chrome Performance 를 이용한 프론트엔드 성능 측정 방법을 배우고 해석합니다.
∙ 해석을 바탕으로 잘못된 의존 관계나 불필요한 중복 코드를 잡아냅니다.

CASE 2

Module Federation 을 이용했으나,
각 앱이 사용하는 코드가 의존 관계를 명확히 구분하지 않으면,
불필요한 오염 부분이 발생할 수 있습니다.

★Microsoft 인증 TypeScript MVP 강사님★
∙ 앱간의 의존성이 서로 상호 참조하거나, 역방향으로 설정되지 않도록
패키지 매니저, 빌드 도구, TypeScript 를 활용하여 의존성을 관리하는 방법을 전수합니다.

CASE 3

여러 앱을 통합하여 애플리케이션처럼 보이게 만들 때 ,
레이아웃 및 스타일이 충돌 할 수 있습니다.

각 앱간 내비게이션 흐름과 라우팅 방식을 일관성있게 관리하는 노하우를 전수합니다.

탄탄한 구성이라도 아무한테나 들으면 의미 없죠!

실전 MFA의 전문가에게 확실히 배우세요!

Lecture By
N사에서 직접 MFA를 도입하고 설계한
프론트엔드 전문가의 실전 MFA 압축 노하우

MFA 도입 이후 주요하게 발생할만한 문제들을 해결하는 방법까지 강의에 담았습니다.
MFA를 편안하게 도입하고 운영할 수 있게 도와드릴게요!

이웅재 강사님
현) N사 프론트엔드 개발팀 리드
∙ 프론트엔드 아키텍처 설계 및 개발 업무
∙ Monorepo 를 이용하여 대규모 서비스 개발과 운영중
∙ Micro Frontend 도입/구축 경험
∙ 2017 ~ 2023 Microsoft MVP (TypeScript)
마이크로 프론트엔드 아키텍처는 이미 미국에서는 주요하게 쓰이는 기술인데요. 한국 또한 많은 회사들이 이미 MFA를 도입하는 과정 속에 있고, 이제는 채용 과정에서도 이러한 경험을 요구하는 것으로 보아 이 기술이 대세가 될 것으로 보입니다.

하지만 생각보다 고려해야할 요소가 많아 혼자서는 학습이 어렵고, 국내에서도 관련 자료를 찾기 힘든 상황입니다.

제가 현업에서 실제로 MFA를 도입했던 경험을 토대로 큰 하나의 앱을 작은 여러 개의 앱으로 나누고, 각자의 개발 사이클 속에서 작업하는 경험을 이 강의를 통해 여러분과 함께 나누고 싶습니다.

Special
낯선 기술일수록 다양한 케이스를 아는게 필요하죠!
그래서 준비한 MFA 도입을 위한 스페셜 자료 2가지

대기업의 MFA 도입 사례를 통해,
실무에서 어떻게 MFA가 쓰이고 적용되는지 케이스를 공부해보세요!

기존 프로젝트에서 MFA로 전환하기 위해 고려해야하는 부분을
담은 시크릿 핸디북으로 완벽히 전환해보세요!

+ 최신 기술일수록 정보 공유는 활발해야 하니까!
강사님과 MFA에 관심있는 사람들이 모두 모인 질의응답 커뮤니티

∙ 본 커뮤니티는 온라인 강의장 공지사항에 기재된 링크를 통해 참여 가능합니다.
∙ 강사님의 질의 응답은 2023년 10월 18일 ~ 2026년 09월 04일 까지 운영 될 예정입니다.
∙ 답변은 영업일 기준 7일 이내로 진행됩니다.

상세 커리큘럼.

아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

마이크로 프론트엔드 개념 기초 학습

기술 이해를 통한 마이크로 프론트엔드 개념 심화 학습 1 : 설계를 위한 모노레포

기술 이해를 통한 마이크로 프론트엔드 개념 심화 학습 2: 분해와 통합을 위한 여러 기술 비교

마이크로 앱 통합의 핵심 기술 Module Federation 예제로 익히기

[프로젝트] 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 만들기 : 설계

[프로젝트] 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 만들기 : 공통 모듈 및 마이크로 앱 구현하기

[프로젝트] 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 만들기 : 통합 및 빌드 배포하기

[프로젝트] 마이크로 프론트엔드 아키텍처를 이용한 커리어 플랫폼 서비스 만들기 : 운영하기

부록1. 사례로 배우는 모놀리식에서 마이크로 프론트엔드로의 점진적 전환

부록2. 카카오 MFA 도입 사례 소개: 런타임 인젝션 통합방식을 활용한 카카오의 MFA

상세 커리큘럼 보기
(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기