Laravel 초급 태스크 목록

1 개요

Basic Task List

기본 태스크 목록

https://laravel.com/docs/5.2/quickstart

2 소개

이 빠른 시작 가이드는 Laravel 프레임워크에 대한 기본 소개를 제공하며, 데이터베이스 마이그레이션, Eloquent ORM, 라우팅, 유효성 검증, 뷰, Blade 템플릿에 관한 내용을 포함하고 있습니다. Laravel 프레임워크나 PHP 프레임워크를 처음 접하는 경우에 좋은 시작점이 될 것입니다. 이미 Laravel이나 다른 PHP 프레임워크를 사용해본 경험이 있다면, 중급 수준의 빠른 시작 가이드를 참고하는 것이 좋습니다.

Laravel의 기본 기능들을 샘플로 다루어 보기 위해, 태스크들을 다루는 태스크 목록 애플리케이션을 만들어 보겠습니다. 즉, 전형적인 "할 일" 목록 예제를 다루게 됩니다. 이 프로젝트의 완성된 소스코드는 GitHub에서 확인할 수 있습니다.

3 설치

Homestead 가상머신을 사용하거나 선택한 로컬 PHP 환경을 사용하여 프레임워크를 실행할 수 있습니다. 여기서는 도커 기반 실습환경에서 진행합니다.

3.1 도커 기반 실습환경 (선택사항)

mkdir ~/workspace
cd ~/workspace
docker run --name laravel --rm -it -v ${PWD}:/workspace -w /workspace --network host -h docker --entrypoint="" bitnami/laravel bash

root@wsl:~# mkdir ~/workspace
root@wsl:~# cd ~/workspace
root@wsl:~/workspace$ docker run --name laravel --rm -it -v ${PWD}:/workspace -w /workspace --network host -h docker --entrypoint="" bitnami/laravel bash
Unable to find image 'bitnami/laravel:latest' locally
latest: Pulling from bitnami/laravel
3b20dd80ae86: Pull complete 
Digest: sha256:d16af27a0d4c2f6f3f71c730d7def97de91e0b2ea0233e84dc758340521b1629
Status: Downloaded newer image for bitnami/laravel:latest
root@docker:/workspace#

3.2 Laravel 설치

환경이 준비되면 Composer를 사용하여 Laravel 프레임워크를 설치할 수 있습니다:

composer create-project laravel/laravel quickstart --prefer-dist

root@docker:/workspace# composer create-project laravel/laravel quickstart --prefer-dist
Creating a "laravel/laravel" project at "./quickstart"
Installing laravel/laravel (v11.1.1)
...
   INFO  Preparing database.

  Creating migration table ................................................... 7.50ms DONE

   INFO  Running migrations.

  0001_01_01_000000_create_users_table ...................................... 25.95ms DONE
  0001_01_01_000001_create_cache_table ....................................... 8.63ms DONE
  0001_01_01_000002_create_jobs_table ....................................... 21.42ms DONE

root@docker:/workspace# cd quickstart/
root@docker:/workspace/quickstart# find app/ routes/ resources/ | grep .php
app/Providers/AppServiceProvider.php
app/Http/Controllers/Controller.php
app/Models/User.php
routes/console.php
routes/web.php
resources/views/welcome.blade.php

개발서버 실행

root@docker:/workspace/quickstart# php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

^C

참고: composer create-project laravel/laravel quickstart --prefer-dist

3.3 vscode 실행 (선택사항)

root@wsl:~# code ~/workspace/quickstart/
root@wsl:~#

wsl에서는 docker와 디렉토리를 공유합니다. 따라서 vscode에서 파일 편집은 가능하지만 Artisan CLI 명령어는 실행할 수 없습니다. Artisan CLI 명령어는 docker 컨테이너 내부에서 실행해야 합니다.

4 데이터베이스 준비

4.1 데이터베이스 마이그레이션

먼저, 데이터베이스 테이블을 정의하기 위해 마이그레이션을 사용해 보겠습니다. Laravel의 데이터베이스 마이그레이션은 유창하고 표현적인 PHP 코드를 사용하여 데이터베이스 테이블 구조와 수정 사항을 쉽게 정의할 수 있는 방법을 제공합니다. 팀원들에게 데이터베이스의 로컬 복사본에 수동으로 열을 추가하라고 지시하는 대신, 소스 컨트롤에 푸시한 마이그레이션을 실행하기만 하면 됩니다.

