Laravel에 JavaScript를 포함하는 방법 모든 시나리오에 대한 단계별 가이드
Laravel 11에 JavaScript를 포함하는 방법: 모든 시나리오에 대한 단계별 가이드
Laravel 11에서는 기본 에셋 번들러인 Vite 덕분에 프로젝트에 JavaScript를 추가하는 것이 매우 쉽습니다. 전역 포함부터 특정 보기의 조건부 로드까지 모든 종류의 시나리오에 맞게 JavaScript를 설정하는 방법은 다음과 같습니다.
1. 모든 파일에 JavaScript 포함
많은 경우 Laravel 애플리케이션 전체에 전역적으로 JavaScript를 포함시키고 싶을 수도 있습니다. 보편적으로 포함되도록 JavaScript를 구성하고 번들로 묶는 방법은 다음과 같습니다.
1단계: JavaScript 파일 배치
- 위치: resources/js 디렉터리에 JavaScript 파일을 저장합니다. 예를 들어 파일 이름이 custom.js인 경우 resources/js/custom.js로 저장하세요.
- 정리: 여러 JavaScript 파일이 포함된 복잡한 프로젝트의 경우 resources/js/modules/custom.js와 같은 resources/js의 하위 디렉터리 내에 정리할 수 있습니다.
2단계: Vite로 JavaScript 컴파일
Laravel 11은 자산 관리를 위해 Vite를 사용합니다. JavaScript를 번들로 구성하려면:
- app.js에 포함: resources/js/app.js를 열고 사용자 정의 파일을 가져옵니다.
import './custom.js';
- 뷰에서 직접 가져오기: 또는 특정 뷰에서만 JavaScript를 원하는 경우 블레이드 템플릿에서 @vite 지시문을 사용할 수 있습니다.
@vite('resources/js/custom.js')
3단계: vite.config.js 구성
@vite 가져오기를 올바르게 처리하도록 vite.config.js가 설정되어 있는지 확인하세요. 기본적으로 다음과 같아야 합니다.
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 지시어를 사용하세요.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
요약
- 저장 JavaScript 파일을 resources/js에 저장하세요.
- 전역적으로 포함하려면 app.js에서 가져오거나 필요에 따라 블레이드 템플릿에 직접 포함하세요.
- Vite를 사용하여 컴파일 자산
- JavaScript를 로드하려면 블레이드 템플릿에서 @vite를 사용하세요.
이 설정을 통해 Laravel 11 프로젝트의 사이트 전체에서 JavaScript를 사용할 수 있습니다.
2. 블레이드 렌더링 순서 이해
특정 보기에 조건부로 JavaScript를 포함하는 경우 블레이드 템플릿이 렌더링되는 순서를 이해하는 것이 중요합니다.
Laravel에서는 레이아웃이 먼저 처리되고 개별 뷰와 부분 뷰가 그 뒤를 따릅니다. 렌더링 과정은 다음과 같습니다.
- 레이아웃이 먼저 렌더링됩니다, 콘텐츠 삽입을 위해 생성된 자리 표시자(@yield 및 @section)가 포함됩니다.
- 하위 뷰 또는 부분 뷰가 다음으로 처리되며 해당 콘텐츠가 레이아웃 자리 표시자에 삽입됩니다.
이 순서로 인해 하위 뷰 콘텐츠를 기반으로 레이아웃에 JavaScript 파일을 조건부로 추가하려는 경우 표준 변수 검사가 작동하지 않습니다. 페이지별 JavaScript를 보다 유연하게 처리하려면 Blade의 @stack 및 @push 지시어를 사용해야 합니다.
3. 스택 및 푸시를 사용하여 특정 뷰에 조건부로 JavaScript 포함
특정 뷰에 JavaScript를 추가하기 위해 Laravel의 @stack 및 @push 지시문은 레이아웃에 스크립트를 조건부로 포함할 수 있는 효율적인 솔루션을 제공합니다.
1단계: 레이아웃에서 스택 정의
레이아웃에서 페이지별 스크립트용 스택을 생성하세요.
import './custom.js';
2단계: 하위 뷰에서 스크립트 푸시
JavaScript가 필요한 특정 블레이드 파일에서 스크립트 스택으로 푸시합니다.
@vite('resources/js/custom.js')
이 설정을 사용하면 해당 특정 보기가 로드될 때만 custom.js가 포함됩니다. 이 방법은 Laravel의 렌더링 순서와 함께 작동하는 깔끔한 솔루션을 제공하여 필요에 따라 JavaScript 파일이 조건부로 포함되도록 합니다.
@push를 어디에 선언하나요?
블레이드 뷰에서 @push 문 배치는 주로 가독성과 실행 순서에 중요합니다. @push를 효과적으로 사용하는 방법은 다음과 같습니다.
- 뷰에 배치: 블레이드 뷰의 어느 곳에나 @push를 배치할 수 있지만 파일 끝, 일반적으로 @section 콘텐츠 뒤에 배치하는 것이 가장 좋습니다. 이를 통해 스크립트 관련 코드를 기본 콘텐츠와 별도로 유지하여 가독성과 유지 관리성을 향상시킵니다.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
- 여러 @push 문의 순서: 동일한 스택에 대해 @push 선언이 여러 개 있는 경우(예: @push('scripts')) 뷰에 나타나는 순서대로 추가됩니다. 예를 들어:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
이 경우 @push가 선언된 순서대로 스택에 콘텐츠를 추가하기 때문에 script1.js가 script2.js보다 먼저 로드됩니다.
- 부분 및 구성 요소에서 @push 사용: @push는 블레이드 부분(예: @include) 또는 블레이드 구성 요소에서도 사용할 수 있습니다. 이는 재사용 가능한 구성 요소 내에 보기별 스크립트나 스타일을 직접 포함하여 종속성을 쉽게 관리하는 데 유용합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
@stack('scripts') <!-- Define a stack for additional scripts -->
</head>
<body>
@yield('content')
</body>
</html>
이 부분이 뷰에 포함되면 부분 특정.js가 레이아웃 파일의 스크립트 스택에 추가됩니다.
- @prepend로 순서 제어: 특정 스크립트를 동일한 스택의 다른 스크립트보다 먼저 로드해야 하는 경우 @push 대신 @prepend를 사용할 수 있습니다. @prepend는 콘텐츠를 스택의 시작 부분에 배치하므로 로드 순서를 더 효과적으로 제어할 수 있습니다.
import './custom.js';
여기서는 블레이드 파일의 위치에 관계없이 비판적.js가 non_critical.js보다 먼저 로드됩니다.
주요 시사점
- 명확성과 유지 관리 용이성을 위해 뷰의 @push를 뷰 끝에 배치하세요.
- 순서는 뷰 내 배치에 따라 결정되며 이전 @push 문이 먼저 로드됩니다.
- @push는 부분 및 구성요소에서 작동하여 보기별 종속성을 쉽게 포함할 수 있습니다.
- 동일한 스택에서 먼저 로드해야 하는 스크립트에는 @prepend를 사용하세요.
4. 대안: 레이아웃에서 인라인 조건문 사용
JavaScript가 포함될 때 더 세밀하게 제어해야 하는 경우 Laravel의 조건문을 사용하면 레이아웃에서 직접 경로 기반 또는 변수 기반 논리를 사용할 수 있습니다.
경로에 따라 조건부 포함
레이아웃에서 직접 경로 확인을 사용하여 현재 경로를 기반으로 JavaScript를 포함할 수 있습니다.
@vite('resources/js/custom.js')
변수에 따라 조건부 포함
변수를 기반으로 스크립트를 조건부로 로드하려면 컨트롤러 또는 하위 보기에서 플래그를 설정한 다음 레이아웃에서 이를 확인할 수 있습니다.
- 컨트롤러에서:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: ['resources/js/app.js'],
refresh: true,
}),
],
});
- 레이아웃:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Laravel App</title>
@vite('resources/js/app.js')
</head>
<body>
<!-- Content here -->
</body>
</html>
이 접근 방식을 사용하면 특정 변수나 경로를 기반으로 JavaScript 로드를 제어할 수 있어 사용자 정의 페이지 설정에 유연성을 제공할 수 있습니다.
요약
논의된 방법에 대한 간략한 개요는 다음과 같습니다.
- 전역 포함: app.js에 JavaScript를 배치하고 @vite를 사용하여 전역적으로 포함합니다.
- 스택 및 푸시를 통한 조건부 포함: 유연한 모듈식 스크립트 처리를 위해 @stack 및 @push 지시문을 사용하여 스크립트가 필요한 뷰에만 로드되도록 합니다.
- 레이아웃의 조건문: 경로 기반 검사 또는 컨트롤러 변수를 사용하여 레이아웃에 직접 JavaScript를 조건부로 로드합니다.
이러한 옵션을 사용하면 JavaScript 로딩을 정확하게 제어하여 Laravel 11 프로젝트를 효율적이고 유지 관리하기 쉽게 만들 수 있습니다.
위 내용은 Laravel에 JavaScript를 포함하는 방법 모든 시나리오에 대한 단계별 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
PHP에서 보안 비밀번호 해싱을 설명하십시오 (예 : Password_hash, Password_Verify). 왜 MD5 또는 SHA1을 사용하지 않습니까?
Apr 17, 2025 am 12:06 AM
PHP에서 Password_hash 및 Password_Verify 기능을 사용하여 보안 비밀번호 해싱을 구현해야하며 MD5 또는 SHA1을 사용해서는 안됩니다. 1) Password_hash는 보안을 향상시키기 위해 소금 값이 포함 된 해시를 생성합니다. 2) Password_verify 암호를 확인하고 해시 값을 비교하여 보안을 보장합니다. 3) MD5 및 SHA1은 취약하고 소금 값이 부족하며 현대 암호 보안에는 적합하지 않습니다.
스칼라 유형, 반환 유형, 노조 유형 및 무효 유형을 포함한 PHP 유형의 힌트 작업은 어떻게 작동합니까?
Apr 17, 2025 am 12:25 AM
PHP 유형은 코드 품질과 가독성을 향상시키기위한 프롬프트입니다. 1) 스칼라 유형 팁 : PHP7.0이므로 int, float 등과 같은 기능 매개 변수에 기본 데이터 유형을 지정할 수 있습니다. 2) 반환 유형 프롬프트 : 기능 반환 값 유형의 일관성을 확인하십시오. 3) Union 유형 프롬프트 : PHP8.0이므로 기능 매개 변수 또는 반환 값에 여러 유형을 지정할 수 있습니다. 4) Nullable 유형 프롬프트 : NULL 값을 포함하고 널 값을 반환 할 수있는 기능을 포함 할 수 있습니다.
PHP와 Python : 다른 패러다임이 설명되었습니다
Apr 18, 2025 am 12:26 AM
PHP는 주로 절차 적 프로그래밍이지만 객체 지향 프로그래밍 (OOP)도 지원합니다. Python은 OOP, 기능 및 절차 프로그래밍을 포함한 다양한 패러다임을 지원합니다. PHP는 웹 개발에 적합하며 Python은 데이터 분석 및 기계 학습과 같은 다양한 응용 프로그램에 적합합니다.
PHP에서 SQL 주입을 어떻게 방지합니까? (준비된 진술, pdo)
Apr 15, 2025 am 12:15 AM
PHP에서 전처리 문과 PDO를 사용하면 SQL 주입 공격을 효과적으로 방지 할 수 있습니다. 1) PDO를 사용하여 데이터베이스에 연결하고 오류 모드를 설정하십시오. 2) 준비 방법을 통해 전처리 명세서를 작성하고 자리 표시자를 사용하여 데이터를 전달하고 방법을 실행하십시오. 3) 쿼리 결과를 처리하고 코드의 보안 및 성능을 보장합니다.
PHP 및 Python : 코드 예제 및 비교
Apr 15, 2025 am 12:07 AM
PHP와 Python은 고유 한 장점과 단점이 있으며 선택은 프로젝트 요구와 개인 선호도에 달려 있습니다. 1.PHP는 대규모 웹 애플리케이션의 빠른 개발 및 유지 보수에 적합합니다. 2. Python은 데이터 과학 및 기계 학습 분야를 지배합니다.
PHP : 데이터베이스 및 서버 측 로직 처리
Apr 15, 2025 am 12:15 AM
PHP는 MySQLI 및 PDO 확장 기능을 사용하여 데이터베이스 작업 및 서버 측 로직 프로세싱에서 상호 작용하고 세션 관리와 같은 기능을 통해 서버 측로 로직을 처리합니다. 1) MySQLI 또는 PDO를 사용하여 데이터베이스에 연결하고 SQL 쿼리를 실행하십시오. 2) 세션 관리 및 기타 기능을 통해 HTTP 요청 및 사용자 상태를 처리합니다. 3) 트랜잭션을 사용하여 데이터베이스 작업의 원자력을 보장하십시오. 4) SQL 주입 방지, 디버깅을 위해 예외 처리 및 폐쇄 연결을 사용하십시오. 5) 인덱싱 및 캐시를 통해 성능을 최적화하고, 읽을 수있는 코드를 작성하고, 오류 처리를 수행하십시오.
PHP의 목적 : 동적 웹 사이트 구축
Apr 15, 2025 am 12:18 AM
PHP는 동적 웹 사이트를 구축하는 데 사용되며 해당 핵심 기능에는 다음이 포함됩니다. 1. 데이터베이스와 연결하여 동적 컨텐츠를 생성하고 웹 페이지를 실시간으로 생성합니다. 2. 사용자 상호 작용 및 양식 제출을 처리하고 입력을 확인하고 작업에 응답합니다. 3. 개인화 된 경험을 제공하기 위해 세션 및 사용자 인증을 관리합니다. 4. 성능을 최적화하고 모범 사례를 따라 웹 사이트 효율성 및 보안을 개선하십시오.
PHP와 Python 중에서 선택 : 가이드
Apr 18, 2025 am 12:24 AM
PHP는 웹 개발 및 빠른 프로토 타이핑에 적합하며 Python은 데이터 과학 및 기계 학습에 적합합니다. 1.PHP는 간단한 구문과 함께 동적 웹 개발에 사용되며 빠른 개발에 적합합니다. 2. Python은 간결한 구문을 가지고 있으며 여러 분야에 적합하며 강력한 라이브러리 생태계가 있습니다.
