리액트와 타입스크립트를 활용한 마이크로 프런트엔드 아키텍처 셋업 방법

2025-02-20 02:13:38

reacttypescriptwebpackredux

마이크로 프런트엔드 아키텍처란?

마이크로 프런트엔드 아키텍처(Micro Frontend Architecture)는 대규모 프런트엔드 모놀리식 애플리케이션을 더 작은, 자립적인 유닛으로 분할하여 독립적으로 배포할 수 있도록 하는 패턴입니다. 각 유닛은 특정 앱 기능을 책임지며, 독립적으로 개발, 테스트, 배포가 가능하다는 이점이 있습니다. 이 접근법은 모듈화, 기술적 유연성 및 팀 협업을 강화하는 데 도움을 줍니다.

준비 사항

Node.js 및 npm/yarn 설치
React, TypeScript, Redux, Webpack 및 테스트에 대한 기본 지식
코드 품질 관리 도구인 SonarQube에 대한 친숙함

프로젝트 구조 설정

마이크로 프런트엔드를 다루는 시스템을 구축한다고 가정하고, 두 개의 React 앱(App1, App2)과 공통 컴포넌트를 포함하는 공유 UI 패키지를 생성할 것입니다.

프로젝트 디렉토리

/micro-frontend-architecture
  /apps
    /app1
    /app2
  /packages
    /shared-ui
  /tools
    /husky
  /node_modules
  package.json
  lerna.json
  tsconfig.json
  webpack.config.js

apps/: 주요 마이크로 프런트엔드들을 포함 (App1, App2).
packages/: 공유 컴포넌트 또는 패키지를 포함.
tools/: Git 훅을 위한 Husky 구성 포함.

Lerna를 사용한 모노레포 초기화

Lerna는 패키지, 종속성 및 버전 관리를 효율적으로 돕는 도구입니다.

Lerna 설치 및 초기화

npm install -g lerna
lerna init

이 명령은 프로젝트 폴더에 필요한 파일들(lerna.json, packages 등)을 생성합니다.

각 React 애플리케이션 생성

각 앱은 별도의 React 애플리케이션이지만 shared-ui 패키지의 공통 컴포넌트를 공유할 수 있습니다.

App1 생성

npx create-react-app apps/app1 --template typescript
cd apps/app1
npm install @reduxjs/toolkit react-redux

App2는 apps/app2 디렉토리에 유사하게 생성합니다.

공유 UI 패키지 추가

여러 앱에서 UI 컴포넌트를 공유하기 위해 공유 패키지를 생성합니다.

shared-ui 생성

mkdir packages/shared-ui
cd packages/shared-ui
npm init -y
npm install react react-dom

이후 간단한 버튼 컴포넌트(Button.tsx)를 생성합니다.

import React from 'react';

const Button = ({ children }: { children: React.ReactNode }) => (
  {children}
);

export default Button;

이 컴포넌트를 App1과 App2의 package.json에 의존성으로 추가해 사용합니다.

Webpack의 모듈 연합 설정

Webpack 모듈 연합(plugin)은 각 앱이 런타임 시점에 컴포넌트나 모듈을 공유할 수 있도록 도와주는 키 기능입니다.

Webpack 설정 예제 (App1)

const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: ['react', 'react-dom', '@reduxjs/toolkit'],
    }),
  ],
};

App2의 webpack.config.js에도 유사하게 설정하여 App1에 자신의 컴포넌트를 노출합니다.

Redux와 RTK Query 설정

두 앱 모두 상태 관리를 위해 Redux Toolkit과 데이터 가져오기를 위한 RTK Query를 사용합니다.

Redux 설정

각 앱에서 Redux 설정:

npm install @reduxjs/toolkit react-redux

Redux Slice 예제

authSlice.ts 예제:

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const authSlice = createSlice({
  name: 'auth',
  initialState: { isAuthenticated: false },
  reducers: {
    login: (state) => {
      state.isAuthenticated = true;
    },
    logout: (state) => {
      state.isAuthenticated = false;
    },
  },
});

export const { login, logout } = authSlice.actions;
export default authSlice.reducer;

RTK Query 설정

api.ts 예제:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.example.com' }),
  endpoints: (builder) => ({
    getUser: builder.query({
      query: () => 'user',
    }),
  }),
});

export const { useGetUserQuery } = api;

Jest를 통한 단위 테스트 설정

Jest를 이용해 React 컴포넌트와 Redux 슬라이스를 테스트할 수 있습니다.

Jest 설치

각 앱에 Jest 및 React Testing Library 설치:

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Jest 구성

각 앱의 jest.config.js 설정 예:

module.exports = {
  preset: 'react-app',
  setupFilesAfterEnv: ['@testing-library/jest-dom/extend-expect'],
};

컴포넌트 및 Redux 슬라이스에 대한 단위 테스트를 작성합니다.

SonarQube를 통한 코드 품질 분석

SonarQube는 코드베이스의 품질을 분석하고 보장하는 데 도움이 됩니다.

SonarQube CLI 설치

npm install -g sonar-scanner

프로젝트 루트에 sonar-project.properties 파일을 설정:

sonar.projectKey=my-microfrontend-project
sonar.sources=apps/app1/src,apps/app2/src
sonar.host.url=http://localhost:9000

SonarQube 분석 실행

sonar-scanner

Husky를 이용한 Git Hooks 설정

Husky는 코드 커밋 또는 푸시 전에 린팅, 테스트 등의 검사를 실행하도록 돕습니다.

Husky 설치 및 설정

npx husky-init
npm install

Husky 훅 설정

커밋 전에 린트 및 테스트를 실행하도록 Husky를 설정합니다:

npx husky add .husky/pre-commit "npm run lint && npm test"

결론

위의 단계를 통해, 여러 개의 React 앱을 사용하는 마이크로 프런트엔드 아키텍처를 성공적으로 설정했습니다. 이 방법은 확장성, 유지보수성 및 효율성을 모두 갖춘 아키텍처를 구축하는 데 도움이 됩니다.

R_11