Next.js와 Laravel의 최적화 비밀병기: Debugbar 연동 가이드

2025-01-06 05:14:51

laravelnextjstypescriptphp

Next.js와 Laravel의 완벽한 조화

Next.js와 Laravel을 결합해서 웹 애플리케이션을 개발하면서 우리는 때때로 성능 문제에 직면할 수 있습니다. 이러한 문제를 해결하고 앱의 성능을 한 단계 끌어올리기 위해 Laravel Debugbar와 함께 작업하는 방법을 통해 최적화의 새로운 세계를 탐험해 봅시다.

Laravel에서 Debugbar 설정하기

Laravel에서 시작하는 첫 단계는 디버그바 패키지를 설치하는 것입니다. 이는 Composer 명령어로 간단히 해결할 수 있습니다.

composer require barryvdh/laravel-debugbar --dev

이후, 라라벨 API 응답에 디버그 데이터를 주입하기 위한 미들웨어를 만들 필요가 있습니다. 이는 InjectDebugBarData 미들웨어를 통해 이루어지며, 다음과 같이 구현할 수 있습니다:

<?php

namespace App\Http\Middleware;

use Barryvdh\Debugbar\Facades\Debugbar;
use Closure;

class InjectDebugBarData
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        if ($response->headers->get('Content-Type') === 'application/json' && Debugbar::isEnabled()) {
            $debugbarData = Debugbar::getData();

            $originalData = json_decode($response->getContent(), true);

            if (isset($originalData['data'])) {
                $originalData['data']['debugbar'] = $debugbarData;
            } else {
                $originalData['debugbar'] = $debugbarData;
            }

            $response->setContent(json_encode($originalData));
        }

        return $response;
    }
}

작성한 미들웨어는 라라벨 라우트에 적용하여 해당 라우트의 JSON 응답에 디버그 정보를 포함하게 됩니다.

Next.js에서 Debugbar 설정하기

Laravel의 준비가 끝났다면, 이제 Next.js에서 연동 작업을 수행해야 합니다. 먼저, debugBar.ts 파일을 유틸리티 폴더에 생성하고 디버그바 응답을 처리하기 위한 로직을 추가합니다.

그 후, 서비스 프로바이더를 생성해 디버그 데이터를 관리하고 이를 디스플레이할 컴포넌트를 만들어야 합니다.

디버그바 사용하기

디버그바를 가장 잘 활용하기 위해서는 Next.js의 앱 레이아웃을 수정하여 서비스 프로바이더와 디버그바 컴포넌트를 포함시켜야 합니다.

<DebugBarProvider>
    {children}
    <DebugBar />
</DebugBarProvider>

각 API 응답에서 디버그 정보를 추가하기 위해서는 디버그바 프로바이더의 훅을 사용해야 합니다:

const { addResponse } = useDebugBar();
addResponse(data.debugbar);

결론 및 추가 정보

이와 같은 방식을 통해 라라벨 앱에서 로그된 정보를 브라우저 콘솔에서 실시간으로 확인할 수 있습니다. 공식 라라벨 디버그바 패키지가 제공하는 것보다 더 간단한 형태지만, 충분히 유용하며 프로젝트의 생산성을 크게 향상시킬 수 있을 것입니다.

R_11