Laravel & Inertia React & TailwindCSS, Flowbite 설치 및 사용

1. laravel 설치

- 웹폴더 경로로 이동하여 아래 명령어 실행

# 라라벨 프로젝트 생성
composer create-project laravel/laravel inertia_buchet_laravel

 

2. laravel/breeze 설치 진행

# 명령어 실행 후 선택사항 선택하고 진행
composer require laravel/breeze --dev

- 저는 아래와 같이 선택하였습니다.

1. React Inertia

2. 추가 선택 사항(필수 아님)

  - DarkMode 사용여부

  - Inertia SSR(서버 사이드 렌더링) - SEO를 위함

  - ESLint with Prettier - 코드 스타일을 강제하는 ESLint + Prettier 설정

3. PHP Test Framework : PEST

  - PHPUnit 기반이지만 더 간결하고 직관적인 문법을 제공한다고 함

 

3. TailwindCss & Flowbite 설치 및 설정

- Tailwindcss 는 이미 설치되어있기떄문에 Flowbite만 설치하면 됩니다.

# flowbite랑 flowbite-react 설치
npm install flowbite flowbite-react

- flowbite , flowbite-react 모두 설치하는 이유는 아래와 같습니다.

  - flowbite : 스타일 및 구성요소를 제공하는 라이브러리입니다.

  - flowbite-react : React 컴포넌트로 제공되는 Flowbite의 UI 컴포넌트 라이브러리입니다.

 

4. 최종 결과

Header Navbar 및 Footer 영역은 Flowbite 에 정의되어 있는 스타일 및 구성요소를 확인한것이고

Button은 Flowbite-react의 Button Component를 활용하여 처리하였습니다.