배포: 2024-02-06

environment/why-do-you-use-import-meta-in-vite/index.html

@@ -207,7 +207,7 @@ <h3 id="dotenv" style="position:relative;">dotenv<a href="#dotenv" aria-label="d
 <blockquote>
 <p>※ Vite로 마이그레이션을 진행할 때도, package.json에 위와 같이 <code class="language-text">"type": "module"</code> 을 넣어주어야 하는데 Vite는 기본적으로 ESM 방식으로 동작한다.</p>
 </blockquote>
-<p>참고고, <code class="language-text">main.js</code> 파일을, <code class="language-text">main.mjs</code> 라는 확장자를 붙여주면 Node.js에서 알아서 ESM으로 동작하게 되기 때문에 package.json에 따로 붙여줄 필요는 없다.</p>
+<p>참고로, <code class="language-text">main.js</code> 파일을, <code class="language-text">main.mjs</code> 라는 확장자를 붙여주면 Node.js에서 알아서 ESM으로 동작하게 되기 때문에 package.json에 따로 붙여줄 필요는 없다.</p>
 <p>vue-cli는 @vue/cli-services 패키지 내에서 사용하고 있고, CRA 같은 경우 react-scripts 라이브러리 내부 package.json에 <code class="language-text">dotenv</code> 을 사용하고 있으며 Next.js도 내부적으로 dotenv 라이브러리를 이용해 <code class="language-text">.env</code> 파일을 가져오고 있다.</p>
 <blockquote>
 <p>※ <a href="https://nodejs.org/dist/latest-v20.x/docs/api/cli.html#--env-fileconfig" target="_blank" rel="nofollow">—env-file</a></p>

rss.xml

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Pozafly's 블로그]]></title><description><![CDATA[Pozafly's Blog]]></description><link>https://pozafly.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Mon, 05 Feb 2024 00:17:32 GMT</lastBuildDate><item><title><![CDATA[Vite에서 import.meta는 왜 사용하는 걸까? (feat. HMR)]]></title><description><![CDATA[회사에서 vue-cli로 만들어진 프로젝트를 Vite로 마이그레이션을 진행 중이다. vue-cli는 2년 전부터 maintenance mode(deprecated)에 들어갔고, webpack…]]></description><link>https://pozafly.github.io/environment/why-do-you-use-import-meta-in-vite/</link><guid isPermaLink="false">https://pozafly.github.io/environment/why-do-you-use-import-meta-in-vite/</guid><pubDate>Sun, 04 Feb 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;회사에서 vue-cli로 만들어진 프로젝트를 Vite로 마이그레이션을 진행 중이다. &lt;a href=&quot;https://github.com/vuejs/vue-cli&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;vue-cli&lt;/a&gt;는 2년 전부터 maintenance mode(deprecated)에 들어갔고, webpack을 기반으로 만들어졌기 때문에 번들링 및 빌드 할 때 무척 느리다. vue-cli 패키지 내부에는 eslint, prettier가 vue-cli에 맞게 묶여있었는데 최신 버전의 eslint, prettier 버전을 사용하고 싶어도 호환이 되지 않았다. 그래서 vue-cli 대신 번들러를 바꿔 개발 환경을 최신화하기로 했다.&lt;/p&gt;
+<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Pozafly's 블로그]]></title><description><![CDATA[Pozafly's Blog]]></description><link>https://pozafly.github.io</link><generator>GatsbyJS</generator><lastBuildDate>Tue, 06 Feb 2024 05:13:03 GMT</lastBuildDate><item><title><![CDATA[Vite에서 import.meta는 왜 사용하는 걸까? (feat. HMR)]]></title><description><![CDATA[회사에서 vue-cli로 만들어진 프로젝트를 Vite로 마이그레이션을 진행 중이다. vue-cli는 2년 전부터 maintenance mode(deprecated)에 들어갔고, webpack…]]></description><link>https://pozafly.github.io/environment/why-do-you-use-import-meta-in-vite/</link><guid isPermaLink="false">https://pozafly.github.io/environment/why-do-you-use-import-meta-in-vite/</guid><pubDate>Sun, 04 Feb 2024 00:00:00 GMT</pubDate><content:encoded>&lt;p&gt;회사에서 vue-cli로 만들어진 프로젝트를 Vite로 마이그레이션을 진행 중이다. &lt;a href=&quot;https://github.com/vuejs/vue-cli&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;vue-cli&lt;/a&gt;는 2년 전부터 maintenance mode(deprecated)에 들어갔고, webpack을 기반으로 만들어졌기 때문에 번들링 및 빌드 할 때 무척 느리다. vue-cli 패키지 내부에는 eslint, prettier가 vue-cli에 맞게 묶여있었는데 최신 버전의 eslint, prettier 버전을 사용하고 싶어도 호환이 되지 않았다. 그래서 vue-cli 대신 번들러를 바꿔 개발 환경을 최신화하기로 했다.&lt;/p&gt;
 &lt;p&gt;예전부터 사용해 보고 싶었던 번들러는 Vite다. Vite의 가장 큰 특징은 devServer에서 소스코드와 디펜던시를 두 가지 카테고리로 나누어 빌드하고, ESM 환경인 브라우저에 빠르게 제공한다는 점이다. devServer가 cold-start 될 때 현재 페이지에서 필요한 정보만 아주 빠르게 실행시킬 수 있다. 이 말은, 코드 베이스 또는 라이브러리(사용하고 있는 node_modules 디펜던시)의 모든 파일을 번들링 하여 제공하는 것이 아니라, 현재 필요한 모듈만 골라내어 빠르게 제공한다는 뜻이다. Vite 가이드에서 가장 먼저 이야기하고 있는 것이 ESM을 통한 devServer start 속도이다.&lt;/p&gt;
 &lt;p&gt;사전 번들링은, esBuild를 통해 디펜던시를 빌드하고 변경이 잦은 소스코드는 ESM으로 제공한다. 기존에 Webpack과 같은 번들러는 모든 파일을 빌드 및 번들링 해야만 브라우저에서 구동이 가능했다. Vite는 소스코드를 ESM으로 제공하기 때문에 브라우저에서 동적 import를 통해 원하는 JavaScript 파일만 실행시킬 수 있다. 이 매커니즘에 따라 Webpack의 Node.js에서만 가능했던 기능이 브라우저에서 동작하기 위해 어떻게 Vite가 해결했는지를 알아볼 것이다.&lt;/p&gt;
 &lt;br/&gt;
