우와! 좋아, 나는 오늘 새로운 것을 배웠다. 내 사용자 중 한 명이 모바일 장치에서 내 사이트에 로그인하는 데 문제가 있었고 항상 빈 흰색 화면이 표시되고 아무 일도 일어나지 않았습니다. 나는 그들에게 몇 가지 단계를 밟아 보았고 그들을 위해 일하게 할 수 없었습니다. 내 전화를 통해 계정에 액세스했을 때 제대로 작동했지만, 우리가 알아낸 것은 데이터 병목 현상이 있고 Wi-Fi에 연결되어 전화를 사용하는 경우를 제외하고는 데이터 병목 현상이 발생하여 페이지가 로드되지 않는다는 것입니다. 오, 기쁨. 어쨌든, 여기 우리가 그것을 고친 방법입니다.

문제

이 사용자는 초기 로그인 시 대시보드에 로드되는 많은 데이터를 가지고 있습니다. 예를 들어 캘린더가 있고 캘린더는 모든 이벤트를 로드합니다(정확히 800개). 이번 달 이벤트만 로드하는 대신 모든 이벤트를 로드하는 것이 문제 중 하나였습니다.

<full-calendar /> 컴포넌트에서 아래와 같은 prop을 통해 이벤트를 추가했습니다.

:events="events.records"

이것은 events.records 모든 이벤트에 대해 데이터베이스를 쿼리하고 있었고 더 나은 방법을 찾았습니다!

해결책

<full-calendar /> 구성 요소에 이벤트를 추가할 때 여러 가지 방법이 있습니다. 저는 이벤트 객체의 배열을 통해 수행하고 있었습니다. 대신 JSON 피드를 통해 이벤트를 추가하고 싶습니다. 이유를 설명하겠지만 아래 코드 스니펫을 확인하세요. 이렇게 하면 됩니다.

eventSources: [
        {
          url: '/test_events',
          method: 'GET',
          failure: function() {
            alert('there was an error while fetching events!');
          },
          color: 'yellow',   // a non-ajax option
          textColor: 'black' // a non-ajax option
        },
]

그리고 우리는 그것을 우리의 구성 요소에서 다음과 같이 사용할 수 있습니다.<full-component :event-sources="eventSources" /> . 이와 같은 JSON 피드를 사용하면 URL에 시작 및 종료 쿼리 매개변수가 자동으로 추가되어 이 두 매개변수를 기반으로 데이터를 쿼리할 수 있습니다. URL은 다음과 같습니다.https://localhost/calendar_events?start=2020-08-30T00%3A00%3A00-04%3A00&end=2020-10-11T00%3A00%3A00-04%3A00
이제 이 쿼리를 실행하는 대신:

$events = $request->user()->events()->get();
return response()->json($events);

모든 결과를 반환하는 경우 다음 쿼리를 실행할 수 있습니다.

$start = $request->start;
$end = $request->end;
$events = $request->user()->events()->whereBetween('start', [$start, $end])->get();

return response()->json($events);

주어진 매개변수를 기반으로 한 결과만 반환합니다.

결론

Laravel을 사용할 때 이와 같은 것을 잡는 데 도움이 되도록 Laravel 디버그 바 패키지를 사용해야 합니다. 바라건대, 이 기사가 미래에 누군가가 이와 같은 실수를 하는 데 도움이 되길 바라며, 이를 더욱 개선할 수 있는 방법을 알고 있다면 아래 댓글로 알려주세요.