livewire best practices
2.1.1
이 저장소는 Livewire 구성 요소의 보안, 성능 및 유지 관리에 관한 기업의 우려 사항을 충족하기 위해 Laravel Livewire 프레임워크를 사용하는 방법에 대한 일반적인 권장 사항을 선별한 목록입니다.
제 이름은 Michael Rubél이고 Livewire 프레임워크가 새롭고 거의 안정적이지 않았던 2019년에 사용하기 시작했습니다. 예전에는 JavaScript를 사용하지 않고도 동적 UI를 얼마나 빨리 제공할 수 있는지에 깊은 인상을 받았습니다. 하지만 다른 소프트웨어 솔루션과 마찬가지로 여기에도 함정이 있었고 저는 그 함정을 처리해야 했습니다. 이 저장소의 주요 목표는 Livewire로 작업할 때 고려해야 할 가장 중요한 경험을 수집하는 것입니다.
시작하자...
Livewire에는 각 구성 요소에 루트 요소(div)가 필요합니다. 항상 <div>Your Code Here</div> 안에 코드를 작성해야 합니다. 이 구조를 생략하면 구성 요소 업데이트에 많은 문제가 발생합니다.
예
Don't pass large objects to Livewire components!가능하면 구성 요소의 공용 속성에 객체를 전달하지 마세요. 기본 유형(문자열, 정수, 배열 등)을 사용하십시오. 이는 Livewire가 프런트엔드와 백엔드 간의 상태를 공유하기 위해 서버에 대한 각 요청과 함께 구성 요소의 페이로드를 직렬화/역직렬화하기 때문입니다. 객체에 대해 작업해야 하는 경우 메서드나 계산된 속성 내에서 객체를 생성한 다음 처리 결과를 반환할 수 있습니다.
큰 물체를 고려해야 할 사항은 무엇입니까?
참고: 전체 페이지 구성 요소를 사용하는 경우 전체 페이지 구성 요소 자체에서 객체를 가져온 다음 기본 유형으로 중첩된 구성 요소에 아래층으로 전달하는 것이 좋습니다.
다른 Livewire 구성 요소(1)를 포함하는 Livewire 구성 요소(0)가 있는 경우 더 깊게(2+) 중첩해서는 안 됩니다. 너무 많은 중첩은 DOM 차이 문제를 처리할 때 골칫거리가 될 수 있습니다.
또한 중첩을 사용할 때 블레이드 구성 요소를 사용하는 것을 선호합니다. 블레이드 구성 요소는 상위 Livewire 구성 요소와 통신할 수 있지만 Livewire로 인해 추가되는 오버헤드가 없습니다.
예
Livewire v3에는 Form Objects 라는 새로운 추상화 계층이 도입되었습니다. 장기적으로 구성 요소를 더 쉽게 유지 관리할 수 있으므로 항상 사용하십시오.
문서
기본적으로 클라이언트 측에서 쉽게 액세스할 수 있으므로 민감한 데이터를 Livewire 구성 요소에 전달할 수 있는 상황을 피하세요. Livewire 버전 3부터 #[Locked] 속성을 사용하여 프런트엔드에서 속성을 숨길 수 있습니다.
데이터를 새로 고치기 위해 페이지를 지속적으로 폴링하는 대신 이벤트 리스너를 사용하여 다른 구성 요소에서 특정 작업이 시작된 후에만 구성 요소 업데이트를 수행할 수 있습니다.
예
불필요한 데이터베이스 쿼리를 피하기 위해 계산된 속성을 사용할 수 있습니다. 계산된 속성은 구성 요소의 수명 주기 내에 캐시되며 구성 요소 클래스 또는 블레이드 보기에서 여러 번 실행되지 않습니다. Livewire v3부터 계산된 속성의 결과는 일반 애플리케이션 수준 캐시(예: Redis)에도 캐시될 수 있습니다.
예
mount 메소드에 ID 또는 UUID만 전달한 다음 모델 속성을 구성 요소 속성에 매핑합니다. 기억하세요: 전체 모델을 할당하지 말고 모델의 속성만 할당하세요. 모델 속성을 수동으로 매핑하지 않으려면 fill 방법을 사용할 수 있습니다.
예
live 와이어:모델 수정자를 사용하지 마세요. 이는 서버에 대한 불필요한 요청을 대폭 줄여줍니다. Livewire 버전 3에서는 기본적으로 모든 모델이 연기됩니다(기존: defer modifier). 이는 좋은 현상입니다.
예
Livewire에는 구성 요소 생성, 이동, 이름 변경 등을 위한 Artisan 명령이 내장되어 있습니다. 예를 들어 오류가 발생하기 쉬운 파일 이름을 수동으로 바꾸는 대신 다음 명령을 사용할 수 있습니다.
php artisan livewire:move Old/Path/To/Component New/Path/To/Component 로딩 상태를 사용하여 UX를 개선할 수 있습니다. 프로세스가 예상보다 오래 실행되는 경우 백그라운드에서 어떤 일이 발생하고 있음을 사용자에게 알려줍니다. 깜박임을 방지하려면 delay 수정자를 사용할 수 있습니다.
예
데이터가 준비될 때까지 페이지 렌더링을 차단하는 대신 지연 로딩 기술을 사용하여 자리 표시자를 만들어 UI의 반응성을 높일 수 있습니다.
예
$wire.entangle 지시어를 사용하여 데이터를 백엔드와 동기화하세요. 이렇게 하면 모델이 프런트엔드에서 즉시 업데이트되고, 네트워크 요청이 서버에 도달한 후에도 데이터가 서버 측에 유지됩니다. 느린 장치에서 사용자 경험을 획기적으로 향상시킵니다. 다른 프런트엔드 커뮤니티에서는 이 접근 방식을 "낙관적 응답" 또는 "낙관적 UI"라고 합니다.
예
Livewire는 내부적으로 양식 요청을 지원하지 않지만 구성 요소의 확인 규칙 배열을 하드코딩하는 대신 양식 요청에서 직접 가져올 수 있습니다. 이렇게 하면 API 엔드포인트 등 다양한 애플리케이션 계층에서 동일한 유효성 검사 규칙을 재사용할 수 있습니다.
예
간단한 테스트라도 구성 요소에서 무언가를 변경할 때 큰 도움이 될 수 있습니다. Livewire에는 간단하면서도 강력한 테스트 API가 있습니다.
매일 Livewire로 작업하시나요?
목록에 표시되지 않는 모범 사례를 제안해 보세요.
그것이 좋은 습관인지 확실하지 않다면 토론을 시작해도 됩니다.
