TL;DR; Next.js에서 React 18 라이브러리를 사용하면서 'use client' 디렉티브 문제를 해결하기 위해 rollup-plugin-preserve-use-client 플러그인을 개발한 과정을 공유합니다. rollup-plugin-preserve-directives 을 사용할 수 없었던 이유와, preserveModules 옵션을 false로 사용하면서 클라이언트 컴포넌트에만 'use client' 디렉티브를 유지할 수 있는 방법을 찾는 과정을 설명합니다. 1. 개발하게 된 배경 저는 React 18을 활용한 UI 라이브러리를 개발하여 npm 모듈을 만들었습니다. 이 UI 라이브러리를 활용하여 Next.js 프로젝트에서 사용하려던 중 아래와 같은 문제를 마주치게 되었습니다. useState only works in Client Components… 에러 발생 문제의 원인을 파악하다가, 처음에는 UI 라이브러리에 클라이언트 컴포넌트와 서버 컴포넌트를 분리하여 번들…