Laravel 부트캠프 - 소개

1 개요

01. Introduction

01. 소개

https://bootcamp.laravel.com/

Laravel 부트캠프에 오신 것을 환영합니다! 이 가이드에서는 처음부터 최신 Laravel 애플리케이션을 만드는 과정을 안내합니다. 프레임워크를 탐색하기 위해, 우리는 Chirper라는 마이크로블로깅 플랫폼을 구축할 것입니다.

모험을 선택하세요: Blade, Livewire, JavaScript

Laravel은 매우 유연하여 다양한 기술로 프론트엔드를 구축할 수 있습니다. 이 튜토리얼에서는 몇 가지 선택지를 준비했습니다.

2 Blade

Blade는 Laravel에 포함된 간단하지만 강력한 템플릿 엔진입니다. 서버 측에서 HTML을 렌더링하여 데이터베이스에서 동적 콘텐츠를 쉽게 포함할 수 있습니다. 또한 Tailwind CSS를 사용하여 멋지게 디자인할 것입니다!

어디서 시작해야 할지 모른다면, Blade가 가장 직관적이라고 생각합니다. 나중에 Livewire 또는 JavaScript를 사용하여 Chirper를 다시 구축할 수도 있습니다.

welcome.blade.php

Greetings {{ $friend }}, let's build Chirper with Blade!

BLADE로 CHIRPER 구축

3 Livewire

Livewire는 PHP만으로 동적이고 반응형인 프론트엔드 UI를 구축하는 강력한 방법입니다. 솔직히 말해, 이것이 JavaScript가 아니라는 사실을 믿기 어려울 것입니다. Laravel 개발자라면 매우 익숙하게 느껴질 것입니다.

counter.blade.php

<?php
 
use Livewire\Volt\Component;
 
new class extends Component
{
    public int $count = 0;
 
    public function increment(): void
    {
        $this->count++;
    }
}; ?>
 
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

LIVEWIRE로 CHIRPER 구축

4 JavaScript & Inertia

JavaScript를 사용하고 싶다면, Vue와 React 두 가지 코드 샘플을 제공할 것입니다. 또한, 이 모든 것을 연결하기 위해 Inertia를 사용하고 Tailwind CSS로 멋지게 디자인할 것입니다!

어떤 것을 선택해야 할지 확실하지 않다면, 참고로 우리는 Vue를 좋아합니다. Vue는 초보자에게 친숙하고 매우 강력합니다. 부트캠프를 마친 후에는 다른 스택을 시도해볼 수도 있습니다.

가장 마음에 드는 스택을 선택하세요:

4.1 Vue

Welcome.vue

<Welcome>
    Hey {{ friend }}, let's build Chirper with Vue!
</Welcome>

4.2 React

Welcome.jsx

<Welcome>
    Nice to see you {friend}, let's build Chirper with React!
</Welcome>

프로젝트에 코드를 혼합하지 않도록 주의하면서, 다른 프레임워크의 코드를 언제든지 확인할 수 있습니다.

CHIRPER WITH JAVASCRIPT와 INERTIA로 CHIPPER 구축