돼지공방

간단하게 인스타그램 짤을 만들고 다운로드하는 기능을 만드는데 텍스트가 아래로 밀리는 문제가 발생하였다.아래의 사진이 오류가 발생한 사진이다.나는 tailwind를 사용해서 css를 작성하고 있었고 아래의 문제로 줄바꿈 오류가 발생하는것을 알았다.[에러원인] Tailwind CSS의 기본 설정: Tailwind CSS는 초기화 과정(preflight)에서 모든 img 태그의 CSS 속성을 display: block;으로 설정합니다.Block 요소의 특성: display: block; 속성은 요소가 줄바꿈을 일으키게 합니다. 즉, 요소 뒤에 자동으로 새 줄이 생깁니다.웹 브라우저 vs html2canvas: 웹 브라우저에서는 이 줄바꿈이 시각적으로 명확하게 보이지 않을 수 있지만, html2canvas가 H..

Storybook: UI 컴포넌트 개발과 문서화를 위한 도구Storybook은 UI 컴포넌트를 독립적으로 개발하고 문서화하는데 특화된 오픈 소스 도구입니다. React, Vue, Angular 등 다양한 프레임워크와 호환되며, 특히 디자인 시스템을 구축하거나 UI 품질을 보장하려는 개발자들에게 유용합니다.Storybook의 주요 장점독립적 컴포넌트 개발애플리케이션의 전반적인 맥락과 분리된 상태에서 UI 컴포넌트를 개별적으로 개발하고 테스트할 수 있습니다.컴포넌트 문서화각 컴포넌트의 사용법과 다양한 상태(스토리)를 문서화할 수 있어 유지보수와 협업에 효과적입니다.디자인 시스템 구축시각적으로 컴포넌트를 관리하며, 체계적인 디자인 시스템을 설계하거나 유지보수할 수 있습니다.테스트 통합Visual Regress..