Micro Frontends Architecture with Module Federation · 강의

딥 링크 및 URL 관리

모듈 연합 애플리케이션에서 딥 링크를 처리하고 일관된 URL을 유지하는 방법을 학습합니다.

딥 링크 및 URL 관리은(는) CoddyKit의 무료 Micro Frontends Architecture with Module Federation 강의입니다. 이것은 4개 중 3번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Micro Frontends Architecture with Module Federation 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Micro Frontends Architecture with Module Federation 강의에는 총 4개의 강의가 포함되어 있습니다.

이 강의의 일부는 아직 번역되지 않았으며 영어로 표시됩니다.

Deep Linking in Micro Frontends

Deep linking allows users to navigate directly to specific content within an application via a URL. Instead of just loading the homepage, a deep link can take them to a product detail page, a specific article, or a user profile.

In Micro Frontends (MFEs), deep linking is crucial for a seamless user experience. It ensures that even though your application is composed of many independent parts, users can bookmark, share, and return to exact states within the overall system.

URL Challenges in Federated Apps

While powerful, deep linking in a federated architecture presents unique challenges:

Decentralized Ownership: Different teams own different MFEs, potentially leading to inconsistent URL patterns.
Routing Conflicts: Multiple MFEs might try to handle the same URL paths or manage browser history independently.
State Management: Passing necessary data via URLs between the host and remote MFEs, or between remotes, requires careful planning.

Without proper coordination, deep links can break, leading to frustrating user experiences.

Establishing URL Conventions

To manage deep links effectively, establish clear URL conventions:

Unique Prefixes: Assign a unique URL prefix to each MFE (e.g., /products/... for the products MFE, /cart/... for the cart MFE).
Consistent Structure: Define a consistent way to structure parameters, IDs, and sub-paths within each MFE's segment.
Documentation: Document these conventions clearly for all MFE teams to follow.

This ensures that the host application can easily identify which MFE is responsible for a given URL segment.

Host-Orchestrated Deep Links

The host application often plays a central role in orchestrating deep links. When a user navigates to a URL, the host application's router is the first to intercept it.

Its responsibilities include:

Parsing the incoming URL to identify the target MFE based on the URL prefix.
Dynamically loading the correct remote MFE.
Passing the relevant part of the URL (the MFE's sub-path and parameters) to the loaded MFE for internal routing.

This approach centralizes the initial routing decision, making it easier to manage the overall application's navigation flow.

Remote MFE's Internal Routing

Once the host application has loaded a specific remote MFE, that MFE then takes over the routing for its designated URL segment.

The remote MFE's internal router (e.g., React Router, Angular Router) processes the sub-path it receives from the host. It then renders the appropriate component or view within its own boundary.

This allows each team to maintain independent control over their MFE's internal navigation logic while still integrating into the larger federated application.

Passing Data via URL Parameters

Deep links often need to convey specific data, such as an item ID or a filter setting. This is typically done using URL parameters:

Path Parameters: Part of the URL path itself (e.g., /products/item/123).
Query Parameters: Appended after a ? (e.g., /products/search?category=electronics&page=2).

The host can extract these parameters and pass them to the remote MFE, or the remote MFE can directly read them from the browser's URL once it's loaded and active.

Browser History Synchronization

When multiple MFEs are active, it's crucial to have a single, unified browser history. If each MFE manipulates the browser's history independently, you can run into conflicts and unexpected back/forward button behavior.

Strategies for synchronization:

Host Controls History: The host application is the sole owner of the browser history, and remote MFEs request history changes through the host.
Shared History Library: Use a shared routing library or context that all MFEs subscribe to for history updates.

This ensures a consistent navigation experience for the user.

Example: Host Delegating URL

Here's a simplified JavaScript example demonstrating how a host application might parse a deep link and delegate to a specific MFE based on the URL path:

function delegateRoute(fullPath) {
  console.log(`Host processing: ${fullPath}`);
  if (fullPath.startsWith('/products')) {
    const remotePath = fullPath.substring('/products'.length);
    console.log(`  Loading Products MFE with path: ${remotePath || '/'}`);
    // In a real app: Dynamically load Products MFE
    // and pass remotePath for its internal routing.
  } else if (fullPath.startsWith('/cart')) {
    const remotePath = fullPath.substring('/cart'.length);
    console.log(`  Loading Cart MFE with path: ${remotePath || '/'}`);
    // In a real app: Dynamically load Cart MFE
  } else {
    console.log('  Loading Home MFE');
  }
}

delegateRoute('/products/item/456?color=red');
delegateRoute('/cart/checkout');
delegateRoute('/about');

Example: Remote MFE Using URL Data

Once a remote MFE is loaded, it needs to extract and use the relevant path and query parameters from the URL. This example shows how a 'Products' MFE might process its internal path:

// Simulate the Products MFE receiving its path segment
function processProductDeepLink(remotePath) {
  console.log(`Products MFE processing internal path: ${remotePath}`);
  if (remotePath.startsWith('/item/')) {
    const itemId = remotePath.split('/')[2];
    // In a real app, use window.location.search
    // Mocking window.location.search for runnable example
    const currentUrlSearchParams = new URLSearchParams(
      typeof window !== 'undefined' && window.location && window.location.search
        ? window.location.search
        : '?source=deeplink'
    );
    const source = currentUrlSearchParams.get('source');
    console.log(`  Displaying Product ID: ${itemId}, Source: ${source}`);
  } else if (remotePath === '/category/electronics') {
    console.log('  Showing Electronics Category Page');
  } else {
    console.log('  Showing Products Dashboard');
  }
}

// Simulate calls from the host with different remote paths
processProductDeepLink('/item/123');
processProductDeepLink('/category/electronics');
processProductDeepLink('/');

Deep Link & URL Management Check

Test your understanding of managing deep links and URLs in Micro Frontends.

Deep Linking & URLs Recap

In this lesson, we explored how to handle deep linking and maintain consistent URLs in federated applications:

Deep linking is vital for user experience in MFEs.
Challenges include decentralized ownership and routing conflicts.
Consistent URL conventions and host-orchestrated routing are key.
Remote MFEs handle internal routing for their specific URL segments.
URL parameters are used to pass data, and browser history should be synchronized for a smooth experience.

Mastering these techniques ensures a cohesive and navigable user interface across your distributed application.

자주 묻는 질문

“딥 링크 및 URL 관리” 강의는 무료인가요?

네 — “딥 링크 및 URL 관리” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Micro Frontends Architecture with Module Federation 강의 전체를 잠금 해제할 수 있습니다. Micro Frontends Architecture with Module Federation 강의에는 총 4개의 강의가 포함되어 있습니다.

“딥 링크 및 URL 관리”에서 뭘 배우나요?

모듈 연합 애플리케이션에서 딥 링크를 처리하고 일관된 URL을 유지하는 방법을 학습합니다. 브라우저에서 직접 실행하는 실습 코드로 Micro Frontends Architecture with Module Federation을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Micro Frontends Architecture with Module Federation을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Micro Frontends Architecture with Module Federation은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 3번째 강의입니다.

“딥 링크 및 URL 관리” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Micro Frontends Architecture with Module Federation 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Micro Frontends Architecture with Module Federation 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Micro Frontends Architecture with Module Federation(으)로 돌아가기