모든 태스크를 저장할 데이터베이스 테이블을 만들어봅시다. Artisan CLI를 사용하면 다양한 클래스를 생성할 수 있으며, Laravel 프로젝트를 구축하는 동안 많은 타이핑을 줄일 수 있습니다. 이번에는 make:migration 명령어를 사용하여 태스크 테이블에 대한 새 데이터베이스 마이그레이션을 생성해보겠습니다:

php artisan make:migration create_tasks_table --create=tasks

$ php artisan make:migration create_tasks_table --create=tasks

   INFO  Migration [database/migrations/2024_06_15_101234_create_tasks_table.php] created successfully.

마이그레이션 파일은 프로젝트의 database/migrations 디렉토리에 생성됩니다. 아마도 make:migration 명령어가 이미 자동 증가 ID와 타임스탬프를 마이그레이션 파일에 추가한 것을 보셨을 것입니다. 이 파일을 편집하여 작업 이름을 위한 name 문자열 컬럼을 추가해봅시다:

database/migrations/2024_06_15_101234_create_tasks_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('tasks');
    }
};

마이그레이션을 실행하려면 migrate Artisan 명령어를 사용합니다. Homestead를 사용 중이라면, 호스트 머신이 데이터베이스에 직접 접근할 수 없으므로, 가상머신 내에서 이 명령어를 실행해야 합니다:

php artisan migrate

$ php artisan migrate

   INFO  Running migrations.

  2024_06_15_101234_create_tasks_table ....................................... 9.24ms DONE

이 명령어는 모든 데이터베이스 테이블을 생성합니다. 사용 중인 데이터베이스 클라이언트를 통해 데이터베이스 테이블을 확인하면, 마이그레이션에서 정의한 컬럼이 포함된 새로운 tasks 테이블을 볼 수 있을 것입니다. 이제 Eloquent ORM 모델을 정의할 준비가 되었습니다!

4.2 Eloquent 모델

Eloquent는 Laravel의 기본 ORM(객체 관계 매퍼)입니다. Eloquent를 사용하면 명확하게 정의된 "모델"을 통해 데이터베이스에서 데이터를 쉽게 검색하고 저장할 수 있습니다. 일반적으로 각 Eloquent 모델은 단일 데이터베이스 테이블과 직접적으로 대응됩니다.

따라서, 방금 생성한 tasks 데이터베이스 테이블에 대응되는 Task 모델을 정의해 봅시다. 이 경우, Artisan 명령어를 사용하여 이 모델을 생성할 수 있습니다. make:model 명령어를 사용할 것입니다:

php artisan make:model Task

$ php artisan make:model Task

   INFO  Model [app/Models/Task.php] created successfully.

모델은 애플리케이션의 app/Models 디렉토리에 배치됩니다. 기본적으로 모델 클래스는 비어 있습니다. Eloquent 모델에 어떤 테이블과 대응되는지 명시적으로 알릴 필요는 없습니다. 왜냐하면 Eloquent는 모델 이름의 복수형을 데이터베이스 테이블로 가정하기 때문입니다. 따라서, Task 모델은 tasks 데이터베이스 테이블과 대응되는 것으로 간주됩니다. 빈 모델은 다음과 같이 생겼습니다:

app/Models/Task.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    use HasFactory;
}

라우트를 애플리케이션에 추가하면서 Eloquent 모델을 사용하는 방법에 대해 더 알아볼 것입니다. 물론, 더 많은 정보를 원한다면 전체 Eloquent 문서를 참조해도 좋습니다.

5 라우팅

5.1 라우트 스터빙

다음으로, 애플리케이션에 몇 가지 라우트를 추가할 준비가 되었습니다. 라우트는 URL을 컨트롤러나 사용자가 특정 페이지에 액세스할 때 실행해야 하는 익명 함수로 연결하는 데 사용됩니다. 기본적으로 모든 Laravel 라우트는 새로운 프로젝트에 포함된 routes 디렉토리에 정의됩니다.

이 애플리케이션에서는 최소한 세 개의 라우트가 필요하다는 것을 알고 있습니다. 모든 태스크 목록을 표시하는 라우트, 새로운 태스크를 추가하는 라우트, 기존 태스크를 삭제하는 라우트가 필요합니다. 따라서, routes/web.php 파일에 이러한 모든 라우트를 스터빙해 보겠습니다:

