목차


 반복문

v-for="" :key=""

(item, index) in items 형태

 

객체 모두 출력

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4 v-for="item in products" :key="item">{{ item }}</h4> 
  </div>
</template>
<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      products : [
        {name : '티셔츠', price : '3800'}
        ,{name : '바지', price : '5000'}
        ,{name : '점퍼', price : '10000'}
      ]
    }
  },
}
</script>

 

인덱스 번호 출력

 

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4 v-for="(item, i) in products" :key="i">{{ i }}</h4>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      products : [
        {name : '티셔츠', price : '3800'}
        ,{name : '바지', price : '5000'}
        ,{name : '점퍼', price : '10000'}
      ]
    }
  },
}
</script>

 

name과 price 각각 출력시키기

 

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div v-for="item in products" :key="item">
    <h4>{{ item.name }}</h4>
    <p>{{ item.price }}원</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      products : [
        {name : '티셔츠', price : '3800'}
        ,{name : '바지', price : '5000'}
        ,{name : '점퍼', price : '10000'}
      ]
    }
  },
}
</script>

 

Github

Link

 

'Vue.js > Vue.js_ex' 카테고리의 다른 글

데이터 바인딩  (0) 2023.07.06

목차


 데이터 바인딩

{{ }}

<!-- src/App.vue -->
<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>{{ product1 }}</h4>
    <p>{{ price1 }}원</p>
  </div>
  <div>
    <h4>{{ product2 }}</h4>
    <p>{{ price2 }}원</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      product1 : '양말'
      ,price1 : '3800'
      ,product2 : '바지'
      ,price2 : '5000'
    }
  },
}
</script>

 

 스타일 적용

HTML태그에 :style

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <div>
    <h4>{{ product1 }}</h4>
    <p>{{ price1 }}원</p>
  </div>
  <div>
    <h4 :style="styleR">{{ product2 }}</h4>
    <p>{{ price2 }}원</p>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() { // 데이터 바인딩
    return {
      styleR : 'color : red'
    }
  },
}
</script>

 

Github

Link

 

'Vue.js > Vue.js_ex' 카테고리의 다른 글

반복문  (0) 2023.07.06

목차


 seeders

seeders : 데이터베이스에 초기 데이터를 채우기 위한 클래스

주로 개발 또는 테스트 환경에서 데이터베이스 테스트 데이터를 채우는 데 사용함

database/seeders 폴더에 시더 파일을 정의

시더 파일은 DatabaseSeeder 클래스의 run 메서드를 사용하여 데이터베이스에 데이터를 삽입함

ex) categories 테이블에 초기 데이터를 추가하기 위해 시더를 작성할 수 있음

 

사용법 :

1. 시더 클래스 생성(database\seeders에 생성) : php artisan make:seeder CategorySeeder

2. database\seeders\DatabaseSeeder->run() 안에 1에서 생성한 시더 클래스를 콜에 추가

// database\seeders\DatabaseSeeder.php

public function run()
{
    // 초기 데이터 삽입용 시더 호출
    $this->call(CategorySeeder::class);
}

 

3. 1에서 생성한 시더 클래스에 레코드 추가 코드를 작성

// database/seeders/CategorySeeder.php

public function run()
{
    DB::table('categories')->insert([
        ['no' => '0', 'name' => '카테고리0']
        ,['no' => '1', 'name' => '카테고리1']
        ,['no' => '2', 'name' => '카테고리2']
        ,['no' => '3', 'name' => '카테고리3']
        ,['no' => '4', 'name' => '카테고리4']
        ,['no' => '5', 'name' => '카테고리5']
        ,['no' => '6', 'name' => '카테고리6']
        ,['no' => '7', 'name' => '카테고리7']
        ,['no' => '8', 'name' => '카테고리8']
        ,['no' => '9', 'name' => '카테고리9']
    ]);
}

 

 

4-1. 개별 시더 실행 : php artisan db:seed --class=CategorySeeder (seeder의 class명)
4-2. database\seeders\DatabaseSeeder->run()에 설정된 모든 시더 및 팩토리 실행 : php artisan db:seed


 

 factories

Factories : 테스트 데이터를 생성하기 위한 블루프린트

(블루 프린트 : 데이터베이스 스키마를 정의하기 위한 객체지향적인 방식을 제공하는 도구 또는 패턴

데이터베이스의 테이블 구조와 관련된 작업을 프로그래밍적으로 수행할 수 있도록 도와줌

주로 마이그레이션 작업에서 사용되며, Laravel과 같은 프레임워크에서 일반적으로 지원)

 

이를 사용하여 모델 인스턴스를 생성하고, 각 필드에 적절한 가짜 데이터를 할당할 수 있음

