Frameworks
Frameworks (프레임워크)
이 라이브러리는 프론트엔드 개발자와 엔지니어에게 웹사이트와 사용자 인터페이스를 구축할 수 있는 재사용 가능한 웹 컴포넌트 모음을 제공해요. 이 라이브러리를 도입하면 개발자가 프로토타입과 프로덕션 작업에서 일관된 마크업, 스타일, 동작을 사용할 수 있습니다.
이 라이브러리는 Custom Elements v1과 Shadow DOM v1 명세를 사용합니다.
Carbon Web Components v1에 대한 정보는 여기에서 찾을 수 있어요.
출처: Frameworks
본문
리소스 (Resources)
시작하기 (Getting started)
CDN 사용 (Using CDN)
설치 방법 (How to install)
모든 컴포넌트는 CDN을 통해 사용 가능해요. 즉 번들러 구성 없이 애플리케이션에 추가할 수 있다는 뜻입니다. 각 컴포넌트는 latest 태그나 특정 버전(버전 v1.16.0부터)을 참조해 사용할 수 있습니다.
{/* By `latest` tag */}
{/* By specific version */}
다음은 CDN을 통해 사용 가능한 컴포넌트 목록이에요.
- accordion.min.js
- breadcrumb.min.js
- button.min.js
- checkbox.min.js
- code-snippet.min.js
- combo-box.min.js
- content-switcher.min.js
- copy.min.js
- copy-button.min.js
- data-table.min.js
- date-picker.min.js
- dropdown.min.js
- file-uploader.min.js
- floating-menu.min.js
- form.min.js
- inline-loading.min.js
- layer.min.js
- link.min.js
- list.min.js
- loading.min.js
- modal.min.js
- multi-select.min.js
- notification.min.js
- number-input.min.js
- overflow-menu.min.js
- pagination.min.js
- progress-indicator.min.js
- radio-button.min.js
- search.min.js
- select.min.js
- skeleton-placeholder.min.js
- skeleton-text.min.js
- skip-to-content.min.js
- slider.min.js
- structured-list.min.js
- tabs.min.js
- tag.min.js
- text-input.min.js
- textarea.min.js
- tile.min.js
- toggle.min.js
- toggle-tip.min.js
- tooltip.min.js
- ui-shell.min.js
아티팩트의 오른쪽에서 왼쪽(RTL) 버전을 사용하려면 파일 확장자를 .min.js에서 .rtl.min.js로 바꾸세요. 예를 들어:
{/* By `latest` tag (RTL) */}
{/* By specific version (RTL) */}
기본 사용법 (Basic usage)
CDN 아티팩트는 브라우저의 사용자 정의 요소를 정의하므로, 스크립트 태그가 페이지에 추가되면 직접 사용할 수 있어요. 예를 들어:
/* Suppresses the custom element until it has been defined */
cds-dropdown:not(:defined) { ... }
Stackblitz의 예시는 CDN 아티팩트만으로 사용하는 방법을 보여줍니다:
ES import 사용 (Using ES imports)
설치 방법 (How to install)
프로젝트에 @carbon/web-components를 설치하려면 npm으로 다음 명령을 실행해야 합니다.
npm install -S @carbon/web-components
Yarn을 선호한다면 다음 명령을 대신 사용하세요:
yarn add @carbon/web-components
기본 사용법 (Basic usage)
Stackblitz의 예시가 가장 기본적인 사용법을 보여줍니다:
가장 먼저 해야 할 일은 ECMAScript import를 해결하기 위한 모듈 번들러를 설정하는 것이에요. 위 예시는 ViteJS를 사용하지만 Webpack 같은 다른 번들러도 사용할 수 있습니다.
모듈 번들러를 설정하면 컴포넌트 모듈을 import하기 시작할 수 있어요. 예를 들어:
import '@carbon/web-components/es/components/dropdown/index.js';
컴포넌트 모듈을 import한 후에는 네이티브 HTML 태그와 같은 방식으로 컴포넌트를 사용할 수 있습니다. 예를 들어:
<cds-dropdown>
<cds-dropdown-item value="foo">Foo</cds-dropdown-item>
<cds-dropdown-item value="bar">Bar</cds-dropdown-item>
<cds-dropdown-item value="baz">Baz</cds-dropdown-item>
</cds-dropdown>
사용 가능한 컴포넌트 목록 (List of available components)
사용 가능한 웹 컴포넌트를 여기에서 확인하세요. 사용 정보는 각 스토리에 제공된 노트에서 확인할 수 있습니다.
JavaScript 프레임워크 통합 (JavaScript framework integration)
사용 가능한 Carbon 컴포넌트의 웹 컴포넌트 버전 외에도, 이 라이브러리는 Carbon 컴포넌트의 순수 프레임워크 버전 대신 사용하려는 경우 Angular, React, Vue 같은 JavaScript 프레임워크와의 사용도 지원해요. 특히 React의 경우 이 라이브러리는 React 애플리케이션과의 더 원활한 통합을 위해 Carbon Web Components 주위의 래퍼 구현을 제공합니다.
이것은 웹 컴포넌트가 현대 브라우저 표준이고 애플리케이션에 존재하는 다른 프론트엔드 프레임워크와 잘 작동하기 때문에 가능해요. 또한 Shadow DOM 내의 캡슐화라는 이점도 제공됩니다.
참고: 위 접근 방식들은 인기 있는 JavaScript 프레임워크 안에서 Carbon Web Components를 사용하는 방법을 자세히 설명해요. API는 웹 컴포넌트가 사용되는 방식에 기반하며, 순수 프레임워크 대응물(Carbon React, Carbon Angular, Carbon Vue)과 다릅니다.
문제 해결 (Troubleshooting)
Carbon Web Components 설정 중 문제가 발생하면 더 많은 가이드라인과 지원을 위해 GitHub 저장소로 이동하세요. 문제가 아직 존재하지 않는다면 이슈를 생성하세요.
더 알아보기 (Learn more)
Carbon Web Components는 CDN이나 ES import 방식으로 사용할 수 있어요. CDN은 번들러 없이 latest 태그나 특정 버전으로 바로 사용할 수 있고, ES import는 @carbon/web-components를 설치해 모듈 번들러로 컴포넌트를 import합니다. 네이티브 HTML 태그처럼 사용할 수 있으며, Angular·React·Vue 같은 프레임워크와도 통합할 수 있어요.