Bootstrap 추가

npm install bootstrap

• app.js

import 'bootstrap/dist/css/bootstrap.css';

1. 라우트 구성 변경

web.php에서는 각 HTTP 요청에 대해 별도의 Blade 뷰를 반환하는 구조( SSR )로 되어 있습니다. SPA는 CSR을 사용하기 때문에, 라우트에서 진입점을 Vue에 전달하고, Vue가 라우팅을 처리하도록 변경해야 한다.

• 기존 방식

Route::get('/', [TodoController::class, 'app']);

<aside> <img src="/icons/checkmark-line_lightgray.svg" alt="/icons/checkmark-line_lightgray.svg" width="40px" />

Larave의 MPA 방식

사용자가( 브라우저가 ) /로 GET요청을 하면, TodoController의 app메서드 실행

</aside>

🔹 SPA 방식

1. 진입점( 단일 엔트리 )구성

   Route::get('/{any}', function () {
       return view('app');
   })->where('any', '.*');
   

   any, .* 는 정규표션식 function(){ return view('app'); } : 컨트롤러 없이 뷰로 반환 →where(…) : 파라메터 값에 조건( 정규식 )을 거는 메서드

   <aside> <img src="/icons/checkmark-line_green.svg" alt="/icons/checkmark-line_green.svg" width="40px" />

   *일반 적으로 많이 쓰임!

   Vue에서 모든 라우팅을 처리해야하기 때문에, Laravel에서 단 하나의 진입점만 제공하면 됩니다.

   </aside>

2. Inetia.js 사용하기

   https://inertiajs.com/

   inertiajs.com

3. api.php 사용하기

   <aside> <img src="/icons/checkmark-line_green.svg" alt="/icons/checkmark-line_green.svg" width="40px" />

   JSON데이터를 다루기에 편리하지만, Axios로 호출해야함

   </aside>

2. 컨트롤러 수정