"Laravel 프론트엔드"의 두 판 사이의 차이

11번째 줄: 11번째 줄:
==PHP 사용하기==
==PHP 사용하기==
===PHP와 Blade===
===PHP와 Blade===
과거에 대부분의 PHP 애플리케이션은 데이터베이스에서 요청 중에 검색된 데이터를 렌더링하는 PHP echo 문이 혼합된 간단한 HTML 템플릿을 사용하여 브라우저에 HTML을 렌더링했습니다.
<syntaxhighlight lang='php'>
<div>
    <?php foreach ($users as $user): ?>
        Hello, <?php echo $user->name; ?> <br />
    <?php endforeach; ?>
</div>
</syntaxhighlight>
Laravel에서는 이러한 HTML 렌더링 접근방식을 뷰와 Blade를 사용하여 여전히 구현할 수 있습니다. Blade는 데이터를 표시하고 데이터를 반복하는 등의 작업을 위해 편리하고 간결한 구문을 제공하는 매우 가벼운 템플릿 언어입니다.
<syntaxhighlight lang='php'>
<div>
    @foreach ($users as $user)
        Hello, {{ $user->name }} <br />
    @endforeach
</div>
</syntaxhighlight>
이러한 방식으로 애플리케이션을 구축할 때, 양식 제출 및 기타 페이지 상호작용은 서버로부터 전체적으로 새로운 HTML 문서를 수신하고 브라우저가 전체 페이지를 다시 렌더링하게 됩니다. 오늘날에도 많은 애플리케이션이 단순한 Blade 템플릿을 사용하여 프론트엔드를 구성하는 것이 매우 적합할 수 있습니다.
===Livewire===
===Livewire===
===스타터 키트===
===스타터 키트===

2024년 6월 10일 (월) 23:31 판

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 템플릿을 사용하여 프론트엔드를 구성하는 것이 매우 적합할 수 있습니다.

2.2 Livewire

2.3 스타터 키트

3 Vue / React 사용하기

3.1 Inertia

3.2 스타터 키트

4 애셋 빌드하기

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