Frameworks

Frameworks (프레임워크)

Carbon React 라이브러리는 프론트엔드 개발자와 엔지니어에게 웹사이트와 사용자 인터페이스를 구축할 수 있는 재사용 가능한 React 컴포넌트 모음을 제공해요. 이 라이브러리를 도입하면 개발자가 프로토타입과 프로덕션 작업에서 일관된 마크업, 스타일, 동작을 사용할 수 있습니다.

출처: Frameworks

본문

리소스 (Resources)

• ##### Carbon React Storybook
• ##### Stackblitz로 React 컴포넌트 시도하기
• ##### Carbon React 튜토리얼

설치 (Install)

npm 사용:

npm install --save @carbon/react

Yarn을 선호한다면:

yarn add @carbon/react

참고: 오류를 피하려면 프로젝트에 @carbon/react의 peerDependencies가 설치되어 있는지 확인하세요.

시작하기 (Getting started)

@carbon/react 패키지는 Carbon 디자인 시스템의 컴포넌트, 스타일, 아이콘을 제공합니다.

컴포넌트는 프로젝트에 빌드 파이프라인을 필요로 해요. 이것은 번들러, 프레임워크, 또는 다른 빌드 도구의 형태일 수 있습니다. 몇 가지 예로 Next.js, Vite, Parcel, Webpack이 있습니다. 포괄적인 목록은 React 문서에서 확인할 수 있어요.

컴포넌트를 사용하려면 패키지에서 직접 import할 수 있습니다:

import { Button } from '@carbon/react';

function MyComponent() {
  return <Button>Example usage</Button>;
}

특정 컴포넌트의 스타일을 포함하려면 프로젝트에서 모든 스타일을 import하거나 특정 컴포넌트의 스타일을 포함할 수 있어요:

// Bring in all the styles for Carbon in your root/global stylesheet
@use '@carbon/react';
// Or bring in the styles for one component
@use '@carbon/react/scss/components/button';

아이콘 (Icons)

@carbon/react 패키지는 프로젝트에 포함할 수 있는 아이콘 컴포넌트도 제공해요. 이 아이콘 컴포넌트를 @carbon/react/icons 엔트리포인트에서 import할 수 있습니다:

import { Add } from '@carbon/react/icons';

function MyComponent() {
  return <Add />;
}

사용 가능한 아이콘의 전체 목록은 아이콘 라이브러리에서 제공됩니다.

webpack 기반 앱에서 @carbon/react 사용에 대한 더 깊은 소개는 React 튜토리얼을 확인하세요.

개발 (Development)

작업을 시작하기 전에 Contribution Guidelines를 참조하세요.

서버 사용하기 (Using the server)

컴포넌트 개발에 Storybook을 사용해요.

서버 시작:

yarn storybook

• 브라우저를 http://localhost:9000/으로 엽니다.
• 각각의 폴더(/components 또는 /internal)에서 컴포넌트를 개발하세요.
• *.stories.js* 파일 안에 스토리를 작성하세요.

사용 가능한 컴포넌트 목록 (List of available components)

@carbon/react storybook에서 사용 가능한 React 컴포넌트를 확인하세요. 사용 정보는 "docs" 탭에서 확인할 수 있습니다.

문제 해결 (Troubleshooting)

Carbon Components React 설정 중 문제가 발생하면 더 많은 가이드라인과 지원을 위해 GitHub 저장소로 이동하세요. 문제가 아직 존재하지 않는다면 이슈를 생성하세요.

더 알아보기 (Learn more)

Carbon React는 @carbon/react 패키지 하나로 컴포넌트, 스타일, 아이콘을 제공해요. npm 또는 Yarn으로 설치하고, 빌드 파이프라인(Next.js, Vite 등)을 설정한 뒤 패키지에서 직접 컴포넌트를 import하면 됩니다. 스타일은 전체를 가져오거나 컴포넌트별로 가져올 수 있고, 개발은 Storybook에서 스토리를 작성하며 진행해요. 설정 문제는 GitHub 이슈로 문의하세요.