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

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

`npm run dev`와 `npm run build`

<p></p><h3>config\filesystem.php 내용 추가</h3><pre spellcheck="false"><code class="language-php">        'custom' =&gt; [
            'driver' =&gt; 'local',
            'root' =&gt; 'D:/Data',
        ],</code></pre><p>이름은 custom으로 지정했고, 호스팅 경로는 C:\xampp\~~~~ 이지만</p><p>데이터는 D:\Data 라는 경로에 저장되도록 하려면 config\filesystem.php를 수정한다.</p><p></p><p>결과물은 아래와 같다.</p><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><p></p><p>아래 명령을 통해 config\livewire.php 파일 생성</p><pre spellcheck="false"><code>php artisan livewire:publish --config</code></pre><p></p><p>livewire 설정에서 disk를 아까 설정한 custom으로 지정해주고 rules를 적절히 설정해준다.</p><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><p></p><p></p>

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

File upload 저장 경로 지정하기

🍎 Mac

<blockquote><p>해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 <a target="_blank" rel="noopener noreferrer nofollow" href="https://until.blog/@morethanmin/%EC%9C%88%EB%8F%84%EC%9A%B0%EC%97%90%EC%84%9C-winget%EC%9C%BC%EB%A1%9C-fnm-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0--fast-node-manager-">이 아티클</a>을 참고해주세요.</p></blockquote><p>node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 <code spellcheck="false">.nvmrc</code> 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.</p><p>이럴 때 사용할 수 있는 것이 바로 nvm(node version manager)입니다. nvm은 여러 버전의 node를 설치하고 실행할 수 있도록 도와주고, 또 <code spellcheck="false">.nvmrc</code> 파일을 읽어들여 프로젝트에 맞는 node 버전을 자동으로 설정해줄 수도 있습니다.</p><h1>NVM 설치하기</h1><p>아래 커맨드를 터미널에 입력하여 nvm을 설치해봅시다. curl또는 wget또는 brew 통해 설치하시면 됩니다.</p><h2>curl</h2><pre spellcheck="false"><code class="language-bash">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>wget</h2><pre spellcheck="false"><code class="language-bash">wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash</code></pre><h2>brew</h2><pre spellcheck="false"><code class="language-bash">brew install nvm</code></pre><h1>환경변수 설정</h1><p>nvm을 설치하셨다면 환경 변수를 설정해야합니다. 본인의 터미널 환경에 맞게 <code spellcheck="false">~/.bash_profile</code>, <code spellcheck="false">~/.zshrc</code>, <code spellcheck="false">~/.profile</code>, <code spellcheck="false">~/.bashrc</code> 중 한곳으로 이동하여 아래 추가하시면 됩니다.</p><pre spellcheck="false"><code class="language-bash">export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] &amp;&amp; printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] &amp;&amp; \. "$NVM_DIR/nvm.sh" # This loads nvm</code></pre><p>이후 터미널을 재부팅하거나 아래 커맨드를 입력하면 환경변수가 적용됩니다.</p><pre spellcheck="false"><code>source ~/.bash_profile</code></pre><h1>nvm 사용법</h1><p>가장 많이 사용하는 명령어 위주로 알아보겠습니다.</p><ul><li><p><code spellcheck="false">nvm ls</code>: 현재 설치된 node 버전을 확인할 수 있습니다.</p></li><li><p><code spellcheck="false">nvm use &lt;version&gt;</code>:  특정 버전의 node를 사용합니다. 커맨드를 실행하는 디렉터리에 <code spellcheck="false">.nvmrc</code> 를 통해 버전이 명시되어있다면 version을 생략할 수 있어요.</p></li><li><p><code spellcheck="false">nvm install &lt;version&gt;</code> : 특정 버전의 node를 설치합니다.</p></li><li><p><code spellcheck="false">nvm uninstall &lt;version&gt;</code> : 특정 버전의 node를 제거합니다.</p></li></ul><h1><code spellcheck="false">.nvmrc</code> </h1><p>프로젝트 root에 <code spellcheck="false">.nvmrc</code>파일을 생성하고 현재 노드버전을 입력해두면 해당 프로젝트에서 사용하는 node 버전을 명시해 둘 수 있고, <code spellcheck="false">nvm use</code>를 통해 바로 해당 버전의 node를 사용할 수 있습니다.</p><h1>프로젝트별 node 버전 자동으로 적용하기</h1><p>현재 디렉터리에 <code spellcheck="false">.nvmrc</code> 가 존재하는지 확인하고 있다면 nvm use를 자동으로 실행하는 스크립트를 적용시켜봅시다.</p><h2>script 사용하는 방법</h2><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/nvm-sh/nvm?tab=readme-ov-file#deeper-shell-integration">공식문서</a>에 나와있는 스크립트를 사용하여 적용할 수 있습니다. bash와 zsh 터미널에 대한 스크립트를 제공하고 있습니다. 둘 중 본인이 사용하는 터미널에 맞는 스크립트를 적용하시면 됩니다.</p><h2>bash</h2><p>아래 코드를  <code spellcheck="false">$HOME/.bashrc</code>에 입력후 저장해주면 됩니다. </p><pre spellcheck="false"><code>cdnvm() {
    command cd "$@" || return $?
    nvm_path="$(nvm_find_up .nvmrc | command tr -d '\n')"

    # If there are no .nvmrc file, use the default nvm version
    if [[ ! $nvm_path = *[^[:space:]]* ]]; then

        declare default_version
        default_version="$(nvm version default)"

        # If there is no default version, set it to `node`
        # This will use the latest version on your machine
        if [ $default_version = 'N/A' ]; then
            nvm alias default node
            default_version=$(nvm version default)
        fi

        # If the current version is not the default version, set it to use the default version
        if [ "$(nvm current)" != "${default_version}" ]; then
            nvm use default
        fi
    elif [[ -s "${nvm_path}/.nvmrc" &amp;&amp; -r "${nvm_path}/.nvmrc" ]]; then
        declare nvm_version
        nvm_version=$(&lt;"${nvm_path}"/.nvmrc)

        declare locally_resolved_nvm_version
        # `nvm ls` will check all locally-available versions
        # If there are multiple matching versions, take the latest one
        # Remove the `-&gt;` and `*` characters and spaces
        # `locally_resolved_nvm_version` will be `N/A` if no local versions are found
        locally_resolved_nvm_version=$(nvm ls --no-colors "${nvm_version}" | command tail -1 | command tr -d '\-&gt;*' | command tr -d '[:space:]')

        # If it is not already installed, install it
        # `nvm install` will implicitly use the newly-installed version
        if [ "${locally_resolved_nvm_version}" = 'N/A' ]; then
            nvm install "${nvm_version}";
        elif [ "$(nvm current)" != "${locally_resolved_nvm_version}" ]; then
            nvm use "${nvm_version}";
        fi
    fi
}

