페이지를 방문 할 때마다 렌더링 된 앱 또는 여러 페이지 앱이 전체페이지를 새로 고침하고

원하는 경우 뷰 및 라우팅과 같은 모든 것이 서버에서 발생됨.

앱의 상호 작용 기능을 사용하면 일부 JavaScript를 특정 페이지로 드롭 할 수 있음.

Inertia 는 중간에 앉아서 두 가지의 가장 좋은 부분을 취합한다.


블레이드로 작성된 모든 템플릿을 JavaScript 렌더링으로 대체한다는 사실이 제일 큰 장점

저작자표시

'라라벨 > Inertia.js' 카테고리의 다른 글

Inertia 적용해보기  (0) 2020.04.15
Laravel + Inertia.js 예제  (0) 2020.04.15

1. 예제 깃허브 주소

https://github.com/inertiajs/pingcrm




저작자표시

'라라벨 > Inertia.js' 카테고리의 다른 글

Inertia 적용해보기  (0) 2020.04.15
Inertia.js란  (0) 2020.04.15

https://github.com/alpinejs/alpine

저작자표시

'라라벨 > laravel-movies' 카테고리의 다른 글

테일윈드css 로딩 스피너 설치  (0) 2020.04.12
7. 디테일페이지 만들기  (0) 2020.04.06
4. main, index, show 디자인양식  (0) 2020.04.05
3. 구조잡기  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05

https://github.com/aniftyco/tailwindcss-spinner


1. 설치

npm install --save-dev tailwindcss-spinner


2. tailwind.config.js  플러그인을 넣어준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
module.exports = {
  theme: {
    extend: {
        width:{
            '96' : '24rem',
        }
    },
  },
  variants: {},
  plugins: [
    require('tailwindcss-spinner')(), 
  ],
}
 
cs


3. 테마도 넣어준다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
module.exports = {
  theme: {
    extend: {
        width:{
            '96' : '24rem',
        }
    },
    spinner: (theme) => ({
        default: {
          color: '#dae1e7', // color you want to make the spinner
          size: '1em', // size of the spinner (used for both width and height)
          border: '2px', // border-width of the spinner (shouldn't be bigger than half the spinner's size)
          speed: '500ms', // the speed at which the spinner should rotate
        },
      }),
 
  },
  variants: {},
  plugins: [
    require('tailwindcss-spinner')(),
  ],
}
 
cs


4. 빌드해준다.

npm run dev


5. 스피너삽입 search-dropdown.blade.php

<div class="absolute top-0">
<i class="fas fa-search mt-2 ml-3"></i>
</div>

<div class="spinner"></div>

@if (strlen($search) >= 2) {{-- 2자이상만 검색되게 --}}


 

위치를 맞출려면 resources/css/main.css

1
2
3
4
5
6
7
8
9
10
@tailwind base;
 
@tailwind components;
 
@tailwind utilities;
 
.spinner{
    position: absolute;
}
 
cs


추가후 빌드 npm run dev


search-dropdown.blade.php 스피너 위치를 맞춘다.

<div wire:loading class="spinner top-0 right-0 mr-4 mt-3" > </div>



저작자표시

'라라벨 > laravel-movies' 카테고리의 다른 글

알파인js  (0) 2020.04.13
7. 디테일페이지 만들기  (0) 2020.04.06
4. main, index, show 디자인양식  (0) 2020.04.05
3. 구조잡기  (0) 2020.04.05
2. Fontatwesome 설치하기  (0) 2020.04.05

1. users테이블에 count 컬럼 추가

Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->integer('count')->nullable()->default(0);
$table->rememberToken();
$table->timestamps();
});


2. 프론트앤드 스캐폴딩 설치 

composer require laravel/ui


-로그인 스캐폴딩

php artisan ui bootstrap --auth


-npm 설치

npm install


-css빌드하기

npm run dev



3. 구성요소 추가

php artisan livewire:make Counter


4. app/Http/Livewire/Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
public $counter;

public function mount()
{
$this->counter = auth()->user()->count;
}


public function increment()
{
$this->counter ++;
auth()->user()->count = $this->counter;
auth()->user()->save();
}

public function decrement()
{
$this->counter--;
auth()->user()->count = $this->counter;
auth()->user()->save();
}

public function render()
{
return view('livewire.counter');
}
}


5. resources/views/layouts/app.blade.php 

1
2
3
4
5
6
7
8
9
10
<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>
cs


6. views/home.blade.php 추가

@livewire('counter')


7. 회원가입을 한다.


8. 브라우저에서 버튼을 클릭한다.



9. DB확인



저작자표시

