css2 shadcn-UI에서의 hydration 오류 해결 Trigger는 버튼이다. shadcn-UI를 사용하면서 dialog나 alertDialog, DropdownMenu 등 다양한 스타일을 사용하는 경우가 많다. 이것들을 사용할 때 지금까지 hydration 오류를 몇 번 만났지만, 개인프로젝트를 진행하면서 반응형 디자인을 적용하던 도중에 갑자기 발생하지 않던 hydraion 오류를 만나게 되어 해결하는데 시간을 소모했다. 정확히 표현하면 문제라고보기 어려운데, 이제껏 잘 써왔던 부분을 놓쳐서, 어렵게 해결하는 데 시간을 소모한 것이 되었다. 위 이미지는 오늘 문제의 원인이 된 trigger인데, 이 trigger의 타입을 보여주고 있는 이미지이다. 최근 이 프로젝트를 진행하며 모바일 디자인을 하면서는 위 오류를 만나지 못했는데, 데스크탑 디자인을 하면.. 2024. 9. 19. Styled-components에서의 재사용, 상속 스타일 재사용하기 styled components는 CSS-IN-JS라는 특성을 이용하여 자바스크립트 문법을 사용하여 css 코드를 다룰 수 있다. 그래서 기본적인 css에서는 재사용하려면 코드를 반복하거나 요소를 콤마 뒤에 추가해주는 형식으로 사용했는데, styled components에서는 간단한 문법으로 재사용이 가능하다. 먼저, styled-components에서 css 함수를 불러와야 한다. 컴포넌트에 있는 어떤 요소들에 공통적으로 들어가는 font-size가 있다고 하면 재사용할 속성을 담을 변수를 만든다. 그리고 해당 변수를 재사용하고자 하는 요소의 css 속성 내부에 추가해주기만 하면 된다. 이 예시를 코드로 만들면 아래와 같다.import { css } from "styled-compon.. 2024. 8. 14. 이전 1 다음
