평범한 이야기들

[TIL] PHP Laravel - Blade (블레이드) 본문

평범한 개발 이야기/Laravel

[TIL] PHP Laravel - Blade (블레이드)

songsariya 2021. 2. 5. 18:25
728x90

Blade

라라벨에서는 블레이드(Blade) 템플릿 엔진을 사용

블레이드는 중괄호를 사용해 출력하고 @를 접두사로 붙여 사용하는 지시어라는 커스텀 태그 문법을 사용


기본 출력

{{ $greeting }} // 내부적으로 <?php=htmlentities($greeting)?>과 동일
{!! $greeing !!}} // 있는 그대로 출력

{{}} 문법은 프런트엔드 템플릿 엔진의 구문과 비슷함

따라서 @{{ 로 시작하는 문법은 블레이드에서 무시하도록 설계되어있어 해당 문법으로 사용하면 된다.

// $bladeVarible 값이 그대로 출력
{{$bladeVarible}}

// 화면에{{frontVariable }} 이 그대로 출력된
@{{ frontVariable }}

제어구조

// 조건문
@if ($itemCount = count($items))
    <p> {{ $itemCount }} 종류의 과일이 있습니다. </p>
@else
    <p> 아무것도 없습니다.! </p>
@endif

@unless(조건식) = @if(! 조건식)

반복문

// for 문법
@for ($i = 0; $i < count($collection); $i++)
    <li>{{$i}}</li>
@endfor

// while 문법
@while ($item = array_pop($collection))
    {{$item->name()}}<br>
@endwhile

// foreach 문법
@foreach ($collection as $item)
    <li>{{$item}}</li>
@endforeach

// foreless 문법
@forelse ($collection as $item)
        {{-- $collectionrk 비어 있지 않은 경우 아래코드 실행 --}}
    <li>{{$item}}</li>
@empty
        {{-- $collectionrk 비어 있는 경우 아래코드 실행 --}}
    <li> 아무것도 없습니다. </li>
@endforelse

@foreach @forelse 안에서 사용할 수 있는 $loop 변수 존재 ( 기존 PHP에서는 제공해주지 않는다.)
  • index : 반복문 안에서 현재 아이템의 인덱스 (0을 기본)
  • iteration : 반복문 안에서 현재 아이템의 인덱스 (1을 기본)
  • remaining : 반복문 안에 남아 있는 아이템 갯수
  • count : 반복문 안에 있는 전체 아이템 갯수
  • first : 반복문 안에서 현재 처리하는 아이템이 첫 번째 아이템인지 여부(true/false)
  • last : 반복문 안에서 현재 처리하는 아이템이 마지막 아이템인지 여부(true/false)
  • even : 반복문 안에서 현재 처리하는 아이템이 짝수 번째 아이템인지 여부(true/false)
  • odd : 반복문 안에서 현재 처리하는 아이템이 홀수 번째 아이템인지 여부(true/false)
  • depth : 반복문이 중첩되어 있을 때, 얼마나 깊이 있는지 계층을 나타내는 값 (첫 번째 반복문 = 1, 그 안에 중첩된 반복문 = 2)
  • parent : 반복문이 중첩되어 있을 때 상위 @foreach 반복문에 대한 참초, (중첩이 되어있지 않으면 null)

주석

{{-- 블레이드 주석 --}}

해당 주석을 쓰면 랜더링 될때 처리가 되지 않아 html 에 포함되지 않음 (노출안됨)


템플릿 상속

// layouts/master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>라라벨 입문</title>
</head>
<body>
    @yield('content')    
</body>
</html>

// welcome.blade.php
// master.blade.php 를 상속받는다.
@extends('layouts.master')

// 마스터에 있는 content 영역의 내용.
@section('content')
    <p> 저는 자식 뷰의 'content' 섹션입니다.
@endsection

섹션은 여러개 만들수 있다.

// style, script 등을 추가로 넣어서 해주어도 된다.

// layouts.master.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>라라벨 입문</title>
    @yield('style')
</head>
<body>
    @yield('content')
    @section('script')
            <script src="app.js"></script>
        @endsection
</body>
</html>

// index.blade.php
@extends('layouts.master')
@section('style')
<style>
    body { background:skyblue; color: white;}
 </style>
@endsection

@section('content')
    <p> 저는 자식 뷰의 'content' 섹션입니다.
@endsection

@section('script')
        @parent
    <script src="lib.js"></script>
@endsection

// script 와 같이 조각뷰의 script와 겹치게 되면 순서가 꼬이게 된다.
// 그럴때 @parent 키워드 이용해 순서를 부모의 script 섹션 영역부터 실행되게 해준다.
// 쓰지 않으면 부모의 script 는 무시되게 된다.

@parent 지시어는 상속받을 script 섹션을 오버라이딩이 아닌 기존 값에 추가하는 것

@parent를 지정하지 않으면 오버라이딩

@include 지시어는 다른 템플릿을 포함하는 방법

// partials/footer.blade.php
<footer>
    <p> 저는 Footer 영역입니다. 다른 뷰에서 저를 호출해 씁니다.
</footer>

// 삽입.
@section('content')
    <p> 저는 자식 뷰의 'content' 섹션입니다.
    @include('partials.footer')
@endsection

@includeIf, @includeWhen @includeFirst 등 다양한 지시어가 존재

@stack 지시어를 통해 내용을 밀어넣는 방법이 존재

// resources/views/layouts/app.blade.php
<html>
<head><!--헤드부분--></head>
<body>
    <!-- 페이지 부분-->
    <script src="/css/app.css"></script>
    <!-- 필요한 스크립트 추가되어 출력 -->
    @stack('script')
</body>
</html>

// resources/views/test.blade.php 
@extends('layouts.app')

@push('script')
    <!-- 스택 영역에 노출할 test.css 파일 추가 (***하단에 추가***)-->
    <script scr="/css/test.css"></script>
@endpush

// resources/views/test2.blade.php 
@extends('layouts.app')

@prepend('script')
    <!-- 스택 영역에 노출할 test2.css 파일 추가 (***상단에 추가***)-->
    <script scr="/css/test2.css"></script>
@endprepend

컴포넌트와 뷰 컴포저와 서비스 주입, 커스텀 블레이드 지시어는 추후에 다시 공부

728x90
저작자표시
'평범한 개발 이야기/Laravel' Related Articles more
Comments