alias cd='cdnvm'
cdnvm "$PWD" || exit</code></pre><h2>zsh</h2><pre spellcheck="false"><code># place this after nvm initialization!
autoload -U add-zsh-hook

load-nvmrc() {
  local nvmrc_path
  nvmrc_path="$(nvm_find_nvmrc)"

  if [ -n "$nvmrc_path" ]; then
    local nvmrc_node_version
    nvmrc_node_version=$(nvm version "$(cat "${nvmrc_path}")")

    if [ "$nvmrc_node_version" = "N/A" ]; then
      nvm install
    elif [ "$nvmrc_node_version" != "$(nvm version)" ]; then
      nvm use
    fi
  elif [ -n "$(PWD=$OLDPWD nvm_find_nvmrc)" ] &amp;&amp; [ "$(nvm version)" != "$(nvm version default)" ]; then
    echo "Reverting to nvm default version"
    nvm use default
  fi
}

add-zsh-hook chpwd load-nvmrc
load-nvmrc</code></pre><h2>vsCode extension 사용하기</h2><p>만약 본인이 vsCode를 사용한다면 <a target="_blank" rel="noopener noreferrer nofollow" href="https://marketplace.visualstudio.com/items?itemName=henrynguyen5-vsc.vsc-nvm">vsc-nvm</a> 익스텐션을 사용할 수도 있습니다.</p><p>해당 extension을 설치하고 vscode를 재부팅하면 바로 적용됩니다. </p><p></p>

