자바스크립트 & CSS 스캐폴딩

• 시작하기
• CSS 작성하기
• JavaScript 작성하기
  • Vue 컴포넌트 작성하기
  • React 사용하기
• 프리셋-Presets 추가하기

시작하기

Laravel은 사용하는 JavaScript 또는 CSS 전처리기를 제한하지 않지만 Bootstrap, React 또는 Vue는 사용하여 기본적인 시작점을 제공합니다. 이것은 많은 애플리케이션에 도움이됩니다. 기본적으로 Laravel은 NPM을 사용하여 이러한 프런트 엔드 패키지를 모두 설치합니다.

라라벨에서 제공하는 부트스트랩 및 Vue 스캐폴딩은 laravel/ui Composer 패키지에 있으며 Composer를 사용하여 설치할 수 있습니다.

composer require laravel/ui

laravel/ui 패키지가 설치되면 ui Artisan 명령을 사용하여 프론트엔드 스캐폴딩을 설치할 수 있습니다.

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

CSS

라라벨 Mix는 순수 CSS에 변수를 추가하고 mixin 그리고 다른 강력한 기능을 추가하여 CSS를 보다 즐겁게 만들 수 있는 SASS 나 Less 를 컴파일 하는 깔끔하고, 풍부한 표현이 가능한 API를 제공합니다. 이 문서에서 CSS 컴파일 전반에 대해서 간단하게 다룰 것입니다; 하지만 SASS 나 Less 를 컴파일하는데에 대한 보다 자세한 내용을 라라벨 Mix 문서에서 확인할 수 있습니다.

자바스크립트

라라벨은 애플리케이션을 구성하기 위해서 지정된 자바스크립트 프레임워크나 라이브러리를 사용하는 것을 요구하지 않습니다. 사실, 모든 곳에 자바스크립트를 사용할 필요는 없습니다. 하지만 라라벨은 Vue라이브러리르 사용하여 현대적인 자바스크립트를 작성하는 일을 시작하는 것을 보다 쉽게 만들어 주는 몇몇 기본적인 스캐폴딩을 포함하고 있습니다. Vue는 컴포넌트를 사용하여 자바스크립트 애플리케이션을 구성하는는데 풍부한 표현이 가능한 API를 제공합니다. CSS와 마찬가지로, 라라벨 Mix를 사용하여 자바스크립트 컴포넌트를 브라우저에서 사용가능한 하나의 자바스크립트 파일로 컴파일 할 수 있습니다.

Frontend 스캐폴딩 삭제하기

애플리케이션에서 프론트엔드 스캐폴딩을 제거하려면, preset 아티즌 명령어를 사용하면 됩니다. 이 명령어가 none 옵션과 함께 사용되면, 애플리케이션에 비어 있는 SASS 파일과 몇몇 자바스크립트 유틸리티 라이브러리를 남겨 놓고, 부트스트랩과 Vue 스캐폴딩을 제거합니다.

php artisan preset none

CSS 작성하기

laravel/ui Composer 패키지와 프론트 엔드 스캐 폴딩 생성을 설치 한 후, 라라벨의 package.json 파일은 부트스트랩을 사용하여 애플리케이션의 프론트엔드 프로토타이핑을 시작하는 것을 돕는 bootstrap 패키지를 포함하고 있습니다. 그렇지만 애플리케이션에 필요한 경우 자유롭게 package.json 파일에서 패키지를 추가하거나, 삭제하면 됩니다. 라라벨 애플리케이션을 구성하는데 부트스트랩 프레임워크를 사용하는 것이 필요하지는 않습니다 - 부트스트랩을 사용하기로 선택한 사람들을 위해서 시작점을 제공하고 있을 뿐입니다.

CSS 를 컴파일 하기 전에, Node 패키지 매니저 (NPM)을 사용하여 여러분의 프로젝트의 프론트엔드 의존성을 설치하십시오:

npm install

npm install 을 사용하여 의존성을 설치하고 나면, 라라벨 Mix를 사용하여 SASS 파일을 순수 CSS 로 컴파일 할 수 있습니다. npm run dev 명령어는 webpack.mix.js 파일 안에 있는 명령들을 처리할 것입니다. 일반적으로 컴파일된 CSS 파일은 public/css 디렉토리에 위치할 것입니다.

npm run dev

라라벨에 프론트엔드 스캐폴딩에 포함된 webpack.mix.js는 resources/sass/app.scss SASS 파일을 컴파일 할 것입니다. 이 app.scss 파일은 SASS 변수들을 가져오고 대부분의 애플리케이션을 위한 좋은 시작점이 되는 제공하는부트스트랩을 로딩합니다. 이 app.scss 파일은 자유롭게 수정할 수 있지만, 원하는 경우 완전히 다른 전처리기를 라라벨 Mix에서 설정하여 사용할 수도 있습니다.

