Storybook 썸네일형 리스트형 [Vue.js] Vue3 환경에서 Storybook 설치 및 Pagination 공통 컴포넌트 적용기 어느 날, 새로운 기획 요구사항을 받았습니다. "페이지네이션 디자인을 변경해야 합니다."일반적으로는 디자인 요구사항에 따라 기존 컴포넌트를 수정하거나 새로 제작하면 됩니다. 하지만 이번에는 단순히 디자인을 바꾸는 데 그치지 않고, 디자인 시스템을 도입해보면 좋겠다고 생각했습니다. 왜 디자인 시스템인가?페이지네이션 같은 공통 컴포넌트는 서비스 전반에서 자주 사용되므로, 디자인 변경 시 전체적인 일관성을 유지하는 것이 중요합니다.여러 개발자가 함께 작업할 때, 컴포넌트가 표준화되어 있지 않으면 유지보수성이 떨어지기 때문에 효율적인 협업 환경이 필요했습니다.Storybook을 활용하면 UI를 독립적으로 테스트하고 문서화할 수 있어 개발 및 디자인 협업이 수월해진다는 점에서 매력을 느꼈습니다. 왜 이 작업을 .. 더보기 [vue.js] storybook 도입 (vue3 + vite) 한 서비스를 여러 개발자가 거쳐가다보니 비슷한 성격의 공통컴포넌트가 여러 개 생기고 관리가 안되는 불상사가 생겨버렸다...(+문서화의 중요성을 깨달았다.)공통 컴포넌트 관리를 위해 스토리북도 도입해서 ui 컴포넌트, 기능 컴포넌트 분리하여 관리해보고자 한다. 이번 개발 Feature 는 대용량 파일 업로드 시 진행 상황 프로그래스바 다이어로그를 띄워주는 작업이다.해당 개발을 진행하기에 앞써, 스토리북도 같이 진행하려고 한다. 필요성컴포넌트 관리 효율화: 여러 개발자가 개발한 비슷한 컴포넌트들을 통합하고 관리하기 위해 필요재사용성 향상: 공통 컴포넌트를 만들어 다른 프로젝트에서도 재사용할 수 있다.시각적 테스트 용이성: 컴포넌트를 독립적으로 시각적으로 테스트할 수 있어 개발 및 디자인 프로세스를 향.. 더보기 이전 1 다음