routes/web.php

<?php

use Illuminate\Support\Facades\Route;

/**
 * Show Task Dashboard
 */
Route::get('/', function () {
    //
});

/**
 * Add New Task
 */
Route::post('/task', function (Request $request) {
    //
});

/**
 * Delete Task
 */
Route::delete('/task/{task}', function (Task $task) {
    //
});

5.2 뷰 표시하기

다음으로, 우리의 / 라우트를 채워봅시다. 이 라우트에서는 새로운 작업을 추가하는 폼과 현재 모든 작업 목록을 포함하는 HTML 템플릿을 렌더링하고자 합니다.

Laravel에서는 모든 HTML 템플릿이 resources/views 디렉토리에 저장되며, view 헬퍼를 사용하여 해당 라우트에서 이 템플릿 중 하나를 반환할 수 있습니다:

routes/web.php

Route::get('/', function () {
    return view('tasks');
});

view 함수에 tasks를 전달하면 resources/views/tasks.blade.php에 있는 템플릿의 View 객체 인스턴스가 생성됩니다. 물론, 이 뷰를 실제로 정의해야 하므로 지금 그것을 해봅시다!

6 레이아웃 및 뷰 구성

이 애플리케이션에는 새 태스크을 추가하는 양식과 현재 모든 태스크를 목록을 포함하는 단일 뷰만 있습니다. 이 뷰를 시각적으로 이해할 수 있도록, 기본 Bootstrap CSS 스타일이 적용된 완성된 애플리케이션의 스크린샷을 여기에 첨부합니다.

6.1 레이아웃 정의하기

거의 모든 웹 애플리케이션은 페이지마다 동일한 레이아웃을 공유합니다. 예를 들어, 이 애플리케이션에는 모든 페이지에 공통으로 존재하는 상단 탐색 바가 있습니다. (만약 페이지가 둘 이상이라면) Laravel은 Blade 레이아웃을 사용하여 이러한 공통 기능을 각 페이지에 쉽게 공유할 수 있도록 합니다.

앞서 논의한 것처럼, 모든 Laravel 뷰는 resources/views에 저장됩니다. 따라서 resources/views/layouts/app.blade.php에 새로운 레이아웃 뷰를 정의해보겠습니다. .blade.php 확장자는 프레임워크에 Blade 템플릿 엔진을 사용하여 뷰를 렌더링하도록 지시합니다. 물론 Laravel에서 일반 PHP 템플릿을 사용할 수도 있습니다. 그러나 Blade는 깔끔하고 간결한 템플릿 작성을 위한 편리한 단축키를 제공합니다.

우리의 app.blade.php 뷰는 다음과 같이 생겼습니다:

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Laravel Quickstart - Basic</title>
        <link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
    </head>

    <body>
        <nav class="navbar navbar-light bg-light border-bottom">
            <div class="container-fluid">
                Task List
            </div>
        </nav>

        @yield('content')
    </body>
</html>

이 레이아웃의 @yield('content') 부분을 주목하세요. 이는 자식 페이지가 레이아웃을 확장하여 자신의 콘텐츠를 주입할 수 있는 특별한 Blade 지시어입니다. 다음으로, 이 레이아웃을 사용할 자식 뷰를 정의하고 주요 콘텐츠를 제공해보겠습니다.

6.2 자식 뷰 정의하기

다음으로, 새 태스크를 생성하는 폼과 기존 작업을 나열하는 테이블을 포함하는 뷰를 정의해야 합니다. 이 뷰는 resources/views/tasks.blade.php에 정의할 것입니다.

Bootstrap CSS 보일러플레이트 일부는 생략하고 중요한 부분만 다루겠습니다. 이 애플리케이션의 전체 소스코드는 GitHub에서 다운로드할 수 있습니다:

resources/views/tasks.blade.php

@extends('layouts.app')

