Laravel 프론트엔드

Jmnote (토론 | 기여)님의 2024년 6월 10일 (월) 23:33 판 (→‎PHP와 Blade)
Frontend
프론트엔드

1 소개

Laravel은 라우팅, 유효성 검사, 캐싱, , 파일 스토리지 등 현대적인 웹 애플리케이션을 구축하는 데 필요한 모든 기능을 제공하는 백엔드 프레임워크입니다. 그러나 우리는 개발자들에게 애플리케이션의 프론트엔드를 구축하는 강력한 접근방식을 포함한 아름다운 풀스택 경험을 제공하는 것이 중요하다고 믿습니다.

Laravel로 애플리케이션을 구축할 때 프론트엔드 개발에 접근하는 주요한 두 가지 방법이 있으며, 어떤 접근방식을 선택할지, PHP를 활용하여 프론트엔드를 구축할지, 아니면 Vue와 React와 같은 JavaScript 프레임워크를 사용할지에 따라 결정됩니다. 아래에서는 이 두 가지 옵션에 대해 논의하여 애플리케이션의 프론트엔드 개발을 위한 최적의 접근방식을 결정할 수 있도록 도와드리겠습니다.

2 PHP 사용하기

2.1 PHP와 Blade

과거에 대부분의 PHP 애플리케이션은 데이터베이스에서 요청 중에 검색된 데이터를 렌더링하는 PHP echo 문이 혼합된 간단한 HTML 템플릿을 사용하여 브라우저에 HTML을 렌더링했습니다.

<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>

Laravel에서는 이러한 HTML 렌더링 접근방식을 뷰와 Blade를 사용하여 여전히 구현할 수 있습니다. Blade는 데이터를 표시하고 데이터를 반복하는 등의 작업을 위해 편리하고 간결한 구문을 제공하는 매우 가벼운 템플릿 언어입니다.

<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>

이러한 방식으로 애플리케이션을 구축할 때, 양식 제출 및 기타 페이지 상호작용은 서버로부터 전체적으로 새로운 HTML 문서를 수신하고 브라우저가 전체 페이지를 다시 렌더링하게 됩니다. 오늘날에도 많은 애플리케이션이 단순한 Blade 템플릿을 사용하여 프론트엔드를 구성하는 것이 매우 적합할 수 있습니다.

기대치 증가

그러나 웹 애플리케이션에 대한 사용자 기대치가 성숙해짐에 따라, 많은 개발자들은 보다 세련된 느낌의 상호작용을 제공하는 더 동적인 프론트엔드를 구축해야 할 필요성을 느끼고 있습니다. 이에 따라 일부 개발자들은 Vue 및 React와 같은 JavaScript 프레임워크를 사용하여 애플리케이션의 프론트엔드를 구축하기 시작했습니다.

다른 개발자들은 자신이 익숙한 백엔드 언어를 고수하면서도 현대적인 웹 애플리케이션 UI를 구축할 수 있는 솔루션을 개발해왔습니다. 예를 들어, Rails 생태계에서는 Turbo HotwireStimulus와 같은 라이브러리의 생성으로 이어졌습니다.

Laravel 생태계 내에서, 주로 PHP를 사용하여 현대적이고 동적인 프론트엔드를 만들 필요성으로 인해 Laravel LivewireAlpine.js가 탄생했습니다.

2.2 Livewire

2.3 스타터 키트

3 Vue / React 사용하기

3.1 Inertia

3.2 스타터 키트

4 애셋 빌드하기

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}