[와우 디자인 시스템 개발기] 롤업 번들링 시 use client 주석 삭제하는 문제 해결

우리는 이 디자인 시스템을 결국 next.js 14 버전에서 쓰려고 개발하고 있었다.

그래서, 개발하는 컴포넌트마다 맨 위에 use client라는 주석을 달아주고 있었는데, 이는 리액트 훅 등의 클라이언트 단에서 쓰는 로직들을 문제없이 인식하도록 하기 위한 것이었다.

 

그런데, 디자인 시스템 컴포넌트들을 next.js 14 버전 프로젝트에서 실행해보니 아래와 같은 에러가 난다는 코드 리뷰를 받았다.

 

분명 나는 스위치 컴포넌트를 개발하면서 맨 위에 use client 주석을 달아줬었는데 왜 그런 거지?라는 생각에 좀 더 찾아보게 되었다.

결국 문제는 롤업 번들링 과정이었는데, 지금 우리 디자인 시스템에서는 번들 크기를 조금이라도 더 줄이기 위해서 terser라는 플러그인을 사용하고 있었다.

이 terser를 사용하게 되면 번들링 과정에서 use client 주석을 지워주게 되고, 이를 지우지 않게 하기 위해서는 별도의 조치가 필요하다는 내용이었다.

궁금하다면 아래 글을 한 번 읽어보면 좋을 거 같다.

https://github.com/rollup/rollup/issues/4699

 

사실 해결 방법을 찾는데는 꽤 오래 걸렸다...

생각보다 롤업으로 번들링하게 되면 설정해 줄 게 많기도 하고, 세부적으로 들어가면 종종 문제가 터졌다...

 

아래 코멘트를 보고 문제를 해결하게 되었는데, 별도의 롤업 플러그인을 추가해서 해결하는 방법이었다.

아무리 찾아봐도 이 방법 외에는 해결 방법이 없는 듯해서 얼른 도입했다.

https://github.com/rollup/rollup/issues/4699#issuecomment-1468688860

 

아래 파일은 수정 이후 롤업 설정 파일이다.

플러그인 쪽을 보면 preserveDirectives.default()라는 내용이 추가되었고, 이 플러그인을 쓰기 위해서는 output의 preserveModules 속성도 true로 설정해줘야 한다고 해서 추가해 줬다.

https://github.com/GDSC-Hongik/wow-design-system/blob/9bd0cbe5effc0235aad4ae79076f69f6c5077520/packages/wow-ui/rollup.config.js

 

하지만 preserveModules 설정을 해주게 되면 기존 개발 과정에서 있던 폴더 구조를 빌드 후 폴더 안에도 가져가야 하기 때문에 우리가 원하는 대로 빌드 폴더 구조를 유지할 수 없다는 단점이 있었다...

그래서 추후 더 나은 대안이 생긴다면 그걸로 변경을 할 수도 있을 거 같다.