@section('content')

    <!-- Bootstrap Boilerplate... -->
    <div class="card m-3">
        <div class="card-header">
            New Task
        </div>

        <div class="card-body">
            <!-- Display Validation Errors -->
            @include('common.errors')

            <!-- New Task Form -->
            <form action="{{ url('task') }}" method="POST" class="form-horizontal">
                {{ csrf_field() }}

                <!-- Task Name -->
                <div class="mb-3">
                    <label for="task">Task</label>
                    <input type="text" name="name" id="task" class="form-control">
                </div>

                <!-- Add Task Button -->
                <button type="submit" class="btn btn-primary">
                    Add Task
                </button>
            </form>
        </div>
    </div>

    <!-- TODO: Current Tasks -->
@endsection

설명

이 템플릿에 대해 조금 더 설명하겠습니다. 먼저, @extends 지시어는 Blade에게 우리가 resources/views/layouts/app.blade.php에 정의한 레이아웃을 사용하고 있음을 알립니다. @section('content')와 @endsection 사이의 모든 내용은 app.blade.php 레이아웃의 @yield('content') 지시어 위치에 삽입됩니다.

@include('common.errors') 지시어는 resources/views/common/errors.blade.php에 위치한 템플릿을 로드합니다. 이 템플릿은 아직 정의하지 않았지만, 곧 정의할 것입니다!

이제 애플리케이션에 대한 기본 레이아웃과 뷰를 정의했습니다. 우리는 이 뷰를 / 라우트에서 다음과 같이 반환하고 있습니다:

routes/web.php

Route::get('/', function () {
    return view('tasks');
});

다음으로, 폼 입력을 처리하고 데이터베이스에 새 작업을 추가하기 위한 POST /task 라우트에 코드를 추가할 준비가 되었습니다.

7 태스크 추가

7.1 유효성 검증

이제 뷰에 폼을 만들었으니, routes/web.php의 POST /task 라우트에 코드를 추가하여 들어오는 폼 입력을 유효성 검증하고 새 태스크를 생성해야 합니다. 먼저, 입력을 검증해 봅시다.

이 폼의 경우, name 필드를 필수로 하고, 255자 이하로 제한할 것입니다. 검증에 실패하면 사용자를 / URL로 리디렉션하고, 이전 입력과 오류를 세션에 플래시할 것입니다. 입력을 세션에 플래시하면 검증 오류가 있을 때에도 사용자의 입력을 유지할 수 있습니다:

routes/web.php

Route::post('/task', function () {
    $validator = Validator::make(Request::all(), [
        'name' => 'required|max:255',
    ]);
 
    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }
 
    // Create The Task...
});

$errors 변수

잠시 멈추고, 이 예제에서 ->withErrors($validator) 부분에 대해 이야기해 봅시다. ->withErrors($validator) 호출은 주어진 검증 인스턴스에서 오류를 세션에 플래시하여 뷰에서 $errors 변수를 통해 접근할 수 있도록 합니다.

뷰에서 @include('common.errors') 지시어를 사용하여 폼의 검증 오류를 렌더링했던 것을 기억하십시오. common.errors는 모든 페이지에서 동일한 형식으로 검증 오류를 쉽게 보여줄 수 있게 합니다. 이제 이 뷰의 내용을 정의해 봅시다:

resources/views/common/errors.blade.php

@if (count($errors) > 0)
    <!-- Form Error List -->
    <div class="alert alert-danger">
        <strong>Whoops! Something went wrong!</strong>
 
        <br><br>
 
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif

참고: $errors 변수는 모든 Laravel 뷰에서 사용가능합니다. 검증 오류가 없는 경우, 단순히 빈 ViewErrorBag 인스턴스일 뿐입니다.

7.2 태스크 생성

입력 검증이 처리되었으므로, 실제로 새 태스크를 생성하여 라우트를 계속 채워 나갑시다. 새 태스크가 생성되면 사용자를 / URL로 리디렉션합니다. 태스크를 생성하기 위해, 새로운 Eloquent 모델에 속성을 설정한 후 save 메소드를 사용할 수 있습니다:

routes/web.php

Route::post('/task', function () {
    $validator = Validator::make(Request::all(), [
        'name' => 'required|max:255',
    ]);
 
    if ($validator->fails()) {
        return redirect('/')
            ->withInput()
            ->withErrors($validator);
    }
 
    $task = new Task;
    $task->name = Request::input('name');
    $task->save();
 
    return redirect('/');
});

훌륭합니다! 이제 태스크를 성공적으로 생성할 수 있습니다. 다음으로, 모든 기존 태스크 목록을 작성하여 뷰를 계속 추가해 봅시다.

