Laravel 초급 태스크 목록

1 개요

Basic Task List

기본 태스크 목록

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

2 소개

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

Laravel의 기본 기능들을 샘플링하기 위해, 우리가 수행하려는 모든 태스크을 추적하는 간단한 태스크 목록을 작성해 보겠습니다. 다시 말해, 전형적인 "할 일" 목록 예제를 만들 것입니다. 이 프로젝트의 완성된 소스코드는 GitHub에서 확인할 수 있습니다.

3 설치

Laravel 설치

우선, Laravel 프레임워크을 새로 설치해야 합니다. Homestead 가상머신을 사용하거나 선택한 로컬 PHP 환경을 사용하여 프레임워크를 실행할 수 있습니다. 로컬 환경이 준비되면 Composer를 사용하여 Laravel 프레임워크를 설치할 수 있습니다:

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

Quickstart 설치 (선택사항)

나머지 Quickstart를 읽기만 해도 되지만, 소스코드를 다운로드하여 로컬 머신에서 실행하려면 Git 저장소를 복제하고 의존성을 설치할 수 있습니다:

git clone https://github.com/laravel/quickstart-basic quickstart
cd quickstart
composer install
php artisan migrate

로컬 Laravel 개발 환경 구축에 대한 보다 완전한 문서를 보려면, Homestead 및 설치 문서를 참조하세요.

4 데이터베이스 준비

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

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

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

php artisan make:migration create_tasks_table --create=tasks

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

<?php

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

class CreateTasksTable extends Migration
{
    /**
     * 마이그레이션을 실행합니다.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tasks', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * 마이그레이션을 되돌립니다.
     *
     * @return void
     */
    public function down()
    {
        Schema::drop('tasks');
    }
}

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

php artisan migrate

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

4.2 Eloquent 모델

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

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

php artisan make:model Task

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

<?php
 
namespace App;
 
use Illuminate\Database\Eloquent\Model;
 
class Task extends Model
{
    //
}

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

5 라우팅

5.1 라우트 스터빙

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

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

<?php

use App\Task;
use Illuminate\Http\Request;

/**
 * 작업 대시보드 표시
 */
Route::get('/', function () {
    //
});

/**
 * 새 작업 추가
 */
Route::post('/task', function (Request $request) {
    //
});

/**
 * 작업 삭제
 */
Route::delete('/task/{task}', function (Task $task) {
    //
});

Note

만약 여러분의 Laravel 버전에 이미 기본 라우트 파일을 web 미들웨어 그룹 내에 포함하는 RouteServiceProvider가 있다면, routes.php 파일에 그룹을 수동으로 추가할 필요가 없습니다.

5.2 뷰 표시하기

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

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

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>

        <!-- CSS And JavaScript -->
    </head>

    <body>
        <div class="container">
            <nav class="navbar navbar-default">
                <!-- Navbar Contents -->
            </nav>
        </div>

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

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

6.2 자식 뷰 정의하기

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

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

<!-- resources/views/tasks.blade.php -->

@extends('layouts.app')

@section('content')

    <!-- Bootstrap Boilerplate... -->

    <div class="panel-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="form-group">
                <label for="task" class="col-sm-3 control-label">Task</label>

                <div class="col-sm-6">
                    <input type="text" name="name" id="task-name" class="form-control">
                </div>
            </div>

            <!-- Add Task Button -->
            <div class="form-group">
                <div class="col-sm-offset-3 col-sm-6">
                    <button type="submit" class="btn btn-default">
                        <i class="fa fa-plus"></i> Add Task
                    </button>
                </div>
            </div>
        </form>
    </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에 위치한 템플릿을 로드합니다. 이 템플릿은 아직 정의하지 않았지만 곧 정의할 것입니다!

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

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

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

7 태스크 추가

7.1 유효성 검증

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

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

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

$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 메소드를 사용할 수 있습니다:

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

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