본문으로 건너뛰기

Blade와 프론트엔드

zenoBlog의 화면은 Blade로 만들어집니다.
Blade는 Laravel의 템플릿 엔진입니다.

공통 레이아웃​

가장 중요한 레이아웃 파일은 다음입니다.

resources/views/layouts/app.blade.php

이 파일은 모든 주요 페이지의 공통 HTML 틀입니다.

포함하는 내용은 다음과 같습니다.

영역역할
<head>title, meta, OG, favicon, Vite
header사이트 이름, 홈, 관리자, 로그인/로그아웃
@yield('content')각 페이지 본문이 들어오는 자리
footer하단 정보
mobile menu script모바일 메뉴 열고 닫기

Blade 상속​

각 페이지는 공통 레이아웃을 상속합니다.

@extends('layouts.app')

그리고 본문 영역을 채웁니다.

@section('content')
    <div>페이지 내용</div>
@endsection

레이아웃 쪽에서는 이 위치에 본문을 끼워 넣습니다.

@yield('content')

title과 meta​

글 상세 페이지에서는 SEO 정보를 section으로 넘깁니다.

@section('title', $post->title . ' - Zeno Blog')
@section('meta_description', $post->meta_description ?? $post->excerpt ?? 'Zeno Blog')
@section('og_title', $post->meta_title ?? $post->title)
@section('og_description', $post->meta_description ?? $post->excerpt ?? 'Zeno Blog')

레이아웃에서는 이렇게 받습니다.

<title>@yield('title', 'Zeno Blog')</title>

section이 있으면 그 값을 쓰고, 없으면 기본값을 씁니다.

자주 쓰는 Blade 문법​

문법의미
{{ $value }}값을 안전하게 출력
{!! $html !!}HTML을 그대로 출력
@if조건문
@foreach반복문
@forelse데이터가 없을 때까지 처리하는 반복문
@csrfCSRF 토큰 input 생성
@method('PUT')PUT/DELETE 요청 흉내내기
@error('name')유효성 검사 에러 출력
@auth로그인 상태일 때
@else반대 조건

Vite​

CSS와 JS는 Vite로 불러옵니다.

@vite(['resources/css/app.css', 'resources/js/app.js'])

개발 중에는 Vite dev server에서 빠르게 가져오고, 배포할 때는 public/build에 빌드된 파일을 사용합니다.

app.js​

resources/js/app.js

이 파일은 앱의 브라우저 JS 시작점입니다.

import './bootstrap';
import Alpine from 'alpinejs';
import './editor';
import역할
bootstrapaxios 기본 설정
AlpineBreeze 컴포넌트의 간단한 인터랙션
editorTipTap 에디터

app.css​

resources/css/app.css

여기에는 Tailwind 지시문과 에디터/본문 스타일이 들어 있습니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

TipTap이 만드는 실제 편집 영역은 .ProseMirror입니다.

.ProseMirror {
    outline: none;
    min-height: 400px;
    padding: 12px;
}

상세 페이지 본문은 .blog-content 스타일을 씁니다.

.blog-content p {
    margin: 8px 0;
    line-height: 1.8;
}

화면별 Blade 파일​

파일역할
posts/index.blade.php방문자 글 목록과 카테고리 필터
posts/show.blade.php글 상세
admin/posts/index.blade.php관리자 글 목록
admin/posts/create.blade.php관리자 글 작성
admin/posts/edit.blade.php관리자 글 수정
admin/categories/index.blade.php관리자 카테고리 관리

Blade를 공부할 때는 컨트롤러에서 넘겨준 변수가 화면에서 어떻게 쓰이는지 연결해서 보면 좋습니다.