storybook (2) 썸네일형 리스트형 (트러블 슈팅) Next.js 14 와 Storybook 에서 TailwindCSS 호환 이슈 Next.js 14와 Storybook에서 TailwindCSS를 함께 사용하기 위한 호환성 문제 및 해결 방법(추가 2024. 10) 2024년 10월 기준으로 Next.js 14.2.15, Storybook 9.3.5, TailwindCSS 3.4.14 조합에서는 TailwindCSS가 정상적으로 동작하는 것이 확인되었습니다. 이로써 최신 Storybook에서의 호환성 문제를 해결하고, TailwindCSS를 활용한 디자인 시스템 구축이 원활히 이루어질 수 있습니다. 개발자들에게는 버전 호환성을 주의 깊게 확인하는 것이 중요하며, 최신 버전의 안정성을 보장받기 전까지는 이전 버전을 사용하는 것이 안정적일 수 있습니다. (추가 2024. 07) Storybook 최신 버전 8을 TailiwdCSS와 연.. (디자인 시스템) Storybook 과 TailwindCSS 디자인 시스템 구축 최근 개발팀의 인원이 증가하고, 버전 관리가 복잡해짐에 따라 프론트엔드 개발에서 공통적인 요소를 사전에 정의하고 활용하는 필요성이 더욱 커졌습니다. 현재 프론트엔드 개발자는 총 5명, 백엔드 개발자는 3명으로 구성되어 있으며, 여러 버전을 동시에 개발해야 하는 상황에서 효율적인 협업과 일관성 유지가 중요한 과제로 대두되었습니다. 이러한 필요성을 해결하기 위해 디자인팀과의 협의를 통해 디자인 시스템을 도입하기로 결정했습니다. 처음에는 디자인 시스템에 디자인 토큰 개념까지 적용해 프로젝트에 사용하고자 했으나, 초기 도입 시점에서는 예상보다 큰 실익을 얻지 못한다고 판단했습니다. 대신 TailwindCSS를 기반으로 한 Storybook을 설정하여 가장 작은 단위의 요소를 공통으로 정의하고, 점진적으로 디자인.. 이전 1 다음
