<h3>1. <code spellcheck="false">npm run dev</code>를 하는 이유</h3><ul class="tight" data-tight="true"><li><code spellcheck="false">npm run dev</code>는 개발 환경에서 프로젝트를 실행하는 명령어입니다.</li><li>이 명령어를 실행하면 개발 서버가 실행되며, 소스 코드 변경 시 실시간으로 페이지가 새로고침되는 핫 모듈 교체(Hot Module Replacement) 기능이 활성화됩니다.</li><li>이를 통해 개발자는 빠르게 코드를 작성하고 테스트할 수 있습니다.</li></ul><h3>2. <code spellcheck="false">npm run build</code>와의 차이</h3><ul class="tight" data-tight="true"><li><code spellcheck="false">npm run build</code>는 프로덕션 환경을 위한 최적화된 빌드를 생성하는 명령어입니다.</li><li>이 명령어를 실행하면 JavaScript, CSS 등의 자산 파일이 압축되고 최적화되어 프로덕션 환경에 배포할 수 있는 버전이 생성됩니다.</li><li>반면 <code spellcheck="false">npm run dev</code>는 개발 환경에 최적화되어 있어 소스 맵 생성, 핫 모듈 교체 등의 기능이 활성화됩니다.</li></ul><h3>3. <code spellcheck="false">npm run dev</code>를 하지 않으면 Laravel 페이지가 이상하게 보이는 이유</h3><ul class="tight" data-tight="true"><li>Laravel 프로젝트에서 Vite를 사용하는 경우, <code spellcheck="false">npm run dev</code> 명령어는 Vite 개발 서버를 실행하여 자산 파일(CSS, JavaScript 등)을 실시간으로 컴파일하고 제공합니다.</li><li><code spellcheck="false">npm run dev</code>를 실행하지 않으면 Vite가 자산 파일을 컴파일하지 않아 페이지에 스타일이나 동작이 제대로 적용되지 않습니다.</li><li>따라서 Laravel 프로젝트에서 Vite를 사용하는 경우, <code spellcheck="false">npm run dev</code> 명령어를 실행하여 개발 서버를 실행해야 합니다.</li></ul>요약하면, <code spellcheck="false">npm run dev</code>는 개발 환경에서 프로젝트를 실행하고 실시간 변경 사항을 반영하는 데 사용되며, <code spellcheck="false">npm run build</code>는 프로덕션 환경을 위한 최적화된 빌드를 생성하는 데 사용됩니다. Laravel 프로젝트에서 Vite를 사용하는 경우, <code spellcheck="false">npm run dev</code>를 실행하지 않으면 자산 파일이 제대로 컴파일되지 않아 페이지가 이상하게 보일 수 있습니다.

1. npm run dev를 하는 이유npm run dev는 개발 환경에서 프로젝트를 실행하는 명령어입니다.이 명령어를 실행하면 개발 서버가 실행되며, 소스 코드 변경 시 실시간으로 페이지가 새로고침되는 핫 모듈 교체(Hot Module Replacement) 기능이 활성화됩니다.이를 통해 개발자는 빠르게 코드를 작성하고 테스트할 수 있습니다.2. npm 

`npm run dev`와 `npm run build`

<h3>config\filesystem.php 내용 추가</h3><pre spellcheck="false"><code class="language-php"> 'custom' =&gt; [
 'driver' =&gt; 'local',
 'root' =&gt; 'D:/Data',
 ],</code></pre>이름은 custom으로 지정했고, 호스팅 경로는 C:\xampp\~~~~ 이지만데이터는 D:\Data 라는 경로에 저장되도록 하려면 config\filesystem.php를 수정한다.결과물은 아래와 같다.<h3>config\filesystem.php</h3><pre spellcheck="false"><code class="language-php"> 'disks' =&gt; [
 'custom' =&amp;gt; [
 'driver' =&amp;gt; 'local',
 'root' =&amp;gt; 'D:/Data',
 ],

 'local' =&amp;gt; [
 'driver' =&amp;gt; 'local',
 'root' =&amp;gt; storage_path('app'),
 'throw' =&amp;gt; false,
 ],

 'public' =&amp;gt; [
 'driver' =&amp;gt; 'local',
 'root' =&amp;gt; storage_path('app/public'),
 'url' =&amp;gt; env('APP_URL').'/storage',
 'visibility' =&amp;gt; 'public',
 'throw' =&amp;gt; false,
 ],&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;&lt;/p&gt;&lt;h3&gt;UploadForm.php&lt;/h3&gt;&lt;pre spellcheck="false"&gt;&lt;code class="language-php"&gt;&amp;lt;?phpnamespace App\Livewire;use Livewire\Attributes\Rule;
use Livewire\Component;
use Livewire\WithFileUploads;class UploadForm extends Component
{
use WithFileUploads;#[Rule('required|file|max:102400')] // 1GB Max
public $attachFile;

public function uploadFile()
{
 session()-&amp;gt;flash('message', 'File uploaded successfully: ');
 $this-&amp;gt;validate();

 // 'custom'으로 맵핑된 경로에 'attachFile'이라는 폴더에 저장한다. (없으면 자동 생성)
 $path = $this-&amp;gt;attachFile-&amp;gt;store('attachFile', 'custom');
}

public function render()
{
 return view('livewire.upload-form');
}}</code></pre>아래 명령을 통해 config\livewire.php 파일 생성<pre spellcheck="false"><code>php artisan livewire:publish --config</code></pre>livewire 설정에서 disk를 아까 설정한 custom으로 지정해주고 rules를 적절히 설정해준다.<pre spellcheck="false"><code class="language-php">
 'temporary_file_upload' =&gt; [
 'disk' =&gt; 'custom', // Example: 'local', 's3' | Default: 'default'
 'rules' =&gt; 'file|max:1048576', // Example: ['file', 'mimes:png,jpg'] | Default: ['required', 'file', 'max:12288'] (12MB)
 'directory' =&gt; null, // Example: 'tmp' | Default: 'livewire-tmp'
 'middleware' =&gt; null, // Example: 'throttle:5,1' | Default: 'throttle:60,1'
 'preview_mimes' =&gt; [ // Supported file types for temporary pre-signed file URLs...
 'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
 'mov', 'avi', 'wmv', 'mp3', 'm4a',
 'jpg', 'jpeg', 'mpga', 'webp', 'wma',
 ],
 'max_upload_time' =&gt; 5, // Max duration (in minutes) before an upload is invalidated...
 'cleanup' =&gt; true, // Should cleanup temporary uploads older than 24 hrs...
 ],</code></pre>

config\filesystem.php 내용 추가        'custom' =&gt; [
            'driver' =&gt; 'local',
            'root' =&gt; 'D:/Data',
        ],이름은 custom으로 지정했고, 호스팅 경로는 C:\xampp\    'custom' =&amp;gt; [
     