@@ -96,7 +96,7 @@ console&lt;span class=&quot;token punctuation&quot;&gt;.&lt;/span&gt;&lt;span cl
 &lt;blockquote&gt;
 &lt;p&gt;※ Vite로 마이그레이션을 진행할 때도, package.json에 위와 같이 &lt;code class=&quot;language-text&quot;&gt;&quot;type&quot;: &quot;module&quot;&lt;/code&gt; 을 넣어주어야 하는데 Vite는 기본적으로 ESM 방식으로 동작한다.&lt;/p&gt;
 &lt;/blockquote&gt;
-&lt;p&gt;참고고, &lt;code class=&quot;language-text&quot;&gt;main.js&lt;/code&gt; 파일을, &lt;code class=&quot;language-text&quot;&gt;main.mjs&lt;/code&gt; 라는 확장자를 붙여주면 Node.js에서 알아서 ESM으로 동작하게 되기 때문에 package.json에 따로 붙여줄 필요는 없다.&lt;/p&gt;
+&lt;p&gt;참고로, &lt;code class=&quot;language-text&quot;&gt;main.js&lt;/code&gt; 파일을, &lt;code class=&quot;language-text&quot;&gt;main.mjs&lt;/code&gt; 라는 확장자를 붙여주면 Node.js에서 알아서 ESM으로 동작하게 되기 때문에 package.json에 따로 붙여줄 필요는 없다.&lt;/p&gt;
 &lt;p&gt;vue-cli는 @vue/cli-services 패키지 내에서 사용하고 있고, CRA 같은 경우 react-scripts 라이브러리 내부 package.json에 &lt;code class=&quot;language-text&quot;&gt;dotenv&lt;/code&gt; 을 사용하고 있으며 Next.js도 내부적으로 dotenv 라이브러리를 이용해 &lt;code class=&quot;language-text&quot;&gt;.env&lt;/code&gt; 파일을 가져오고 있다.&lt;/p&gt;
 &lt;blockquote&gt;
 &lt;p&gt;※ &lt;a href=&quot;https://nodejs.org/dist/latest-v20.x/docs/api/cli.html#--env-fileconfig&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;—env-file&lt;/a&gt;&lt;/p&gt;