Laravel 11에 JavaScript를 포함하는 방법: 모든 시나리오에 대한 단계별 가이드

Laravel 11에서는 기본 에셋 번들러인 Vite 덕분에 프로젝트에 JavaScript를 추가하는 것이 매우 쉽습니다. 전역 포함부터 특정 보기의 조건부 로드까지 모든 종류의 시나리오에 대해 JavaScript를 설정하는 방법은 다음과 같습니다.

1. 모든 파일에 JavaScript 포함

많은 경우 Laravel 애플리케이션 전체에 전역적으로 JavaScript를 포함시키고 싶을 수도 있습니다. 보편적인 포함을 위해 JavaScript를 구성하고 묶는 방법은 다음과 같습니다.

1단계: JavaScript 파일 배치

1. 위치: resources/js 디렉토리에 JavaScript 파일을 저장합니다. 예를 들어 파일 이름이 custom.js인 경우 resources/js/custom.js.
로 저장하세요.
2. 구성: 여러 JavaScript 파일이 포함된 복잡한 프로젝트의 경우 resources/js/modules/custom.js와 같은 resources/js의 하위 디렉터리 내에서 구성할 수 있습니다.

2단계: Vite로 JavaScript 컴파일

Laravel 11은 자산 관리를 위해 Vite를 사용합니다. JavaScript를 번들로 구성하려면:

1. app.js에 포함: resources/js/app.js를 열고 사용자 정의 파일을 가져옵니다.

   import './custom.js';

1. 뷰에서 직접 가져오기: 또는 특정 뷰에서만 JavaScript를 원하는 경우 블레이드 템플릿에서 @vite 지시문을 사용할 수 있습니다.

   @vite('resources/js/custom.js')

3단계: vite.config.js 구성

vite.config.js가 @vite 가져오기를 올바르게 처리하도록 설정되어 있는지 확인하세요. 기본적으로 다음과 같아야 합니다.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

4단계: Vite 실행

Vite로 자산을 컴파일하려면:

• 개발용: npm run dev 실행
• 프로덕션의 경우: npm run build 실행

5단계: 블레이드 템플릿에 JavaScript 로드

템플릿에 JavaScript 파일을 포함하려면 @vite 지시문을 사용하세요.

    
    @vite('resources/js/app.js')


    

요약

• 저장 리소스/js에 JavaScript 파일을 저장합니다.
• 전역을 포함하려면 app.js에서 가져오거나 필요에 따라 블레이드 템플릿에 직접 포함하세요.
• Vite를 사용하여 컴파일 자산.
• 블레이드 템플릿에서 @vite를 사용하여 JavaScript를 로드합니다.

이 설정을 통해 JavaScript는 Laravel 11 프로젝트의 사이트 전체에서 사용할 수 있습니다.

2. 블레이드 렌더링 순서 이해

특정 보기에 조건부로 JavaScript를 포함하는 경우 블레이드 템플릿이 렌더링되는 순서를 이해하는 것이 중요합니다.

Laravel에서는 레이아웃이 먼저 처리되고, 그 다음에는 개별 뷰와 부분 뷰가 처리됩니다. 렌더링 프로세스는 다음과 같습니다.

1. 레이아웃이 먼저 렌더링되고 콘텐츠 삽입을 위해 생성된 자리 표시자(@yield 및 @section)가 포함됩니다.
2. 하위 뷰 또는 부분 뷰는 다음으로 처리되며 해당 콘텐츠는 레이아웃 자리 표시자에 삽입됩니다.

이 순서로 인해 하위 보기 콘텐츠를 기반으로 레이아웃에 JavaScript 파일을 조건부로 추가하려는 경우 표준 변수 검사가 작동하지 않습니다. 페이지별 JavaScript를 보다 유연하게 처리하려면 Blade의 @stack 및 @push 지시문을 사용해야 합니다.

3. 스택 및 푸시를 사용하여 특정 뷰에 조건부로 JavaScript 포함

특정 뷰에 JavaScript를 추가하기 위해 Laravel의 @stack 및 @push 지시문은 레이아웃에 스크립트를 조건부로 포함할 수 있는 효율적인 솔루션을 제공합니다.

1단계: 레이아웃에서 스택 정의

레이아웃에서 페이지별 스크립트에 대한 스택을 생성합니다.

    
    @vite('resources/js/app.js')
    @stack('scripts') 


    @yield('content')

2단계: 하위 뷰에서 스크립트 푸시

JavaScript가 필요한 특정 블레이드 파일에서 스크립트 스택으로 푸시합니다.

@extends('layout')

@section('content')
    
@endsection

@push('scripts')
    @vite('resources/js/custom.js')
@endpush

이 설정을 사용하면 해당 특정 보기가 로드될 때만 custom.js가 포함됩니다. 이 방법은 Laravel의 렌더링 순서와 함께 작동하는 깔끔한 솔루션을 제공하여 필요에 따라 JavaScript 파일이 조건부로 포함되도록 합니다.

