Per ardua ad astra.

테마 토글 기능 설정하기 (with shadcn/ui)들어가며Next.js를 이용하여 테마 토글 기능을 설정하는 방법을 정리해본다.이 게시글의 내용은 타입스크립트(TypeScript)와 shadcn UI 컴포넌트 라이브러리를 바탕으로 작성되었다. 방법① 색상 템플릿 코드를 전역 스타일시트 파일(@globals.css@)에 넣기아래의 사이트에서 자신에게 맞는 라이트/다크 모드 색상 템플릿을 선택한 후, 색상 코드를 복사한다. shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com 그리고 전역 스타일시트 파일(@/app/..

asChild 속성들어가며@asChild@ 속성에 대해 정리해본다. asChild 속성개념Radix UI와 같은 라이브러리에서 사용되는 속성컴포넌트가 래핑(Wrapping)된 자식 컴포넌트의 스타일이나 기능을 그대로 유지하면서 특정 기능을 제공하기 위해 사용된다. 의미자식 요소를 그대로 사용한다.래핑된 컴포넌트가 새로운 DOM 노드를 생성하지 않고, 해당 자식 요소의 DOM을 그대로 사용하여 기능만 추가한다.불필요한 DOM 노드가 추가되지 않아 HTML 구조를 깔끔하게 유지하고, 스타일이 깨지지 않도록 보장한다. 사용 예 Menu ⇒ @@은 @@의 자식이지만, @@가 새로운 DOM 노드를 만들지 않는다.⇒ 대신 @@ 자체가 @DropdownMenuTrigger@로 작동하게 된다. 사용하면 좋은 경우추가..