최근 몇 년 동안 개발자가 UI 라이브러리에 접근하는 방식이 눈에 띄게 바뀌었습니다. 즉, npm 패키지를 통해 전체 구성 요소 라이브러리를 설치하는 것에서 벗어나 코드를 코드베이스에 직접 복사하여 붙여넣는 방향으로 바뀌었습니다.

이러한 추세는 유연성을 극대화하기 위해 프로젝트에 직접 복사할 수 있는 미리 만들어진 사용자 정의 가능한 구성 요소를 개발자에게 제공하는 라이브러리인 Shadcn/UI에 의해 크게 대중화되었습니다.

복잡한 구성 요소에 대한 복사가 효과적인 이유

복사-붙여넣기 접근 방식은 특히 인증 페이지, 세부 대시보드 또는 복잡한 데이터 시각화와 같은 복잡한 UI 요소에 적합합니다. 이러한 구성요소에는 변경 불가능한 npm 패키지를 통해 달성하기 어려운 미세 조정된 사용자 정의가 필요합니다.

끝없는 구성 옵션으로 라이브러리의 API를 압도하는 대신 이 접근 방식을 통해 개발자는 최신 프런트엔드 프레임워크의 구성 가능하고 선언적 특성을 활용하여 구성 요소의 모든 부분을 더 효과적으로 제어할 수 있습니다.

길고 복잡한 CSS 선택기 대신 구성 요소의 요소에 스타일을 직접 적용할 수 있습니다. 복잡한 종속성 주입 논리를 사용하여 구성 요소를 주입하는 대신 원하는 대로 구성 요소를 배치하거나 재배열하기만 하면 됩니다.

Bit Platform의 대화형 shadcnui 차트

이러한 접근 방식은 AI 코딩 도우미의 도입으로 더욱 중요해졌습니다. 길고 복잡한 프롬프트가 포함된 AI를 통해 처음부터 구성 요소를 생성하거나 어시스턴트와 긴 대화를 나누는 대신 필요한 것과 가까운 사전 구축된 구성으로 시작할 수 있습니다.

프로젝트에 코드를 삽입하면 AI 도우미에게 구체적이고 실질적인 컨텍스트를 제공할 수 있습니다. 여기에서 스타일 조정, 접근성 기능 추가, 레이아웃 변경 등 점진적인 조정을 요청할 수 있습니다.

비트컴포넌트: 직접 편집할 수 있는 패키지

Bit는 웹 개발 세계에 새로운 실체인 Bit Component를 도입했습니다. 간단히 말해서 Bit 구성 요소는 슈퍼 패키지로 생각할 수 있습니다. 특정 프로젝트 설정과 관계없이 공유, 설치, 복사는 물론 공동 작업도 가능합니다.

간단하게 UI 구성 요소를 디자인 시스템 구성 요소와 블록 구성 요소라는 두 그룹으로 나눌 수 있습니다. 디자인 시스템에서 카드와 같은 기본 구성 요소는 기본 구성 요소입니다. 한편, 미디어카드와 같은 블록 구성요소는 디자인 시스템 요소로 구성되지만 보다 발전된 기능을 제공합니다.

선택 1: 디자인 시스템 구성 요소로 구성

새 구성요소를 생성할 때 첫 번째 옵션은 디자인 시스템에서 구성하는 것입니다. 예를 들어, 맞춤형 카드를 만들려면 카드, 버튼, 타이포그래피와 같은 구성요소를 결합해야 할 수도 있습니다.

비트 플랫폼에서 공유되는 MUI 기반 구성 요소

이러한 구성요소는 npm, pnpm, Yarn 또는 Bit 설치를 통해 프로젝트에 설치할 수 있습니다.

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

선택 2: 블록 구성 요소 활용

사전 제작된 블록 구성 요소를 선택하면 간단한 설치 외에도 다양한 선택이 가능합니다.

가장 쉬운 방법은 구성 요소 패키지를 직접 설치하고 해당 API를 사용하는 것입니다. 이 접근 방식은 구성 요소가 기본적으로 사용자의 요구 사항에 맞거나 약간만 조정하면 되는 경우에 적합합니다.

광범위한 변경이 필요한 시나리오의 경우 Bit의 포크 명령을 사용하면 구성 요소의 전체 코드를 프로젝트에 복사할 수 있습니다. 여기에는 소스 파일, 종속성 및 구성(구성 요소의 개발 도구 포함)이 포함됩니다.

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

예를 들어 MediaCard 구성 요소와 해당 구성을 복사하려면 비트 포크를 실행하고 해당 구성 요소 ID(패키지 이름 아님)를 인수로 전달합니다.

bit fork learnbit-react.material-ui-blocks/content/media-card

Bit는 구성 요소를 변경하고 새 버전을 출시할 수 있는 비트 가져오기 명령도 제공한다는 점에 주목할 가치가 있습니다. 이 옵션을 사용하려면 구성 요소를 수정할 수 있는 적절한 권한이 필요합니다(원래 구성 요소에 영향을 주지 않는 bit fork 명령과 다름).

종속성의 소스 파일 꺼내기

종속성이 있는 구성 요소를 포크할 때 Bit는 편의를 위해 해당 구성 요소를 자동으로 설치합니다. 그러나 종속성의 소스 코드에 직접 액세스해야 하는 경우 해당 종속성을 분기할 수도 있습니다.

예를 들어 Button 구성 요소를 복사하려는 경우 Bit Platform에 있는 팀 컬렉션에서도 해당 구성 요소를 포크할 수 있습니다.

bit fork bitdesign.material-ui/inputs/button