해당 아티클은 mac 기준으로 작성되었습니다. window의 경우에는 이 아티클을 참고해주세요.node를 사용해 개발하다보면 다양한 node 버전에서 개발이 필요한 경우가 있습니다. 실제로 여러 프로젝트를 살펴보면 .nvmrc 라는 파일에 node 버전이 표시되어있는 경우도 종종 볼 수 있는데요.이럴 때 사용할 수 있는 것이 바로 nvm(node versi

nvm 으로 node 버전 관리하기 (+ 자동화)

🪟 Window

<img src="https://image.until.blog/morethanmin/article/1716653810238" data-width="50%" data-align="center" alt="until-223"><p>나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.</p><p>그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.</p><h1>PowerToys?</h1><p>마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.</p><p>매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라면 꼭 설치하길 추천한다.</p><p>이 아티클에서는 대표적으로 몇가지만 소개해보겠다.</p><h2>PowerToys Run</h2><p><code spellcheck="false">Alt</code> + <code spellcheck="false">Space</code> 를 통해 아래와 같은 검색창을 띄워준다. 맥하고 비슷하게 생겼다.</p><img src="https://image.until.blog/morethanmin/article/1716654162354" data-width="100%" data-align="center" alt="until-225"><h2>Keyboard Manager</h2><p>키보드 키 및 단축키들을 쉽게 매핑해줄 수 있다. 우리는 이것을 사용해서 맥 단축키들을 적용시키면 된다.</p><img src="https://image.until.blog/morethanmin/article/1716654104729" data-width="100%" data-align="center" alt="until-224"><h2>환경 변수</h2><p>환경변수를 GUI에서 쉽게 변경가능하다. 개꿀이다.</p><img src="https://image.until.blog/morethanmin/article/1716654251418" data-width="100%" data-align="center" alt="until-226"><h2>호스트 파일 편집기</h2><p>호스트 파일을 GUI에서 변경이 가능하다.</p><img src="https://image.until.blog/morethanmin/article/1716654321543" data-width="100%" data-align="center" alt="until-227"><h1>설치하기</h1><p>PowerShell에 아래 커맨드를 입력하면 된다.</p><pre spellcheck="false"><code>winget install Microsoft.PowerToys --source winget</code></pre><h1>적용</h1><p>사실 모든 단축키를 매핑할 순 없다보니, 적당한 수준에서 본인이 주로 사용하는 단축키를 설정해주면 된다.</p><p>나는 아래와 같이 적용했다. 귀찮은 사람은 참고하면 좋을뜻</p><img src="https://image.until.blog/morethanmin/article/1716654467615" data-width="100%" data-align="center" alt="until-228"><p></p><p></p>

나는 집에서는 데스크탑을 사용하다보니 맥북과 오갈 때마다 단축키가 달라서 매번 매우 불편했다.그래서 찾아보니 PowerToys를 사용하면 맥북 단축키를 윈도우에 적용 할 수 있다고 해서 소개해보려고한다.PowerToys?마소에서 제작한 생산성을 높일 수 있는 다양한 유틸리티 세트를 제공하는 프로그램이다.매우 다양한 기능들이 있으니 윈도우를 사용하는 개발자라

윈도우에서 맥 단축키 적용하기(PowerToys)

Notice

<p>안녕하세요. 투얼리입니다. 앞으로 그 때 그때 들은 앨범을 리스닝로그로 정리해 올릴 생각입니다. 잘 부탁드립니다!아래는 예시 이미지입니다.</p><img src="https://image.until.blog/tooearly/article/1716023988210" alt="until-65">

듣고 있는 앨범을 정리해 업로드합니다.

리스닝로그 예시