1. 무한한 깊이(depth)의 체크 박스 구현[그림 1]과 같이 무한한 깊이의 체크 박스를 구현할 필요가 있었다. 목차에 사용되는 데이터는 category 배열인데 이 배열의 요소는 객체이다. 이 객체 하나가 체크 박스 하나를 구성한다. 객체는 subcategory를 가지고 있어서 이를 통해 무한한 깊이의 목차를 만들 수 있다. 구현하고자 하는 기능은 다음과 같다.부모와 자식 체크 박스를 렌더링 할 때 시각적으로 구분이 가능하도록 margin-left 값을 자동으로 부여해야 한다.부모 체크 박스를 체크/해제하면 자식 체크 박스도 부모와 동일하게 체크/해제되어야 한다.자식 체크 박스를 체크/해제할 때는 부모 체크 박스에 영향을 주지 않아야 한다. 2. 구현 코드위 기능을 구현함에 있어 중요한 포인트는 재..

React.js 프로젝트에 shadcn을 적용하고자 하였다.  공식 페이지(https://ui.shadcn.com/docs/cli)에 있는 아래 명령어를 입력하였으나 정상적으로 설치되지 않았다.npx shadcn@latest init다른 여러 방법으로도 시도해 봤지만 결국 적용하지 못했다. 설치 실패 메시지 중 프레임워크를 찾을 수 없다는 내용이 반복되어서 결국 Next.js 프로젝트에 적용해 보게 되었고 너무도 자연스럽게 진행됨을 경험했다.이 글을 쓰고 있는 시점에서 shadcn은 React.js 프로젝트보다는 Next.js 프로젝트(버전 15.0.3)에 적용하는 것이 정신건강에 이롭다고 정리해 본다.1. Next.js 프로젝트에 shadcn 적용Next.js 프로젝트에 shadcn 적용은 아래 공식 ..