7.3 기존 태스크 표시하기

먼저, / 라우트를 수정하여 모든 기존 태스크를 뷰에 전달해야 합니다. view 함수는 배열 형태의 두 번째 인수를 받아들여 뷰에서 사용할 수 있는 데이터를 전달하며, 배열의 각 키는 뷰 내에서 변수가 됩니다:

routes/web.php

<?php

use App\Models\Task;
use Illuminate\Support\Facades\Route;

/**
 * Show Task Dashboard
 */
Route::get('/', function () {
    $tasks = Task::orderBy('created_at', 'asc')->get();

    return view('tasks', [
        'tasks' => $tasks
    ]);
});

데이터가 전달되면, tasks.blade.php 뷰에서 태스크를 순회하여 테이블에 태스크를 표시할 수 있습니다. @foreach Blade 구조는 간결한 루프를 작성할 수 있게 해주며, 이는 빠른 순수 PHP 코드로 컴파일됩니다:

resources/views/tasks.blade.php

@extends('layouts.app')
 
@section('content')
    <!-- Create Task Form... -->
 
    <!-- Current Tasks -->
    @if (count($tasks) > 0)
        <div class="card m-3">
            <div class="card-header">
                Current Tasks
            </div>
 
            <div class="card-body">
                <table class="table table-striped">
 
                    <!-- Table Headings -->
                    <thead>
                        <th>Task</th>
                        <th>&nbsp;</th>
                    </thead>
 
                    <!-- Table Body -->
                    <tbody>
                        @foreach ($tasks as $task)
                            <tr>
                                <!-- Task Name -->
                                <td class="table-text">
                                    <div>{{ $task->name }}</div>
                                </td>
 
                                <td>
                                    <!-- TODO: Delete Button -->
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif
@endsection

태스크 애플리케이션이 거의 완성되었습니다. 하지만, 완료된 작업을 삭제할 방법이 없습니다. 다음으로 삭제 기능을 추가해 보겠습니다!

8 태스크 삭제

8.1 삭제 버튼 추가

삭제 버튼을 추가해야 할 곳에 "TODO" 메모를 남겼습니다. 이제 tasks.blade.php 뷰의 태스크 목록 각 행에 삭제 버튼을 추가하겠습니다. 각 태스크에 대해 단일 버튼 폼을 생성할 것입니다. 버튼을 클릭하면 애플리케이션에 DELETE /task 요청이 전송됩니다.

resources/views/tasks.blade.php

                            <tr>
                                <!-- Task Name -->
                                <td>
                                    {{ $task->name }}
                                </td>

                                <!-- Delete Button -->
                                <td>
                                    <form action="{{ url('task/'.$task->id) }}" method="POST">
                                        {{ csrf_field() }}
                                        {{ method_field('DELETE') }}
 
                                        <button type="submit" class="btn btn-danger">
                                            Delete
                                        </button>
                                    </form>
                                </td>
                            </tr>

메소드 스푸핑에 대한 참고사항

HTML 폼은 GET과 POST HTTP 메소드만 허용하기 때문에, 폼 메소드가 POST로 나열되어 있지만, DELETE 요청을 처리하려면 Route::delete 라우트를 사용합니다. 폼에서 DELETE 요청을 스푸핑할 방법이 필요합니다.

폼 에서 method_field('DELETE') 함수를 사용하여 DELETE 요청을 스푸핑할 수 있습니다. 이 함수는 Laravel이 인식하고 실제 HTTP 요청 메소드를 덮어쓸 숨겨진 폼 입력을 생성합니다. 생성되는 필드는 다음과 같습니다:

<input type="hidden" name="_method" value="DELETE">

8.2 해당 태스크 삭제

마지막으로 주어진 태스크를 실제로 삭제하는 로직을 라우트에 추가하겠습니다. 암시적 모델 바인딩을 사용하여 {task} 라우트 파라미터에 해당하는 Task 모델을 자동으로 조회할 수 있습니다.

라우트 콜백에서는, delete 메소드를 사용하여 레코드를 삭제합니다. 레코드가 삭제되면 사용자를 / URL로 리디렉션합니다:

routes/web.php

Route::delete('/task/{task}', function (Task $task) {
    $task->delete();
 
    return redirect('/');
});