인프런 커뮤니티 질문&답변
작성한 질문수
storybook 프로젝트 세팅 중 궁금한 점이 있습니다.
해결된 질문
작성
·
54
0
만약 회사에서 Next.js로 프로젝트를 진행하고 있다고 가정할 때, storybook은 Next.js 프로젝트 내에서 세팅하는 것보다 아예 다른 프로젝트 디렉토리로 만드는 게 나을 것 같다는 생각이 드는데, 어떻게 생각하시나요?!
왜냐하면 특정 디렉토리 내에서 세팅할 경우 해당 프로젝트에서 기존 서비스와 Storybook 프로젝트가 혼재하여 복잡도를 높이고, (이건 추측이지만) storybook 배포 시 특정 디렉토리를 제외해야 할 것 같다고 생각합니다. 그리고 다른 프로젝트 생성 시 또 다시 storybook을 설치하는 것은 비효율적일 것 같습니다.
그래서 아예 다른 프로젝트 디렉토리에서 리액트로 storybook 을 세팅하고 npm 패키지로 업로드 후 install 하여 사용한다고 생각했는데, 제가 생각한 게 맞을까요?
답변 2
2
안녕하세요! 좋은 질문 감사합니다. 제생각엔 두가지 방향 모두 장단점이 있고, 의사결정의 문제라고 생각합니다. 예를들면,
Next.js 프로젝트 내 Storybook 세팅하는 경우에는 아래와 같은 장단점이 있을 것 같습니다.
장점
유지보수 용이: Storybook과 실제 서비스 코드가 항상 동기화됨.
개발 편의성: 같은 코드베이스에서 import/export 관리가 쉬움.
설정 관리: 별도의 build, lint, typescript 세팅이 필요 없음.
코드 중복 최소화: 패키지 관리가 간단.
단점
프로젝트 복잡도 증가: 루트에 Storybook 관련 파일과 설정이 추가됨.
빌드/배포 분리 필요: 실서비스 빌드시 Storybook 빌드 제외 필요 (예: Vercel 배포시
.storybook,stories디렉토리 무시 등).의존성 혼합: 필요 없는 devDependency가 Next.js에도 함께 올라감.
반면에 제안해주신 것처럼 별도 프로젝트 디렉토리에 Storybook 관리한다면 아래와 같은 장단점이 있을 것 같아요. 위의 장점이 단점이 되고 단점이 장점이 된다고 보시면 됩니다.
장점
완전 분리: 서비스와 독립적으로 컴포넌트 개발 및 테스트 가능.
재사용성: 여러 프로젝트에서 같은 컴포넌트 패키지를 사용 가능.
배포/빌드 걱정 없음: Storybook 빌드가 서비스에 영향 없음.
의존성 경량화: Next.js 서비스엔 실제 사용 컴포넌트만 npm 패키지로 import.
단점
설정 중복: typescript, eslint 등 dev 세팅 별도로 관리 필요.
초기 세팅 비용: lerna, turborepo 등 모노레포 구조 고려해야 유지관리 편리.
동기화 번거로움: 컴포넌트 변경시 패키지 버전업 후 서비스 프로젝트에 적용 필요.
컴포넌트 개발속도: 스토리북 프로젝트와 서비스 프로젝트간에 import/export 경로가 멀어짐.
그래서 제생각에는, 만약 단일 프로젝트라면 굳이 관리포인트를 늘리지 마시고 같은 레포에 세팅을하고, 사내에 관리해야하는 프로젝트가 많은 경우에는 패키징을 할 것 같아요(아니면 추후에 확장을 미리 고려한다면)
예시를 보여드리려고 다양한 테크회사들의 블로그를 찾아봤는데, "이렇게 컴포넌트를 구현한다" 정도는 있는데, npm으로 배포한다는 예시는 잘 보이지 않네요. 다만 당근에 별도의 사이트가 있는 걸 보면, 여기는 아마도 별도의 패키지로 관리하지 않을까 하는 추측을 해봅니다!
1
안녕하세요, 인프런 AI 인턴입니다. 수병수병님.
Storybook과 Next.js 프로젝트를 어떻게 효율적으로 관리할지에 대한 질문을 주셨군요. 먼저, Storybook을 별도의 디렉토리로 두는 것과 관련된 몇 가지 고려사항을 설명드리겠습니다.
모노레포 사용 장점: Storybook을 Next.js 프로젝트와 동일한 리포지토리에 두면, 해당 프로젝트와의 통합과 유지관리가 보다 용이해질 수 있습니다. 특정 디렉토리를 통해 Storybook을 관리하면, 코드베이스의 동기화를 보다 쉽게 관리할 수 있으며, Storybook에서 사용하는 컴포넌트를 테스트 및 업데이트할 때 더욱 편리합니다.
독립적인 Storybook 프로젝트의 경우: 별도로 리액트 프로젝트로 Storybook을 설정하고, 컴포넌트를 npm 패키지화하여 다른 프로젝트에서 사용할 수 있습니다. 이렇게 하면 여러 프로젝트 간에 공통 컴포넌트를 공유하기가 수월해질 수 있지만, 초기 설정이 복잡해질 수 있습니다. 또한, 해당 컴포넌트 패키지의 버전 관리를 철저히 해야 할 필요가 있습니다.
디렉토리 구조: 프로젝트와 Storybook의 디렉토리 구조는 프로젝트의 규모와 복잡도에 따라 달라질 수 있습니다. 작은 규모의 프로젝트에서는 동일한 리포지토리 내에서 관리하는 것이 더 효율적일 수 있지만, 대규모 프로젝트에서는 독립적으로 관리하는 것이 더 나은 선택일 수 있습니다.
다음 링크에서는 Storybook을 Next.js 프로젝트와 함께 사용하는 방법에 대해 다루고 있습니다. 참고하시면 의사결정에 도움이 되실 것입니다.
결론적으로, 귀하가 제안하신 방법도 확실히 좋은 접근 중 하나이며, 여러 가지 방법 중 하나로 고려될 수 있습니다. 각 방식에는 장단점이 있으므로, 귀사의 프로젝트와 팀 구성에 가장 적합한 방식을 선택하시면 됩니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.