자바스크립트 작성하기

애플리케이션에 필요한 모든 자바스크립트 의존성들은 프로젝트 루트 디렉토리 안에 있는 package.json 파일 안에서 찾을 수 있습니다. 이 파일은 PHP 의존성 대신 자바스크립트 의존성이 지정되어 있다는 점을 제외하면 composer.json 파일과 비슷합니다. Node 패키지 매니저 (NPM)을 사용하여 이 의존성들을 설치할 수 있습니다.

npm install

{tip} 기본적으로 라라벨의 package.json 파일은 자바스크립트 애플리케이션을 구성하는데 도움을 줄 수 있는lodash 와 axios 와 같은 몇몇 패키지를 포함하고 있습니다. 자유롭게 package.json 파일에 애플리케이션에서 필요한 의존성들을 추가하거나 삭제할 수 있습니다.

패키지들이 설치되고 나면, npm run dev 명령어를 사용하여 asset 을 컴파일 할 수 있습니다. Webpack은 현대적인 자바스크립트 애플리케이션을 위한 모듈 번들러 입니다. npm run dev 명령어를 실행하면, Webpack 는 webpack.mix.js 파일안에 있는 명령어들을 실행할 것입니다.

npm run dev

기본적으로 라라벨의 webpack.mix.js 파일은 SASS 와 resources/js/app.js파일을 컴파일 합니다. app.js 파일 안에서 Vue 컴포넌트나, 다른 프레임워크를 좋아한다면, 고유한 자바스크립트 애플리케이션을 구성할 수 있습니다. 컴파일된 자바스크립트는 일반적으로 public/js 디렉토리 안에 위치할 것입니다.

{tip} app.js 파일은 resources/js/bootstrap.js을 로드하여 Vue, Axios, jQuery 그리고 다른 모든 자바스크립트 의존성들을 설정하고 구동할 것입니다. 만약 추가적인 자바스크립트 의존성을 설정해야 한다면, 이 파일안에서 할 수 있습니다.

Vue 컴포넌트 작성하기

laravel/ui 패키지를 사용하여 프론트엔드를 스캐폴딩하면 ExampleComponent.vue Vue 컴포넌트가 resources/js/components 디렉토리에 배치됩니다. ExampleComponent.vue 파일은 동일한 파일 안에서 자바스크립트와 HTML 템플릿을 정의한 파일 하나로 된 Vue 컴포넌트의 예제 입니다. 하나의 파일로된 컴포넌트는 자바스크립트 기반의 애플리케이션을 구성하는데 매우 편리한 방법을 제공합니다. 이 예제 컴포넌트는 app.js 에 등록되어 있습니다.

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

애플리케이션에서 이 컴포넌트를 사용하려면, HTML 템플릿 안에 등록하면 됩니다. 예를 들어 애플리케이션의 인증과 회원 가입 화면을 스캐폴딩 하기 위해서 php artisan ui vue --auth 아티즌 명령어를 실행 한 다음에 컴포넌트를 home.blade.php 블레이드 템플릿 안에 등록할 수 있습니다.

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

{tip} 주의할 것은, Vue 컴포넌트가 바뀔 때 마다 npm run dev 명령어를 실행해야 한다는 것입니다. 또는 npm run watch 명령어를 실행하여 파일들이 변경될 때 이를 모니터링 하고 있다가 자동으로 다시 컴파일 하도록 할 수 있습니다.

Vue 컴포넌트를 작성하는데 관심이 있다면, 전체 Vue 프레임워크에 대해서 개념을 손쉽게 읽을 수 있는 Vue 매뉴얼을 확인하길 바랍니다.

React 사용하기

React를 사용하여 JavaScript 애플리케이션을 빌드하려는 경우 Laravel은 Vue 스캐폴딩을 React 스캐폴딩으로 교체 할 수 있습니다.

composer require laravel/ui

// Generate basic scaffolding...
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui react --auth

프리셋-Presets 추가하기

프리셋-Presets은 "macroable"하여 런타임에 UiCommand 클래스에 메소드를 추가 할 수 있습니다. 예를 들어, 다음 코드는 nextjs 메소드를 UiCommand 클래스에 추가합니다. 일반적으로 서비스 프로바이더에서 프리셋 매크로를 선언해야합니다.

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // Scaffold your frontend...
});

그런 다음 ui 명령을 통해 새로운 프리셋을 호출 할 수 있습니다.

php artisan ui nextjs

JavaScript & CSS Scaffolding

• Introduction
• Writing CSS
• Writing JavaScript
  • Writing Vue Components
  • Using React
• Adding Presets

Introduction

While Laravel does not dictate which JavaScript or CSS pre-processors you use, it does provide a basic starting point using Bootstrap, React, and / or Vue that will be helpful for many applications. By default, Laravel uses NPM to install both of these frontend packages.

