인프런 커뮤니티 질문&답변
작성한 질문수
StoryBook 관련 궁금 사항입니다.
해결된 질문
24.07.20 14:18 작성
·
124
·
수정됨
1
Next.js를 사용하는 경우 이미지 최적화를 위해 next/image 에서 제공하는 Image 컴포넌트를 사용합니다! 이를 활용해서, 스토리북 컴포넌트를 만들 경우, React에서 이를 활용할 수 있을지 궁금합니다.
현재, React-Native-Cli에서 프로젝트를 진행하고 있습니다. React-Native-Cli(View, Text, Pressable)와, React, Next에서 모두 활용 가능한, 공용 스토리북 컴포넌트를 현실적으로 만들 수 있는지, 실무에서는 각각 따로 분리해서 개발을 진행하는지 여부가 궁금합니다!
타입스크립트로 만든 스토리북 패키지를, 자바스크립트를 활용한 (타입스크립트를 사용하지 않는) 프로젝트에서 활용가능한지도 궁금합니다!
프로젝트를 진행하면, 스토리북과 함께 한개의 레포지토리로 관리하는 것이 좋은지, 아니면, 따로 분리해서 두개의 레포지토리로 관리하는 것이 좋은지 궁금합니다!
개발 시작시, 먼저 스토리북으로 컴포넌트를 제작 후, 개발을 진행하는 것이 좋은지, 아니면, 개발을 진행해가며, 그때 그떄 공용 컴포넌트로 쓰일 만한 것들을 스토리북으로 만들어나가는 것이 좋은지 강사님의 경험상 괜찮은 방법을 알려주시면 감사하겠습니다!!
답변 1
1
2024. 07. 21. 22:29
용민님 이번에도 좋은 질문 감사합니다! 하나씩 답변을 드리자면
Storybook에서 Next.js와 연동하는 방법을 안내하는 공식문서가 있습니다. Next.js의 Image 컴포넌트에 관한 섹션이 있으니 참고해서 진행하시면 될 것 같아요!
저는 말씀해주신 도구들을 다 활용해본적이 없어서 경험에 빗대어 답변을 드릴 수는 없지만, 스토리북이 다양한 프레임워크를 지원하기 때문에 가능할 것 같습니다. 따로 분리해서 개발을 하다보면 아무래도 공용 컴포넌트라는 개념에서 멀어지기 때문에 디자인 시스템을 구축한다는 의미가 퇴색될 것 같아요
섹션3에서 npm 패키지로 배포하는 과정을 보시면 타입스크립트로 개발하더라도 npm 패키지로 배포할 때는 결국 자바스크립트가 됩니다. 따라서 자바스크립트에서도 사용하실 수 있습니다.
저는 별도의 레포로 관리하는게 좋은 것 같아요! 그래서 npm package로 배포해서 활용하는 편이 다양한 프로젝트에 UI 일관성을 가져갈 수 있는 방법이라고 생각합니다
디자인이 모두 마무리돼서 디자인 시스템 구축이 가능하다면 먼저 구축하고 본격적인 개발에 들어가면 좋겠지만, 아마 그렇지 못한 경우가 대부분일 것 같아요. 서비스를 운영하다가 조금 안정화되면 디자인 시스템을 본격적으로 갖추고, 스토리북을 활용하는게 조금 더 일반적인 것 같습니다. 다만 이부분은 제 경험상은 그렇지만 팀마다, 회사마다 다를 것 같아요!
2024. 07. 22. 17:05
초기단계라면 저는 스토리북을 활용해서 먼저 디자인시스템을 구축하지는 않을 것 같습니다. 그 이유는
초기단계라면 디자인이 언제든 바뀔 수 있고,
그러면 많은 시간을 투자해서 만든 컴포넌트들을 변경해서 디자인 시스템에 반영하고,
npm 패키지 버전을 업그레이드 하면서 UI에 잘 반영되는지 확인하고
기존의 레이아웃에 어떻게 영향을 미치는지 등등을
계속해서 확인해야 하는데, 물론 디자인 시스템을 갖추는 것은 좋지만 너무 불필요한 시간이 많이 소요될 것 같아요. 일단은 서비스 개발을 완료하시고, 디자인이 확정된 후에 구축해도 늦지 않을 것 같습니다!
2024. 07. 22. 17:30
너무 친절한 답변 감사합니다!!! 빠르게 프로젝트 개발 후, 도입해보고 싶은 주제의 좋은 강의였습니다!!! 덕분에 즐겁게 완강했습니다!!!
다음 강의도 기대하겠습니다!!!!!
2024. 07. 22. 16:30
정말 상세한 답변 감사합니다!!
5번에 대하여 추가적으로 궁금한 부분이 있습니다!!
만약, A라는 사이트를 제작을 진행해야 한다면, 먼저 A라는 사이트 개발을 완료하고, StoryBook을 만들어, 하나씩 컴포넌트를 대체해 나가는 것이 좋은 방향성일까요?
개인적으로, 하고 있는 프로젝트가 아직 초기 단계라, 스토리북을 먼저, 제작하고 진행할지, 아니면 Shadcn 라이브러리를 활용하거나, 직접 컴포넌트를 만들어 빠르게 개발을 진행한 후, 그 이후에 스토리북으로 하나씩 대체하는 것이 좋은 방향성일지, 궁금하여 질문을 남깁니다.
개인적으로, 방향성에 정답은 없다고 생각하지만, 경험이 많으신 강사님께서 선호하시는 방식은 어떤 부분인지, 장/단점에 대해서 궁금합니다!!