스토리
Frontend
NextJs로 React 컴포넌트 라이브러리 웹사이트 만들기
Jul. 10, 2021, 11:51 am.

By Jaekwon Han

Jaekwon Han leads Front-end team at 29CM and has worked as a Front-end developer and an UI designer.

문제점

npm에 배포하는 라이브러리를 만들 때 "어떻게하면 빠르게 테스트해보고 고칠 수 있을까" 하는 고민에 여러 방법을 사용해봤습니다. npm publish --tag next나 create-react-app을 사용해 데모 웹페이지를 만드는 방식이죠. 그러다 주로 사용하고 있는 next.js를 사용해서 할 수 있을까 고민하게 됐고, 몇 번의 시행착오 끝에 그런 구조를 같게 되었습니다.

Workspaces

npm/yarn에서 제공하는 Workspace를 사용하면 monorepo + multi package가 가능합니다. 라이브러리 코드를 들고 있는 폴더의 package.json에 name을 workspace-${library_name}로 작성하면 (저의 경우 workspace-athena) 예저 코드를 들고 있는 폴더에서 import * from 'workspace-athena'가 가능해집니다.
마치 실제 라이브러리를 사용하는 것처럼 import 해서 쓸 수 있기 때문에 라이브러리 코드 내에서 실수로 export 되지 않은 코드들을 발견할 수도 있습니다.

next.config.js

1require('next-transpile-modules')(['workspace-athena'])