Kakao Shares Benefits Gained from Developing Admin UI Component Monorepo

Kakao FE Platform Team shared the benefits of adopting the Monorepo approach while developing the Admin UI Component project, which applies the company's internal design system. To support React, vanilla JavaScript, and future Vue compatibility, the project adopted an architecture that separates complex component logic from rendering logic.

Separation of Logic and Rendering

To avoid duplicate implementations in feature-rich components like the Datepicker, pure logic objects excluding the actual rendering logic were separated into a Core package. Each UI environment (React, HTML, etc.) depends on this Core package to render the screen and control interactions. This allows multiple packages such as @kakao/admin-ui-core, @kakao/admin-ui-react, and @kakao/admin-ui-html to be managed in a single repository.

Practical Benefits of Monorepo Adoption

The Kakao FE Platform Team secured the following development efficiencies through the monorepo approach:

• Automated Dependency Management: Reduced the burden of manual management by automating symbolic link setup and npm install processes required for local development between packages via scripts.
• Consistent Configuration: Reduced duplication and enforced the use of identical versions by managing development tool configurations such as ESLint, Prettier, Jest, and Storybook at the repository root.
• Atomic Change Management: Facilitated change history tracking by handling tasks requiring inter-package dependency changes or version updates in a single commit and branch.
• Integrated Testing and Deployment: Simplified the CI environment and automated deployment to the internal NPM registry through scripts that run unit tests, E2E tests, and more for all packages at once.

The project used Lerna as the primary management tool and also mentioned the possibility of using it alongside npm 7+ workspace features or Yarn workspaces.