react - flowbite 설치 및 사용하기

flowbite 는 website ui component 을 쉽게 구축할 수 있도록 도와주는 tailwindcss 기반 프레임워크입니다.

jsx, 마크업을 빠르게 구현할 때 큰 도움이 됩니다.

 

flowbite는 다양한 언어 및 프레임워크를 지원합니다. (laravel, vue, svelte, django, react 등)

 

react 환경에서도 사용이 가능한대 아래 설명은 react 환경에서 flowbite 를 사용하기 위한 설치 및 사용방법입니다.

 

react 프로젝트 생성 및 설치, 그리고 실행

- 명령프롬포트(cmd)창에서 내가 원하는 위치에 폴더 생성

 

- 생성 한 폴더로 cd {생성한 폴더} 로 이동하여 code 실행하여 vscode 실행 (설치 편의를 위함)

- vscode 내에서 터미널을 실행하여 명령이 실행

  - npm create vite@latest (실행 시 몇가지 선택사항이 나옵니다.)

해당 폴더에 설치를 해야하기 떄문에 . 을 입력해줍니다.

'React' 를 선택해줍니다.

JavaScript를 선택해줍니다.

설치를 완료하면 npm install 명령어를 실행하라고 나오고 Root 디렉토리 내에 폴더 및 파일들이 생성됩니다.

npm install 을 실행하면 node_modules 폴더가 생성됩니다. 

tailwindcss를 설치합니다.

설치 후 vite.config.js, index.css, App.css 수정 진행

vite.config.js 파일 (빨간색 표시 부분 추가)

index.css 파일에 작성되어있던 코드를 모두 삭제 한 후 위와 같이 수정 진행(App.css도 동일하게 수정)

npm install flowbite를 통해 설치 진행

이 후 index.css 파일에 @plugin "flowbite/plugin" , @source "../node_modules/flowbite" 추가

index.html 파일에는 flowbite를 빌드 후에도 사용할 수 있도록 flowbite.min.js 파일 추가

 

이후 간단하게 flowbite 사용이 되는지 확인하기

1. src 폴더 하위에 components 폴더 생성 후 Navbar.jsx 파일 생성하여 flowbite 사이트에 있는 Navbar 샘플코드를 복사/붙여넣기 진행

2. 그대로 붙여넣으면 jsx 문법에 맡지 않아 적색으로 표시가 되어 class 속성명을 className로 변경 진행

3. App.jsx 에서 Navbar component 출력

4. 터미널에서 npm run dev를 실행하면 flowbite Navbar가 사용되는것을 확인할 수 있습니다.