> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# 프런트엔드

> Laravel 13에서 Blade, Livewire, Inertia, React, Vue, Svelte, SPA, Vite를 어떻게 조합할지 판단하기 위한 입문 가이드입니다.

## 개요

Laravel은 백엔드 프레임워크이지만, 프런트엔드까지 포함한 개발 경험도 중시합니다.\
Laravel 13에서는 PHP 중심으로 진행하는 방법과 React·Vue·Svelte 같은 JavaScript 프레임워크를 활용하는 방법 모두를 제공합니다.

어떤 접근 방식을 선택할지는 다음 세 가지로 생각하면 정리하기 쉽습니다.

* UI를 주로 **PHP**로 작성하고 싶은가
* UI를 주로 **JavaScript / TypeScript**로 작성하고 싶은가
* 하나의 리포지토리로 완결시키고 싶은가, API와 SPA를 분리하고 싶은가

```mermaid theme={null}
flowchart TD
    A["Laravel 애플리케이션"] --> B{"어디에서 UI를 조립할 것인가?"}
    A --> G["Vite로 에셋을 빌드"]
    B --> C["Blade"]
    B --> D["Livewire + Alpine.js"]
    B --> E["Inertia + React / Vue / Svelte"]
    B --> F["API + 독립 SPA"]
    C --> C1["서버에서 HTML을 반환"]
    D --> D1["PHP 주도로 동적 UI를 만든다"]
    E --> E1["하나의 리포지토리에서 SPA와 같은 경험을 만든다"]
    F --> F1["별도 프런트엔드나 모바일 앱과 연동한다"]
    G --> C1
    G --> D1
    G --> E1
    G --> F1
```

## PHP로 진행

### Blade

[Blade](/ko/blade)는 Laravel 표준 템플릿 엔진입니다. 컨트롤러나 라우트에서 뷰를 반환하고, 서버에서 생성한 HTML을 브라우저로 반환합니다.

**장점**

* Laravel의 라우팅, 유효성 검증, 인증과 자연스럽게 통합할 수 있다
* PHP만으로 완결시키기 쉬우며, 학습 비용이 낮다
* SEO나 초기 표시를 중시하는 페이지와 잘 맞는다

**단점**

* 페이지 이동이나 폼 전송마다 화면 전체 재렌더링이 되기 쉽다
* 복잡한 인터랙션은 JavaScript의 보조가 필요해진다

Blade는 관리 화면, 사내 도구, 콘텐츠 중심의 화면, 폼 위주의 애플리케이션에 적합합니다.

### Livewire