@push를 어디에 선언하나요?

블레이드 보기에서 @push 문 배치는 주로 가독성과 실행 순서에 중요합니다. @push를 효과적으로 사용하는 방법은 다음과 같습니다.

1. 뷰에 배치: 블레이드 뷰의 어느 곳에나 @push를 배치할 수 있지만 파일 끝, 일반적으로 @section 콘텐츠 뒤에 배치하는 것이 가장 좋습니다. 이를 통해 스크립트 관련 코드를 기본 콘텐츠와 별도로 유지하여 가독성과 유지 관리성을 향상시킵니다.

   @extends('layout')

   @section('content')
       
   @endsection

   @push('scripts')
       @vite('resources/js/custom.js')
   @endpush

1. 여러 @push 문 순서: 동일한 스택에 대해 @push 선언이 여러 개 있는 경우(예: @push('scripts')) 뷰에 나타나는 순서대로 추가됩니다. 예를 들어:

   @push('scripts')
       
   @endpush

   @push('scripts')
       
   @endpush

이 경우 @push가 선언된 순서대로 스택에 콘텐츠를 추가하기 때문에 script1.js가 script2.js보다 먼저 로드됩니다.

1. 부분 및 구성 요소에서 @push 사용: @push는 블레이드 부분(예: @include) 또는 블레이드 구성 요소에서도 사용할 수 있습니다. 이는 재사용 가능한 구성 요소 내에 보기별 스크립트나 스타일을 직접 포함하여 종속성을 쉽게 관리하는 데 유용합니다.

   
   

       
   

   @push('scripts')
       @vite('resources/js/partial-specific.js')
   @endpush

이 부분이 뷰에 포함되면 부분 특정.js가 레이아웃 파일의 스크립트 스택에 추가됩니다.

1. @prepend로 순서 제어: 특정 스크립트를 동일한 스택의 다른 스크립트보다 먼저 로드해야 하는 경우 @push 대신 @prepend를 사용할 수 있습니다. @prepend는 콘텐츠를 스택의 시작 부분에 배치하므로 로드 순서를 더 효과적으로 제어할 수 있습니다.

   @prepend('scripts')
       
   @endprepend

   @push('scripts')
       
   @endpush

여기서 중요한.js는 블레이드 파일의 위치에 관계없이 non_tical.js보다 먼저 로드됩니다.

주요 시사점

• 명확성과 유지 관리 용이성을 위해 뷰 끝에 @push를 배치하세요.
• 순서는 뷰 내 배치에 따라 결정되며 이전 @push 문이 먼저 로드됩니다.
• @push는 부분 및 구성 요소에서 작동하므로 보기별 종속성을 쉽게 포함할 수 있습니다.
• 동일한 스택에서 먼저 로드해야 하는 스크립트에는 @prepend를 사용하세요.

4. 대안: 레이아웃에서 인라인 조건문 사용

JavaScript가 포함될 때 더 세밀한 제어가 필요한 경우 Laravel의 조건문을 사용하면 레이아웃에서 직접 경로 기반 또는 변수 기반 논리를 사용할 수 있습니다.

경로에 따라 조건부 포함

레이아웃에서 직접 경로 확인을 사용하여 현재 경로를 기반으로 JavaScript를 포함할 수 있습니다.

@if (request()->routeIs('some.route.name'))
    @vite('resources/js/custom.js')
@endif

변수에 따라 조건부 포함

변수를 기반으로 스크립트를 조건부로 로드하려면 컨트롤러 또는 하위 보기에서 플래그를 설정한 다음 레이아웃에서 이를 확인할 수 있습니다.

1. 컨트롤러에서:

   return view('your.view', ['loadCustomJS' => true]);

1. 레이아웃에서:

   @if (!empty($loadCustomJS))
       @vite('resources/js/custom.js')
   @endif

이 접근 방식을 사용하면 특정 변수나 경로를 기반으로 JavaScript 로드를 제어할 수 있어 사용자 정의 페이지 설정에 유연성을 제공할 수 있습니다.

요약

논의된 방법에 대한 간략한 개요는 다음과 같습니다.

• 전역 포함: app.js에 JavaScript를 배치하고 @vite를 사용하여 전역적으로 포함합니다.
• 스택 및 푸시를 통한 조건부 포함: 유연한 모듈식 스크립트 처리를 위해 @stack 및 @push 지시문을 사용하여 스크립트가 필요한 뷰에만 로드되도록 합니다.
• 레이아웃의 조건문: 경로 기반 검사 또는 컨트롤러 변수를 사용하여 조건부로 JavaScript를 레이아웃에 직접 로드합니다.

이러한 옵션을 사용하면 JavaScript 로딩을 정확하게 제어하여 Laravel 11 프로젝트를 효율적이고 유지 관리하기 쉽게 만들 수 있습니다.