Shadcn/UI를 React.js에서 사용하는 방법

현대적이고 세련된 사용자 인터페이스를 구축하는 것은 프론트 엔드 개발자들의 주요 목표 중 하나이며, 컴포넌트 라이브러리가 떠오르면서 이 작업이 더욱 쉬워졌습니다. 오늘은Shadcn/UI를 소개하겠습니다. 강력하고 맞춤형 컴포넌트 라이브러리인 React.js를 위해 만들어졌습니다. React.js에 처음 접하는 초보자든, 경력이 많은 개발자든, Shadcn/UI는 더 큰 프레임워크의 일반적인 부풀림 없이 앱의 디자인을 향상시킬 수 있습니다. 또한, APIs 및 Apidog와 같은 도구를 활용하여 개발을 원활하게 하는 방법을 단계별로 안내해 드리겠습니다.

이 글이 끝나면 React.js 프로젝트에서 Shadcn/UI를 사용하는 방법에 대한 명확한 이해를 가지게 될 것입니다. 그리고 자신만의 API를 구축하거나 작업 중이라면, Apidog를 무료로 다운로드하는 것을 잊지 마세요—API를 테스트하고 개발할 때 생명의 은인이 될 것입니다.

button

시작해 봅시다!

Shadcn/UI란 무엇인가요?

설치 과정을 시작하기 전에 Shadcn/UI가 무엇인지, 그리고 React.js 프로젝트에 왜 적합한 선택인지 정의해 보겠습니다.

Shadcn/UI는 특별히 React.js를 위해 만들어진 맞춤형 컴포넌트 라이브러리입니다. Material UI나 Bootstrap과 같은 큰 프레임워크와는 달리, Shadcn/UI는 컴포넌트의 모양과 느낌에 대해 더 많은 제어를 제공합니다. 기본 빌딩 블록을 제공하여 미리 정의된 테마에 얽매이지 않고 독특한 인터페이스를 만들 수 있습니다.

왜 Shadcn/UI를 선택해야 할까요?

경량: 사용하지 않을 수많은 컴포넌트를 묶은 무거운 라이브러리와는 달리, Shadcn/UI는 필요한 것만 제공합니다.
맞춤형: 프로젝트의 독특한 요구 사항에 따라 컴포넌트를 스타일링하고 구조를 설계할 수 있습니다.
React.js에 최적화됨: React.js와의 원활한 통합은 코드 작성에 집중할 수 있게 하고 설정 변경에 신경 쓸 필요가 없습니다.
API 준비 완료: 이 라이브러리는 Apidog와 같은 API 도구와 호환되어 React 앱 내에서 API 엔드포인트를 관리하고 테스트하는 것이 더 쉽습니다.

단계별 가이드: React.js 프로젝트에 Shadcn/UI 사용하기

Shadcn/UI가 무엇인지 알았으니, 이제 React.js 프로젝트에 통합하는 단계별 프로세스를 살펴보겠습니다. 이 가이드는 이미 React에 대한 기본 이해가 있으며, 머신에 Node.js가 설치되어 있다고 가정합니다.

1. 새로운 React.js 프로젝트 만들기

이미 React.js 프로젝트가 설정되어 있다면 이 단계를 건너뛸 수 있습니다. 그렇지 않다면 다음 명령을 사용하여 새 프로젝트를 만들 수 있습니다:

npx create-react-app my-shadcn-ui-app
cd my-shadcn-ui-app
npm start

이렇게 하면 React.js 프로젝트가 생성되며 my-shadcn-ui-app라는 이름으로 개발 서버가 시작됩니다. 이제 기본 React 앱이 실행되고 있어야 합니다.

2. Shadcn/UI 설치하기

프로젝트에 종속성을 수동으로 추가합니다.

Tailwind CSS 추가하기

컴포넌트는 Tailwind CSS를 사용하여 스타일링됩니다. 프로젝트에 Tailwind CSS를 설치해야 합니다.

Tailwind CSS 설치 지침을 따라 시작하세요.

종속성 추가하기

프로젝트에 다음 종속성을 추가하세요:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

아이콘 라이브러리 추가하기

default 스타일을 사용하는 경우, lucide-react를 설치하세요:

npm install lucide-react

new-york 스타일을 사용하는 경우, @radix-ui/react-icons를 설치하세요:

npm install @radix-ui/react-icons

경로 별칭 구성하기

저는 @ 별칭을 사용합니다. tsconfig.json에서 아래와 같이 구성합니다: tsconfig.json

{
  "compilerOptions": {   
	"baseUrl": ".",
        "paths": {
        "@/*": ["./*"]
        }
    }
}

이 @ 별칭은 개인적인 선호입니다. 원한다면 다른 별칭을 사용할 수 있습니다.

다른 별칭(예: ~)을 사용하는 경우, 컴포넌트를 추가할 때 import 문을 업데이트해야 합니다.

이제 프로젝트에 컴포넌트를 추가할 수 있습니다.

3. Shadcn/UI 컴포넌트 가져와 사용하기

이제 재미있는 부분으로 넘어가 보겠습니다—Shadcn/UI 컴포넌트를 React.js 앱에 추가해 보겠습니다. src/App.js 파일에서 Shadcn/UI의 컴포넌트 중 하나, 예를 들어 버튼 컴포넌트를 가져와 사용할 수 있습니다.

아래는 예시입니다:

import React from 'react';
import { Button } from 'shadcn-ui';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>My Shadcn/UI 앱에 오신 것을 환영합니다</h1>
        <Button variant="primary">클릭하세요!</Button>
      </header>
    </div>
  );
}

export default App;

Shadcn/UI의 Button 컴포넌트가 가져와져 App 컴포넌트에서 사용되고 있습니다. 다양한 props를 사용하여 customize할 수 있습니다. 이 경우, variant="primary" prop을 사용하여 버튼에 기본 스타일을 적용했습니다.