'라라벨 > livewire_study' 카테고리의 다른 글

laravel livewire turbolinks  (0) 2020.04.17
라라벨 와이어 동작방법 버튼 카운터  (0) 2020.04.11
데이터바인딩  (0) 2020.04.11
속성사용하기  (0) 2020.04.11
변수값 넘기기  (0) 2020.04.11

1. 구성요소 추가

1
php artisan livewire:make Counter
cs


CLASS: app/Http/Livewire/Counter.php

VIEW:  resources/views/livewire/counter.blade.php


2. app/Http/Livewire/Counter.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $counter;
 
    public function increment()
    {
        $this->counter++;
    }
 
    public function decrement()
    {
        $this->counter--;
    }
 
    public function mount()
    {
        $this->counter = 0;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}
 
cs


3. 디자인과 버튼에 메서드를 설정해준다. 

<div>
<p>{{ $counter }}</p>
<button wire:click="increment">+</button> | <button wire:click="decrement">-</button>
</div>


4. welcome.blade.php 파일에 주입해준다.

@livewire('counter')



5. input 박스에 더하기나 빼기 값을 넣어 줄 수 있음

<div>
<p>{{ $counter }}</p>
<p><input type="text" wire:model.lazy="step" ></p>
<button wire:click="increment">+</button> | <button wire:click="decrement">-</button>
</div>


6. Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
public $counter;

public $step;

public function increment()
{
$this->counter += $this->step;
}

public function decrement()
{
$this->counter -= $this->step;
}

public function mount()
{
$this->counter = 0;
$this->step = 1;
}

public function render()
{
return view('livewire.counter');
}
}


7. 키보드를 사용하게 할 수 도 있음

<div>
<p>{{ $counter }}</p>
<p><input
wire:keydown.arrow-up="increment"
wire:keydown.arrow-down="decrement"
type="text"
wire:model.lazy="step" ></p>

<button wire:click="increment">+</button> | <button wire:click="decrement">-</button>
</div>



저작자표시

'라라벨 > livewire_study' 카테고리의 다른 글

laravel livewire turbolinks  (0) 2020.04.17
숫자카운터 db비동기  (0) 2020.04.12
데이터바인딩  (0) 2020.04.11
속성사용하기  (0) 2020.04.11
변수값 넘기기  (0) 2020.04.11

1. app/Http/Livewire/HelloWorld.php

public $message = '';


*기본 입력

public $message = 'message';


2.  hello-world.blade.php 에 input 부분 작성

<div>
<h2>HELLO WORLD</h2>
<h3>{{ $name }}</h3>

메시지입력 <input type="text" wire:model="message">
<p>{{ $message }}</p>
</div>


결과


메시지 표시 딜레이값

메시지입력 <input type="text" wire:model.debounce.1000ms="message">


lazy 커서가 벗어나지면 적용된다.

메시지입력1 <input type="text" wire:model.lazy="message">
메시지입력2 <input type="text" wire:model.lazy="message2">
<p>{{ $message }} | {{ $message2 }}</p>



저작자표시

'라라벨 > livewire_study' 카테고리의 다른 글

숫자카운터 db비동기  (0) 2020.04.12
라라벨 와이어 동작방법 버튼 카운터  (0) 2020.04.11
속성사용하기  (0) 2020.04.11
변수값 넘기기  (0) 2020.04.11
설치 및 사용방법  (0) 2020.04.11

1. 클래스 구성파일만 작성

1
php artisan livewire:make HelloWorld2 --inline
cs


2. app/Http/Livewire/HelloWrold2.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
 
namespace App\Http\Livewire;
 
use Livewire\Component;
 
class HelloWorld2 extends Component
{
    public function render()
    {
        return <<<'blade'
            <div>
               여기는 HelloWrold2 입니다.
            </div>
        blade;
    }
}
 
cs


3. welcome.blade.php 구성요소 추가

@livewire('hello-world')
@livewire('hello-world2')


4. 브라우저 확인


5. 문자열 변경하기 


6. private 로 사용할 경우

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
private $name = 'anko3899';

public function mount()
{
$this->name = "Korea";
}


public function render()
{
return view('livewire.hello-world', ['name' => $this->name]);
}
}


저작자표시

'라라벨 > livewire_study' 카테고리의 다른 글

숫자카운터 db비동기  (0) 2020.04.12
라라벨 와이어 동작방법 버튼 카운터  (0) 2020.04.11
데이터바인딩  (0) 2020.04.11
변수값 넘기기  (0) 2020.04.11
설치 및 사용방법  (0) 2020.04.11

+ Recent posts

티스토리툴바