Laravel 애플리케이션의 다양한 경로에 대해 여러 프런트 엔드 프레임워크를 사용할 수 있지만 몇 가지 추가 구성 및 설정이 필요합니다. 핵심 사항은 다음과 같습니다.
1. 별도의 프런트엔드 프로젝트: 권장되는 접근 방식은 동일한 Laravel 애플리케이션 내에서 이를 혼합하는 대신 각 프레임워크에 대해 별도의 프런트엔드 프로젝트를 갖는 것입니다. 이는 관심사를 명확하게 분리하는 데 도움이 되며 전체 아키텍처를 단순화합니다.
- Vue CLI 또는 Create React App과 같은 도구를 사용하여 별도의 Vue.js 또는 React.js 프로젝트를 생성하고 Laravel API를 사용하도록 할 수 있습니다.
- Laravel 애플리케이션과 통합되는 별도의 Svelte 프로젝트를 가질 수도 있습니다.
2. 라우팅 구성: 서로 다른 경로에 대해 서로 다른 프런트엔드 프레임워크를 사용하려면 그에 따라 라우팅을 처리하도록 Laravel 경로를 구성할 수 있습니다.
- 특정 프런트엔드 프레임워크(예: Vue.js 또는 Svelte)를 사용해야 하는 경로의 경우 적절한 프런트엔드 애플리케이션을 가리키는 경로 그룹을 설정할 수 있습니다.
- 관리자 또는 기타 특정 경로의 경우 Vue.js와 통합되는 내장 Jetstream 기능을 사용할 수 있습니다.
3. Inertia.js 통합: Inertia.js는 다양한 프런트엔드 프레임워크를 Laravel 백엔드와 통합하는 데 도움이 되는 라이브러리입니다. 백엔드와 프런트엔드 간에 데이터를 공유하는 방법을 제공하며 Vue.js, React 및 Svelte와 같은 프레임워크와 함께 사용할 수 있습니다.
- Inertia.js를 사용하면 다양한 경로에 대해 다양한 프런트엔드 프레임워크를 제공하는 단일 Laravel 애플리케이션을 가질 수 있습니다.
- 검색 결과에는 Jetstream이 Livewire와 Inertia.js를 모두 지원하므로 이러한 통합에 도움이 될 수 있다고 나와 있습니다.
4. 별도의 도메인 또는 하위 도메인: 검색 결과에 언급된 또 다른 접근 방식은 다양한 프런트 엔드 애플리케이션에 대해 별도의 도메인 또는 하위 도메인을 사용하는 것입니다. 이는 애플리케이션의 프런트엔드 구성 요소와 백엔드 구성 요소를 명확하게 분리하는 데 도움이 됩니다.
- 예를 들어, 기본 프런트엔드 애플리케이션에는 `frontend.example.com`을, 다른 프런트엔드 프레임워크를 사용하는 관리 영역에는 `admin.example.com`을 사용할 수 있습니다.
요약하자면, Laravel 애플리케이션에서 여러 프런트 엔드 프레임워크를 사용하는 것이 가능하지만 권장되는 접근 방식은 Laravel API를 사용하는 별도의 프런트 엔드 프로젝트를 갖고 그에 따라 라우팅 및 통합을 구성하는 것입니다. 이는 문제를 깔끔하게 분리하는 데 도움이 되며 애플리케이션의 전체 아키텍처를 단순화합니다.
인용:[1] https://laracasts.com/discuss/channels/laravel/laravel-with-two- Different-front-end-frameworks
[2] https://stackoverflow.com/questions/32103878/laravel-routing-with-a-front-end-framework
[3] https://www.reddit.com/r/laravel/comments/bchlx9/single_laravel_api_multiple_vue_frontends/
[4] https://laravel.com/docs/11.x/frontend
[5] https://laravel.io/forum/03-10-2014-frontend-and-backend-app-configuration