4. Shadcn/UI 테마 맞춤화하기

Shadcn/UI의 가장 좋은 점 중 하나는 맞춤화 가능성입니다. 컴포넌트를 조정하여 앱의 독창적인 디자인 언어에 맞출 수 있습니다.

Shadcn/UI는 전역적으로 적용할 수 있는 사용자 정의 테마를 정의할 수 있게 해줍니다. 그 방법은 다음과 같습니다:

a) 사용자 정의 테마 파일 만들기

먼저 src 디렉토리에 theme.js라는 새 파일을 만듭니다. 이 파일에서는 다음과 같이 사용자 정의 테마를 정의합니다:

const theme = {
  colors: {
    primary: '#ff6347', // 토마토 색상
    secondary: '#4caf50', // 녹색
  },
  fonts: {
    body: 'Arial, sans-serif',
    heading: 'Georgia, serif',
  },
};

export default theme;

b) 테마를 컴포넌트에 적용하기

이제 사용자 정의 테마가 정의되었으니 ThemeProvider 컴포넌트를 사용하여 구성 요소에 적용할 수 있습니다. src/App.js 파일을 다음과 같이 업데이트합니다:

import React from 'react';
import { Button, ThemeProvider } from 'shadcn-ui';
import theme from './theme';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <header className="App-header">
          <h1>My Shadcn/UI 앱에 오신 것을 환영합니다</h1>
          <Button variant="primary">클릭하세요!</Button>
        </header>
      </div>
    </ThemeProvider>
  );
}

export default App;

이 업데이트된 코드에서는 Shadcn/UI에서 ThemeProvider를 가져와 앱을 그 안에 감싸고 사용자 정의 theme를 prop으로 전달했습니다.

5. Shadcn/UI + React 프로젝트에서 Apidog으로 API 관리하기

이제 Shadcn/UI로 프론트 엔드가 멋지게 보이니, API에 연결하여 기능적이 되도록 할 시간입니다. 이때 Apidog가 유용합니다. Apidog에 대해 들어본 적이 없다면, 이는 API 테스트, 문서화 및 개발자 간의 협업을 단순화하는 강력한 API 관리 도구입니다.

왜 React.js 앱에 Apidog을 사용할까요?

API 테스트가 쉬워짐: React 프로젝트 내에서 API 엔드포인트를 바로 테스트할 수 있습니다.
원활한 협업: Apidog를 사용하면 팀과 함께 API 문서를 생성하고 공유할 수 있습니다.
개발 속도 향상: API 응답을 쉽게 모의(mock)하여 개발 과정을 가속화할 수 있습니다.

API 호출에 Apidog 사용하기

예를 들어, 날씨 API에서 데이터를 가져오는 React.js 앱을 만들고 있다고 가정해 보겠습니다. API 호출 관리를 위해 Apidog를 사용할 수 있는 방법은 다음과 같습니다:

1단계: Apidog를 열고 새 요청을 만듭니다.

2단계: 테스트 편집기에서 API 엔드포인트의 URL을 입력하고, HTTP 메서드를 선택한 다음, 필요한 헤더, 매개변수, 바디 데이터를 추가합니다. 예를 들어, 이전에 만든 간단한 메시지를 반환하는 경로를 테스트할 수 있습니다:

3단계: 보내기 버튼을 클릭하고 테스트 결과를 확인합니다. 응답 코드, 응답 시간, API의 응답 본문을 확인할 수 있습니다. 예를 들어, 다음과 같은 결과가 나타나야 합니다:

Apidog는 API를 테스트하는 데 탁월한 도구로, 웹 서비스의 품질, 신뢰성 및 성능을 보장하는 데 도움을 줍니다. 코드 작성이나 소프트웨어 설치 없이도 API를 쉽게 테스트할 수 있어 시간과 노력을 절약할 수 있습니다. 브라우저를 사용하여 Apidog의 사용자 친화적인 인터페이스와 기능을 즐길 수 있습니다.

6. React.js에서 Shadcn/UI 및 Apidog 사용을 위한 모범 사례

Shadcn/UI와 Apidog를 최대한 활용하기 위한 몇 가지 모범 사례는 다음과 같습니다:

성능 최적화: 번들 크기를 작게 유지하기 위해 필요한 Shadcn/UI 컴포넌트만 사용하세요.
컴포넌트를 모듈화하기: UI를 작고 재사용 가능한 컴포넌트로 나누세요.
API 테스트하기: Apidog를 사용하여 API 엔드포인트를 철저히 테스트하고 예상대로 작동하는지 확인하세요.
버전 관리 사용하기: 진행 상황을 잃지 않도록 변경 사항을 정기적으로 커밋하고 팀과 효과적으로 협업하세요.

결론: Shadcn/UI 및 Apidog로 React.js 앱 구축하기

축하합니다! 이제 Shadcn/UI를 React.js 프로젝트에서 사용하는 데 필요한 모든 지식을 갖추게 되었습니다. 라이브러리 설정에서부터 컴포넌트 맞춤화까지, 아름다운 UI를 구축하는 것이 얼마나 쉬운지를 보았습니다. Apidog 덕분에 API 호출 관리는 훨씬 수월해집니다.

내부 도구를 구축하든 고객 대면 애플리케이션을 개발하든 관계없이, Shadcn/UI는 독특한 무언가를 만들 수 있는 유연성을 제공하며, Apidog는 API 워크플로를 간소화하는 데 도움을 줍니다.

P.S. API 작업 중이라면 Apidog를 무료로 다운로드하는 것을 잊지 마세요—개발 및 테스트 시간을 수 시간 절약할 수 있을 것입니다!

button