Blade: Laravel의 템플릿 엔진 최대한 활용하기

템플릿 엔진이란 무엇입니까?

템플릿 엔진은 콘텐츠와 레이아웃을 별도로 유지하는 데 도움이 되는 도구와 같습니다. 이렇게 하면 코드가 더 깔끔하고 관리하기 쉬워집니다. HTML을 데이터와 혼합하는 대신 콘텐츠의 모양을 정의하는 템플릿을 생성하면 엔진이 세부 사항을 채워줍니다.

블레이드란 무엇입니까?

Blade는 Laravel의 자체 템플릿 엔진으로, 여러분의 삶을 더욱 편리하게 만들어줍니다. 블레이드 템플릿은 resources/views 디렉토리에 저장되며 각 템플릿은 .blade.php 확장자를 갖습니다. 구문은 간단하고 깔끔하므로 HTML과 PHP를 쉽게 혼합할 수 있습니다. 예:

<h1 id="Hello-name">Hello, {{ $name }}!</h1>

하지만 블레이드는 단지 데이터 표시만을 위한 것이 아닙니다. 템플릿에 바로 루프 및 조건과 같은 논리를 추가할 수도 있습니다. 예는 다음과 같습니다.

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

사용자의 로그인 여부에 따라 다양한 콘텐츠를 표시하는 것이 얼마나 쉬운지 확인해 보세요. 다음에 사용자 목록을 반복해야 할 경우 Blade의 @foreach 지시문을 사용해 보십시오. 간단하고 코드를 깔끔하게 유지합니다.

템플릿 상속

Blade의 가장 뛰어난 기능 중 하나는 레이아웃을 재사용하는 데 도움이 된다는 것입니다. 사이트에 대한 마스터 템플릿을 만든 다음 각 페이지에 고유한 콘텐츠를 입력할 수 있습니다. 간단한 예는 다음과 같습니다.

<!-- layout.blade.php -->


    <title>@yield('title')</title>


    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1 id="Welcome-to-the-Home-Page">Welcome to the Home Page!</h1>
@endsection

@extends를 사용하면 레이아웃에 연결되고 @section을 사용하면 특정 콘텐츠로 자리표시자를 채울 수 있습니다. 이렇게 하면 코드가 DRY(반복하지 않음) 상태로 유지되고 관리가 용이해집니다. Blade는 워크플로우를 단순화하여 훌륭한 웹 애플리케이션 구축이라는 중요한 일에 더 집중할 수 있도록 해줍니다.

블레이드 구성 요소

블레이드 구성요소는 UI를 위한 작은 구성 요소와 같습니다. 이를 레고 조각이라고 상상해 보세요. 인터페이스의 작고 재사용 가능한 부분을 만들고 필요할 때마다 제자리에 고정할 수 있습니다. 이렇게 하면 코드가 더 깔끔하고 유지 관리가 쉬워집니다.

구성요소를 한 번 정의하면 애플리케이션 전체에서 사용할 수 있습니다. 여러 페이지에서 동일하게 보이는 버튼이 필요하십니까? 이를 위한 블레이드 구성 요소를 만들어보세요! 더 나아가 이러한 구성요소에 속성을 전달하여 유연하고 적응 가능하게 만들 수 있습니다.

다음은 버튼 구성 요소의 간단한 예입니다.

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

구성요소 클래스를 사용하여 구성요소를 동적으로 만들 수 있습니다. 이를 통해 유형이나 클래스와 같은 속성을 전달하여 버튼의 동작이나 스타일을 맞춤 설정할 수 있습니다.

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Get The Most From Blade: Laravel"></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false">

@csrf @method('PUT') Submit

좀 더 맞춤화된 정보가 필요하신가요? 재사용 가능한 논리를 위해 자체 블레이드 지시어를 생성할 수 있습니다.

예를 들어 날짜 형식을 자주 지정해야 한다고 가정해 보겠습니다. 다음과 같이 사용자 정의 지시문을 정의할 수 있습니다.

<h1 id="Hello-name">Hello, {{ $name }}!</h1>

기타 기능

Blade에는 개발자로서의 삶을 더욱 원활하게 만들어 주는 몇 가지 정말 편리한 기능이 포함되어 있습니다. 그 중 몇 가지를 살펴보겠습니다.

자산 URL 관리

CSS 또는 JavaScript 파일을 연결해야 합니까? 자산() 도우미 함수를 다루었습니다. 자산에 대한 올바른 URL을 생성하므로 경로에 대해 걱정할 필요가 없습니다.