The Bootstrap and Vue scaffolding provided by Laravel is located in the laravel/ui Composer package, which may be installed using Composer:

composer require laravel/ui:^2.4

Once the laravel/ui package has been installed, you may install the frontend scaffolding using the ui Artisan command:

// Generate basic scaffolding...
php artisan ui bootstrap
php artisan ui vue
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui bootstrap --auth
php artisan ui vue --auth
php artisan ui react --auth

CSS

Laravel Mix provides a clean, expressive API over compiling SASS or Less, which are extensions of plain CSS that add variables, mixins, and other powerful features that make working with CSS much more enjoyable. In this document, we will briefly discuss CSS compilation in general; however, you should consult the full Laravel Mix documentation for more information on compiling SASS or Less.

JavaScript

Laravel does not require you to use a specific JavaScript framework or library to build your applications. In fact, you don't have to use JavaScript at all. However, Laravel does include some basic scaffolding to make it easier to get started writing modern JavaScript using the Vue library. Vue provides an expressive API for building robust JavaScript applications using components. As with CSS, we may use Laravel Mix to easily compile JavaScript components into a single, browser-ready JavaScript file.

Writing CSS

After installing the laravel/ui Composer package and generating the frontend scaffolding, Laravel's package.json file will include the bootstrap package to help you get started prototyping your application's frontend using Bootstrap. However, feel free to add or remove packages from the package.json file as needed for your own application. You are not required to use the Bootstrap framework to build your Laravel application - it is provided as a good starting point for those who choose to use it.

Before compiling your CSS, install your project's frontend dependencies using the Node package manager (NPM):

npm install

Once the dependencies have been installed using npm install, you can compile your SASS files to plain CSS using Laravel Mix. The npm run dev command will process the instructions in your webpack.mix.js file. Typically, your compiled CSS will be placed in the public/css directory:

npm run dev

The webpack.mix.js file included with Laravel's frontend scaffolding will compile the resources/sass/app.scss SASS file. This app.scss file imports a file of SASS variables and loads Bootstrap, which provides a good starting point for most applications. Feel free to customize the app.scss file however you wish or even use an entirely different pre-processor by configuring Laravel Mix.

Writing JavaScript

All of the JavaScript dependencies required by your application can be found in the package.json file in the project's root directory. This file is similar to a composer.json file except it specifies JavaScript dependencies instead of PHP dependencies. You can install these dependencies using the Node package manager (NPM):

npm install

{tip} By default, the Laravel package.json file includes a few packages such as lodash and axios to help you get started building your JavaScript application. Feel free to add or remove from the package.json file as needed for your own application.

Once the packages are installed, you can use the npm run dev command to compile your assets. Webpack is a module bundler for modern JavaScript applications. When you run the npm run dev command, Webpack will execute the instructions in your webpack.mix.js file:

npm run dev

By default, the Laravel webpack.mix.js file compiles your SASS and the resources/js/app.js file. Within the app.js file you may register your Vue components or, if you prefer a different framework, configure your own JavaScript application. Your compiled JavaScript will typically be placed in the public/js directory.

{tip} The app.js file will load the resources/js/bootstrap.js file which bootstraps and configures Vue, Axios, jQuery, and all other JavaScript dependencies. If you have additional JavaScript dependencies to configure, you may do so in this file.

Writing Vue Components

When using the laravel/ui package to scaffold your frontend, an ExampleComponent.vue Vue component will be placed in the resources/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. The example component is registered in your app.js file:

Vue.component(
    'example-component',
    require('./components/ExampleComponent.vue').default
);

To use the component in your application, you may drop it into one of your HTML templates. For example, after running the php artisan ui vue --auth Artisan command to scaffold your application's authentication and registration screens, you could drop the component into the home.blade.php Blade template:

@extends('layouts.app')

@section('content')
    <example-component></example-component>
@endsection

{tip} Remember, you should run the npm run dev command each time you change a Vue component. Or, you may run the npm run watch command to monitor and automatically recompile your components each time they are modified.

If you are interested in learning more about writing Vue components, you should read the Vue documentation, which provides a thorough, easy-to-read overview of the entire Vue framework.

Using React

If you prefer to use React to build your JavaScript application, Laravel makes it a cinch to swap the Vue scaffolding with React scaffolding:

composer require laravel/ui

// Generate basic scaffolding...
php artisan ui react

// Generate login / registration scaffolding...
php artisan ui react --auth

Adding Presets

Presets are "macroable", which allows you to add additional methods to the UiCommand class at runtime. For example, the following code adds a nextjs method to the UiCommand class. Typically, you should declare preset macros in a service provider:

use Laravel\Ui\UiCommand;

UiCommand::macro('nextjs', function (UiCommand $command) {
    // Scaffold your frontend...
});

Then, you may call the new preset via the ui command:

php artisan ui nextjs