database/factories 폴더에 팩토리 파일을 정의함

팩토리 파일은 ModelFactory 클래스의 메서드를 사용하여 팩토리를 정의함

ex) Boards 모델의 팩토리를 생성하는 경우 BoardsFactory 클래스를 생성하고 define 메서드를 사용하여 팩토리를 정의

 

사용법 :

1. 팩토리 클래스 생성(database\factories에 생성) : php artisan make:factory BoardFactory --model=Board

2. database\seeders\DatabaseSeeder->run() 안에 1에서 생성한 팩토리 클래스를 콜에 추가

// database\seeders\DatabaseSeeder.php

public function run()
{
    // 더미 데이터 삽입용 팩토리 호출
    // factory()안의 숫자는 생성할 데이터 갯수
    \App\Models\Board::factory(20000)->create();
}

 

3. 1에서 생성한 팩토리 클래스에 레코드 추가 코드를 작성

// database/factories/BoardFactory.php

public function definition()
{
    $date = $this->faker->dateTimeBetween('-1 years');
    return [
        'category' => $this->faker->randomNumber(1) // randomNumber(자리수)
        ,'btitle' => $this->faker->realText(100) // realText(글자수)
        ,'bcontent' => $this->faker->realText(2000)
        ,'created_at' => $date
        ,'updated_at' => $date
    ];
}

 

4. database\seeders\DatabaseSeeder->run()에 설정된 모든 시더 및 팩토리 실행 : php artisan db:seed


Github

Link

 

'Laravel > Laravel_ex' 카테고리의 다른 글

migrations(database/migrations)  (0) 2023.05.27
블레이드 템플릿(resources/views)  (0) 2023.05.24
라우트 정의(routes/web.php)  (0) 2023.05.23
Laravel  (0) 2023.05.23

목차


 migrations

 마이그레이션은 데이터베이스 스키마를 관리하기 위한 도구

마이그레이션을 사용하면 데이터베이스 테이블을 생성, 수정 또는 삭제하는 등의 스키마 변경 작업을 프로그래밍적으로 수행할 수 있음

Laravel의 마이그레이션은 데이터베이스의 테이블 구조를 버전 관리하고, 팀원들과의 협업을 용이하게 하며, 프로젝트 배포 및 롤백 등을 관리하는 데 도움을 줌


 

 migrations 생성

database/migrations 폴더에 생성됨

php artisan make:migration create_boards_table

 

 migrations 정의

 

// database/migrations/날짜_create_boards_table.php

public function up()
{
    Schema::create('boards', function (Blueprint $table) {
        $table->id();
        $table->string('title', 30);
        $table->string('content', 2000);
        $table->integer('hits')->default(0);
        $table->timestamps();
        $table->softDeletes();
    });
}

 

 migrations 실행

명령어를 실행하면 Laravel은 마이그레이션 파일을 순차적으로 실행하고,

데이터베이스에 테이블을 생성하거나 변경된 내용을 반영함

php artisan migrate

 

Github

Link

 

'Laravel > Laravel_ex' 카테고리의 다른 글

seeders(database/seeders), factories(database/factories)  (0) 2023.05.27
블레이드 템플릿(resources/views)  (0) 2023.05.24
라우트 정의(routes/web.php)  (0) 2023.05.23
Laravel  (0) 2023.05.23

목차


 블레이드 템플릿

Laravel에서 제공하는 템플릿 엔진

템플릿 엔진은 동적인 웹 페이지를 생성하기위해 사용됨


 

 include, yield, section

다른 템플릿을 포함하는 방법

 

@include

{{-- resources/views/layout/layout.blade.php --}}

<body>
    @include('layout.inc.header')
</body>
{{-- resources/views/layout/inc/header.blade.php --}}

<h1>Header</h1>

 

2번째 인수로 값을 세팅하고, 해당 파일에서 변수로써 사용 가능

{{-- resources/views/layout/layout.blade.php --}}

<body>
    @include('layout.inc.footer', ['key1' => 'key1로 셋팅'])
</body>
{{-- resources/views/layout/inc/footer.blade.php --}}

<h1>Footer : {{$key1}}</h1>

 

@yield

{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}

{{--  자식 템플릿에 해당하는 section에게 자리를 양도,
	만약에 자식 템플릿에 해당 section이 없으면 두번째 인수를 사용  --}}
<header>
	<title>@yield('title', '부모타이틀')</title>
</header>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

{{-- 상속 : @extends --}}
{{-- 실제 호출한건 blade.blade.php 파일이지만,
	상속받은 layout.blade.php파일의 @include('layout.inc.header')가 출력됨 --}}
@extends('layout.layout')