@if ($user)
    <p>Welcome, {{ $user->name }}!</p>
@else
    <p>Please log in.</p>
@endif

빈 배열 또는 컬렉션 처리

Blade의 @forelse 지시문은 빈 배열이나 컬렉션을 처리할 때 생명의 은인입니다. 항목을 반복할 수 있고 항목이 없는 경우도 우아하게 처리할 수 있습니다.

<!-- layout.blade.php -->


    <title>@yield('title')</title>


    <div>



<p>This layout has placeholders (@yield) for the title and the main content. Now, let’s say you’re creating a home page. You can extend this layout like this:<br>
</p>

<pre class="brush:php;toolbar:false">@extends('layout')

@section('title', 'Home Page')

@section('content')
    <h1 id="Welcome-to-the-Home-Page">Welcome to the Home Page!</h1>
@endsection

조건부 콘텐츠 표시

Blade는 조건에 따라 콘텐츠를 표시하는 여러 가지 지시문을 제공합니다.

@isset: 변수가 설정되었는지 확인
@empty: 변수가 비어 있는지 확인
@unless: if와 비슷하게 작동하지만 그 반대입니다
@isset을 사용한 예는 다음과 같습니다.

<!-- resources/views/components/button.blade.php -->
<button>{{ $slot }}</button>

<!-- Usage -->
<x-button>Click Me</x-button>

XSS로부터 보호

Blade는 XSS(Cross-Site Scripting) 공격으로부터 앱을 보호하기 위해 출력을 자동으로 이스케이프합니다. 그러나 때로는 원시 HTML을 출력하고 싶을 수도 있습니다. 그럴 때는 {!! !!}:

// In a component class
public function render()
{
    return view('components.button', [
        'type' => $this->type,
        'class' => $this->class,
    ]);
}

// In the Blade component
<button type="{{ $type }}">



<h2>
  
  
  Including Subviews
</h2>

<p>Sometimes, you’ll want to break your templates into smaller pieces for better organization and reusability. Blade makes this easy with the @include directive. Think of it as a way to insert a smaller view (or subview) into a larger one.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173172787698773.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Get The Most From Blade: Laravel"></p>

<h2>
  
  
  Blade Directives
</h2>

<p>Blade comes packed with handy directives that make common tasks a breeze. Here are a few:<br>
@csrf: CSRF token to your forms, protecting them from cross-site request forgery attacks<br>
@method: specifies the HTTP method for forms<br>
@auth: checks if a user is authenticated<br>
@guest: checks if a user is a guest (not authenticated)<br>
</p>

<pre class="brush:php;toolbar:false">

@csrf @method('PUT') Submit

고급 사용

블레이드 구문이 포함된 원시 HTML 또는 JavaScript를 포함해야 합니까? Blade가 구문 분석을 시도하는 것을 중지하려면 @verbatim 지시문을 사용하십시오.

// In a service provider
Blade::directive('datetime', function ($expression) {
    return "<?php echo ($expression)->format('Y-m-d H:i:s'); ?>";
});

// Usage in Blade
@datetime($dateVariable)

API로 작업하시나요? Blade를 사용하면 템플릿에서 직접 JSON 데이터를 쉽게 렌더링할 수 있습니다.

<link rel="stylesheet" href="%7B%7B%20asset('css/app.css')%20%7D%7D">

Livewire를 사용하는 경우 Blade가 원활하게 작동합니다. JavaScript를 많이 작성하지 않고도 동적 대화형 UI를 위해 Livewire 구성 요소와 함께 Blade 구성 요소를 사용할 수 있습니다.

@once 지시어는 코드 블록이 한 번만 실행되도록 보장합니다. Blade를 사용하면 전달하는 데이터를 기반으로 적응하는 동적 구성 요소를 만들 수 있습니다. 이는 유연하고 재사용 가능한 UI 부분에 적합합니다.

@forelse ($items as $item)
    <p>{{ $item }}</p>
@empty
    <p>No items found.</p>
@endforelse

@error 지시문을 사용하면 특정 필드에 대한 오류 메시지를 쉽게 표시할 수 있습니다.

@isset($variable)
    <p>{{ $variable }}</p>
@endisset

---

처음 Blade를 사용하기 시작했을 때 옵션이 얼마나 많은지 조금 헤매었지만, 얼마 지나지 않아 온 세상이 나에게 열렸습니다. 이제는 다재다능한 기능 없이 코딩하는 것을 상상할 수 없습니다. 이 기사가 이 놀라운 템플릿 엔진을 찾는 데 도움이 되었기를 바랍니다.