최근에 X에 동영상을 올렸는데, 여기에서 인증과 사용자 프로필 페이지를 갖춘 Laravel React 프로젝트를 1분도 안 되어 설정했습니다! 자세한 가이드와 함께 팔로우를 선호하는 분들을 위해 서면 버전을 공유하면 도움이 될 것이라고 생각했습니다.

이 가이드에서는 Laravel Breeze를 사용하여 React 프런트엔드와 내장 인증을 갖춘 새로운 Laravel 프로젝트를 빠르게 설정하는 방법을 보여드리겠습니다. . 몇 단계만으로 프로필을 편집할 수 있는 기능적인 사용자 패널이 생겼습니다.

왜 라라벨인가?

Laravel은 최신 웹 애플리케이션을 구축하는 데 사용되는 인기 있는 PHP 프레임워크입니다. 실제로 2024년 9월에 Accel은 Laravel에 5,700만 달러 투자를 발표했습니다.

공식 사이트에 따르면 Laravel은 "웹 장인을 위한 PHP 프레임워크"이며 실제로 그 설명에 부응합니다.

Laravel이 무엇인지에 대해 너무 많은 시간을 할애하지는 않겠습니다. 공식 웹사이트와 문서에는 수많은 정보가 있습니다. 대신 바로 프로젝트 설정을 시작하겠습니다.

프로젝트 설정

기술 스택

다음을 사용할 것입니다:

• Laravel(백엔드 API용)

• SQLite Laravel 프로젝트의 기본 데이터베이스입니다(다른 데이터베이스로 쉽게 전환할 수 있음)

• 프론트엔드에 대한 반응(Inertia.js 사용)

• Laravel Breeze 인증 및 사용자 관리 처리

요구사항

이 가이드를 따르려면 다음 사항을 확인하세요.

• PHP 8(8.3 권장)

• 작곡가

• Node.js(v21)

준비가 된? 시작해 보세요!

1단계: 새 Laravel 프로젝트 생성

먼저 Composer를 사용하여 새 Laravel 프로젝트를 만듭니다.

composer create-project laravel/laravel laravel-project

기본 Laravel 설정으로 새 디렉토리가 생성됩니다. 프로젝트 디렉터리로 이동하고 애플리케이션을 제공합니다.

cd laravel-project
php artisan serve

http://localhost:8000에 접속하시면 라라벨 환영 페이지가 나옵니다.

축하합니다. 첫 번째 Laravel 프로젝트를 만들었습니다! ✅

기본적으로 Laravel은 이미 설정된 SQLite 데이터베이스를 사용합니다. Database/database.sqlite.

2단계: Laravel Breeze 설치

다음으로 다음을 포함하여 최소한의 인증 구현을 제공하는 Laravel Breeze를 추가하겠습니다.

• 로그인

• 등록

• 비밀번호 재설정

• 이메일 확인

• 비밀번호 확인

또한 Breeze에는 사용자가 자신의 정보를 업데이트할 수 있는 간단한 프로필 페이지가 포함되어 있습니다.

다음을 실행하여 Breeze 패키지를 추가합니다.

composer require laravel/breeze --dev

이제 프로젝트에 Breeze를 설치합니다.

php artisan breeze:install

설치하는 동안 Breeze에서는 다음과 같은 몇 가지 옵션을 묻는 메시지를 표시합니다.

• 프런트엔드로 React를 선택했지만 몇 가지 대안이 있습니다:

  • 잎
  • 라이브와이어
  • 뷰
  • API 전용

• 선택적으로 어두운 모드, 서버측 렌더링(SSR), Typescript 및 ESLint를 활성화할 수 있습니다. .

• 테스트 프레임워크에 대해 물으면 Pest 또는 PHPUnit 중에서 선택할 수 있습니다. 저는 해충을 사용할 예정입니다.

프로세스가 완료되면 Breeze에 인증 및 사용자 관리에 필요한 모든 것이 추가됩니다.

끝났습니다! ?

3단계: 애플리케이션 실행

이제 Breeze가 설정되었으므로 응용 프로그램이 준비되었으며 다시 실행할 수 있습니다.

php artisan serve

새 사용자를 만들려면 http://localhost:8000/register를 방문하세요.

빈 대시보드에서 시작하여 프로필 페이지로 이동하여 사용자 세부정보를 편집하고 비밀번호를 업데이트할 수 있습니다.

데이터는 이미 SQLite 데이터베이스에 저장되어 있으며 앱을 배포할 준비가 완료되었습니다!

결론

이 단계를 따르면 인증 및 사용자 프로필 관리 시스템을 갖춘 Laravel 및 React를 사용하여 풀 스택 웹 애플리케이션을 성공적으로 부트스트랩했습니다.

Breeze는 훌륭한 출발점을 제공하지만 여기에서 Laravel 생태계의 어깨에 서서 맞춤형 비즈니스 로직 추가, UI/UX 개선 또는 타사 서비스 통합에 집중할 수 있습니다.