[Laravel Livewire](https://livewire.laravel.com)는 Blade를 기반으로 하면서 보다 동적인 UI를 PHP 중심으로 구현할 수 있는 접근 방식입니다. 모달, 검색, 인라인 편집 같은 조작을 React나 Vue에 가까운 경험으로 구축할 수 있습니다.

**장점**

* PHP와 Blade의 연장선에서 동적 UI를 만들 수 있다
* Laravel의 상태 관리나 유효성 검증과 잘 결합된다
* 필요한 곳에만 JavaScript를 추가하고 싶은 경우 Alpine.js와 조합하기 쉽다

**단점**

* 복잡한 클라이언트 사이드 상태 관리는 JavaScript 프레임워크만큼 잘하지 못한다
* 프런트엔드의 책임이 큰 대규모 SPA에는 적합하지 않은 경우가 있다

<Tip>
  Livewire를 자세히 알고 싶다면 [Livewire 입문](/ko/blog/livewire-introduction)을 참조해 주세요.
</Tip>

### PHP 우선 스타터 킷

Laravel 13의 [스타터 킷](/ko/starter-kits)에는 PHP 중심으로 **동적 UI**까지 만들고 싶은 팀을 위한 **Livewire** 기반 선택지가 있습니다. Blade만으로 시작하는 구성도 물론 가능하지만, 스타터 킷으로 준비된 PHP 우선 선택지는 Livewire입니다. 인증·레이아웃·Vite 설정까지 함께 준비되므로 최단 시간에 개발을 시작할 수 있습니다.

## JavaScript 프레임워크 사용

### Inertia + React / Vue / Svelte

[Inertia](https://inertiajs.com)는 Laravel의 라우트·컨트롤러·인증을 활용한 상태로 React·Vue·Svelte로 페이지 컴포넌트를 구축하기 위한 다리 역할을 합니다. API 서버와 SPA를 완전히 분리하지 않고 하나의 Laravel 애플리케이션 내에서 모던한 UI를 만들 수 있습니다.

**장점**

* React / Vue / Svelte의 컴포넌트 모델을 이용할 수 있다
* 라우팅이나 인증은 Laravel 쪽으로 몰 수 있다
* 백엔드와 프런트엔드를 하나의 리포지토리로 관리하기 쉽다

**단점**

* Blade만의 구성보다 학습 대상이 늘어난다
* Node.js 툴체인이나 TypeScript 지식이 필요해지기 쉽다

Laravel 13의 공식 스타터 킷에서는 **React / Vue / Svelte + Inertia**를 처음부터 선택할 수 있습니다.

<Tip>
  자세한 내용은 [Inertia 입문](/ko/blog/inertia-introduction), [React 입문](/ko/blog/react-introduction), [Vue 입문](/ko/blog/vue-introduction), [Svelte 입문](/ko/blog/svelte-introduction)을 참조해 주세요.
</Tip>

### API와 독립 SPA를 나누는 경우

프런트엔드를 Laravel과 완전히 분리하여, 별도의 SPA나 모바일 앱에서 API를 이용하는 구성도 선택할 수 있습니다. 여러 클라이언트에서 같은 백엔드를 공유하고 싶은 경우에 적합합니다.

이 경우 Laravel은 주로 다음 역할을 담당합니다.

* API 라우트 제공
* 인증·인가(예: [Sanctum](/ko/sanctum))
* JSON 응답 정형화(예: [Eloquent API Resources](/ko/eloquent-resources))

**장점**

* 웹, 모바일, 데스크톱 등 여러 클라이언트로 전개하기 쉽다
* 프런트엔드의 기술 선택을 Laravel 본체와 분리할 수 있다

**단점**

* 인증, 데이터 취득, 배포를 각각 설계해야 한다
* 하나의 Laravel 앱만으로 완결되는 구성보다 복잡해지기 쉽다

### JavaScript 우선 스타터 킷

[스타터 킷](/ko/starter-kits)을 사용하면 Inertia·React / Vue / Svelte·Tailwind CSS·Vite가 내장된 상태에서 시작할 수 있습니다. 인증 화면도 처음부터 갖춰지므로 UI 개발에 집중하기 쉬워집니다.

## Vite로 에셋 번들링

어떤 접근 방식을 선택해도 Laravel 13에서는 일반적으로 [Vite](/ko/vite)를 사용해 CSS나 JavaScript를 빌드합니다. Blade나 Livewire에서는 경량 스크립트나 스타일을, Inertia에서는 애플리케이션 전체의 프런트엔드 코드를 Vite로 묶습니다.

Vite를 사용하는 장점은 다음과 같습니다.

* 로컬 개발 시의 빠른 HMR
* 프로덕션용 에셋의 번들링과 버전 관리
* Laravel의 `@vite()` 디렉티브와의 통합

<Info>
  Laravel 13의 스타터 킷에서는 Vite 기반의 프런트엔드 구성이 미리 설정되어 있습니다.
</Info>

## 접근 방식 비교

| 접근 방식                          | 적합한 사례                            | 장점                                         | 단점                                |
| ------------------------------ | --------------------------------- | ------------------------------------------ | --------------------------------- |
| Blade                          | 콘텐츠 중심의 페이지, 폼 위주의 관리 화면          | 단순하고 배우기 쉽다. Laravel 표준 기능과 자연스럽게 통합할 수 있다 | 고급 UI에서는 페이지 전체 재렌더링이 늘어나기 쉽다     |
| Livewire                       | PHP 중심으로 동적 UI를 만들고 싶은 업무 앱       | PHP 그대로 반응 좋은 UI를 만들 수 있다                  | 복잡한 클라이언트 사이드 상태 관리는 다소 약하다       |
| Inertia + React / Vue / Svelte | 모던한 UI와 Laravel의 통합 운용을 양립하고 싶은 앱 | 하나의 리포지토리에서 SPA와 같은 경험을 구축할 수 있다           | JavaScript / TypeScript의 숙달이 필요하다 |
| API + 독립 SPA                   | 여러 클라이언트나 모바일 연동이 전제인 제품          | 프런트엔드를 독립적으로 전개하기 쉽다                       | 인증·배포·운용이 복잡해지기 쉽다                |

## 다음 단계

<CardGroup cols={2}>
  <Card title="Blade 템플릿" icon="file-code-2" href="/ko/blade">
    서버사이드 렌더링의 기본을 확인합니다.
  </Card>

  <Card title="스타터 킷" icon="rocket" href="/ko/starter-kits">
    React, Vue, Svelte, Livewire의 초기 구성을 비교합니다.
  </Card>

  <Card title="Vite에 의한 에셋 번들링" icon="package" href="/ko/vite">
    개발 서버, HMR, 프로덕션 빌드의 흐름을 배웁니다.
  </Card>

  <Card title="Inertia 입문" icon="panels-top-left" href="/ko/blog/inertia-introduction">
    Inertia로 Laravel과 JavaScript 프레임워크를 연결하는 개념을 확인합니다.
  </Card>
</CardGroup>


## Related topics

- [Laravel을 시작하기 전에 필요한 지식](/ko/true-tutorial.md)
- [Vite에 의한 에셋 번들](/ko/vite.md)
- [설치](/ko/installation.md)
- [Laravel Folio](/ko/folio.md)
- [스타터 킷](/ko/starter-kits.md)