제5.1장: Laravel의 Blade 템플릿

학습 시간: 40분

1. Blade란? 당신의 "스마트" 설계도

지금까지 우리는 두 가지 극단적인 경우인 순수한 index.html과 API의 순수한 JSON 응답만 다루었습니다. 하지만 백엔드에서 데이터를 동적으로 표시하는 완전한 웹 페이지는 어떻게 만들까요?

Blade는 Laravel에 내장된 템플릿 엔진입니다. 일반 HTML을 작성할 수 있게 해주지만, "초능력"을 부여합니다:

변수를 삽입하고 PHP 코드를 우아한 구문으로 실행할 수 있습니다.
재사용 가능한 페이지 "레이아웃"(헤더, 푸터)을 생성할 수 있습니다.
HTML 코드 내에서 직접 반복문과 조건문을 사용할 수 있습니다.
XSS 공격으로부터 자동으로 보호합니다.

💡 우주 비유:

HTML이 우주선의 단순한 설계도라고 상상해 보세요. Blade는 고급 CAD 시스템입니다. 단순히 선을 그리는 것이 아니라 "스마트" 객체를 추가합니다. "여기는 승무원 목록이 들어갈 거야"라고 말하면 Blade가 자동으로 데이터를 요청하여 채워줍니다. "여기는 메인 화면이 들어갈 거야"라고 말하면 Blade가 표준 인터페이스를 삽입합니다.

모든 Blade 파일은 .blade.php 확장자를 가지며 resources/views/ 폴더에 저장됩니다.

2. 구문의 기초: 데이터 표시

Blade가 하는 가장 간단한 일은 데이터를 출력하는 것입니다.

{{ }} 구문

이 이중 중괄호는 Blade에게 "변수를 가져와서 그 내용을 안전하게 출력하라"는 명령입니다.

예시:

routes/web.php의 라우트:
```
<?php
Route::get('/mission-briefing', function () {
    $mission = 'Исследовать систему Kepler-186';
    return view('briefing', ['mission_name' => $mission]);
});
```
- view('briefing', ...)은 Laravel에게 resources/views/briefing.blade.php 파일을 찾으라고 지시합니다.
- ['mission_name' => $mission]은 우리가 뷰에 "전달"하는 데이터 배열입니다.

resources/views/briefing.blade.php의 뷰:

<h1>ЦУП 미션</h1>
<p>현재 임무: {{ $mission_name }}</p>

브라우저의 /mission-briefing 주소에서의 결과:

<h1>ЦУП 미션</h1>
<p>현재 임무: Исследовать систему Kepler-186</p>

🛡️ 중요 사항: Blade는 {{ }} 내부의 모든 데이터를 자동으로 이스케이프 처리합니다. 이는 변수에 HTML 태그나 악성 스크립트가 포함되어 있더라도 실행되지 않고 일반 텍스트로 출력된다는 의미입니다. 이는 XSS 공격으로부터의 내장된 보호 기능입니다.

이스케이프 처리되지 않은 HTML을 출력하려면 (주의해서 사용하세요!) {!! $variable !!} 구문이 사용됩니다.

3. 디렉티브: HTML에 로직 추가하기

Blade 디렉티브는 @ 기호로 시작합니다. 이를 통해 반복문, 조건문 등을 사용할 수 있습니다.

조건문 (@if, @else):

@if($planet->is_habitable)
    <p style="color: green;">이 행성은 생명체가 살 수 있습니다!</p>
@else
    <p style="color: red;">우주복이 필요합니다. 대기가 적대적입니다.</p>
@endif

반복문 (@foreach, @forelse):

@forelse는 반복문과 비어 있는지 확인하는 기능을 결합한 매우 편리한 디렉티브입니다.

<h2>시스템 내 행성 목록:</h2>
<ul>
    @forelse($planets as $planet)
        <li>
            {{ $loop->iteration }}. {{ $planet->name }}
            <!-- $loop - 반복문에서 사용 가능한 특별한 변수 -->
        </li>
    @empty
        <li>이 시스템에서는 행성이 발견되지 않았습니다.</li>
    @endforelse
</ul>

4. 레이아웃과 섹션: 반복하지 마세요 (DRY)

Blade의 가장 강력한 기능은 재사용 가능한 레이아웃을 만드는 것입니다. 모든 페이지에 웹사이트의 헤더와 푸터를 복사할 필요가 없습니다.

1단계: 마스터 레이아웃(layout) 생성

resources/views/layouts/app.blade.php 파일을 생성하세요:

<?php
<!DOCTYPE html>
<html lang="en">
<head>
    <title>ЦУП - @yield('title')</title>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
    <header>
        <h1>은하계 함대 사령부</h1>
    </header>

    <main>
        @yield('content') <!-- 여기에 페이지의 고유한 내용이 들어갑니다 -->
    </main>

    <footer>
        <p>&copy; {{ date('Y') }} Space Command. 모든 권리 보유.</p>
    </footer>
</body>
</html>

- @yield('title')과 @yield('content')는 "슬롯" 또는 "플레이스홀더"입니다.

2단계: 레이아웃을 사용하는 자식 뷰 생성

resources/views/planets/index.blade.php 파일을 생성하세요:

<?php
@extends('layouts.app') {{-- 우리의 마스터 레이아웃을 상속합니다 --}}

@section('title', '행성 목록') {{-- 'title' 섹션을 채웁니다 --}}

@section('content') {{-- 메인 'content' 섹션을 채웁니다 --}}
    <h2>등록된 행성</h2>
    <p>이것은 우리가 알고 있는 모든 행성의 목록입니다.</p>
    {{-- 여기에 행성을 출력하는 @forelse 반복문이 올 수 있습니다 --}}
@endsection

이제 Laravel이 planets.index를 렌더링할 때, 먼저 layouts.app을 가져온 다음 @section 섹션의 내용을 삽입할 것입니다.

복습 퀴즈

🚀 장 요약:

동적 웹 페이지를 만들기 위한 강력한 도구인 Blade의 기초를 학습했습니다. 이제 다음을 할 수 있습니다:

XSS로부터 자동 보호되는 데이터를 출력합니다.
로직을 추가하기 위해 디렉티브(@if, @forelse)를 사용합니다.
@extends와 @yield를 사용하여 재사용 가능한 레이아웃을 생성합니다. 우리는 우리 우주선의 제어판을 위한 "설계도"를 준비했습니다. 다음 장에서는 우리 API를 위한 구체적인 "패널"(뷰)을 생성하고 그 위에 실제 데이터를 표시할 것입니다.