{{-- 부모 템플릿에 해당하는 yield 부분에 자리를 차지 --}}
{{-- 부모와 동일한 key값에 자식의 값이 있다면 자식값을 사용, 없다면 부모값을 사용 --}}
@section('title', '자식 타이틀')

 

처리해야하는 코드가 많을 경우에는, @section ~ @endsection에 소스코드를 기재해서 사용함

{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}
<body>
    @yield('contents')
</body>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

@extends('layout.layout')

@section('contents')
    <hr>
    <h2>콘텐츠 섹션 입니다.</h2>
    <p>아아아아아</p>
    <p>콘텐츠 끝</p>
@endsection

 

자식 템플릿에 해당 section이 정의되어 있다면 자식템플릿의 section이 실행,

자식 템플릿에 해당 section이 정의되어 있지 않으면 부모 템플릿의 section이 실행

{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}
<body>
    @section('test')
        <h2>부모의 섹션 입니다.</h2>
        <p>부모부모</p>
    @show
</body>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

@extends('layout.layout')

@section('test')
    <hr>
    <h2>자식의 섹션입니다.</h2>
    <p>자식자식</p>
@endsection

 


 

 조건문

if문

// app/Http/Controllers/BladeController

class BladeController extends Controller
{
    public function index()
    {
        $arr = [
            'name' => '홍길동'
            ,'gender' => '여자'
            ,'birth' => '20081023'
            ,'addr' => '구미'
            ,'tel' => '01012345678'
        ];
        
        return view('blade')->with('data', $arr);
    }
}
{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}
<body>
    @yield('if')
</body>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

@extends('layout.layout')

@section('if')
    <h5>if</h5>
    @if($data['gender'] === '남자')
        <span>남자남자</span>
    @elseif($data['addr'] === '대구')
        <span>대구대구</span>
    @else
        <span>모든 조건 탈락</span>
    @endif
@endsection

 


 

 반복문

for문

{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}
<body>
    @yield('for')
</body>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

@extends('layout.layout')

@section('for')
    <hr>
    <h5>for</h5>
    @for ($i = 0; $i < 5; $i++)
        <span>{{$i}}</span>
    @endfor
@endsection

 

foreach문 : foreach와 forelse문의 경우, $loop라는 변수가 자동으로 생성됨

 

$loop :

      $loop->index : 현재 반복의 인덱스 (0부터 시작)

      $loop->iteration : 현재 반복의 번호 (1부터 시작)

      $loop->remaining : 현재 반복 이후의 남은 반복 횟수

      $loop->count : 전체 반복 횟수

      $loop->first : 첫 번째 반복인지 여부 (boolean)

      $loop->last : 마지막 반복인지 여부 (boolean)

      $loop->depth : 중첩된 반복문의 깊이 (첫 번째 반복문은 1, 두 번째 반복문은 2, ...)

      $loop->parent : 상위 반복문의 $loop 변수

// app/Http/Controllers/BladeController

class BladeController extends Controller
{
    public function index()
    {
        $arr = [
            'name' => '홍길동'
            ,'gender' => '여자'
            ,'birth' => '20081023'
            ,'addr' => '구미'
            ,'tel' => '01012345678'
        ];
        
        return view('blade')->with('data', $arr);
    }
}
{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}
<body>
    @yield('foreach')
</body>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

@extends('layout.layout')

@section('foreach')
    <hr>
    <h5>foreach</h5>
    @foreach($data as $key => $val)
        <span>{{$loop->count.' >> '.$loop->iteration.'     '}}</span>
        <span>{{$key.' : '.$val}}</span>
        <br>
    @endforeach
@endsection

 

forelse문

// app/Http/Controllers/BladeController.php

class BladeController extends Controller
{
    public function index()
    {
        $arr2 = [];
        return view('blade')->with('data2', $arr2);
    }
}
{{-- resources/views/layout/layout.blade.php (부모 템플릿) --}}
<body>
    @yield('foreles')
</body>
{{-- resources/views/blade.blade.php (자식 템플릿) --}}

@extends('layout.layout')

@section('forelse')
    <hr>
    <h5>forelse</h5>
    @forelse($data2 as $key => $val)
        <span>{{$key.' : '.$val}}</span>
        <br>
    @empty
        {{-- $data2가 빈 경우 출력됨 --}}
        <span>배열이 비어있음</span>
    @endforelse
@endsection

 

Github

Link

 

'Laravel > Laravel_ex' 카테고리의 다른 글

seeders(database/seeders), factories(database/factories)  (0) 2023.05.27
migrations(database/migrations)  (0) 2023.05.27
라우트 정의(routes/web.php)  (0) 2023.05.23
Laravel  (0) 2023.05.23

+ Recent posts