<div id="readability-page-1" class="page"><p><cite>Suhyeon Lee</cite>
                                    <span> 2023. 5. 24. 02:08</span>
                                </p><div>
                                <p data-ke-size="size16">원티드 프리온보딩 4월 챌린지를 수강할 때 vite를 얕게 배웠었고, 빌드 속도가 매우 빨라진다는 점을 듣고 현재 진행하고 있는 프로젝트에도 적용하면 좋을 것 같아 Vite를 사용해보고자 했습니다.</p>
<p data-ke-size="size16">이미 많이 진행된 프로젝트에 번들러를 webpack에서 vite로 바꾸는 과정을 진행했습니다.</p>

<h2 data-ke-size="size26">Vite</h2>
<p data-ke-size="size16">Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구입니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다.</p>

<h2 data-ke-size="size26">Vite가 빠른 이유</h2>
<ul data-ke-list-type="disc">
<li>개발 서버: Webpack의 번들 기반 개발 서버는 소스 코드와 모든 종속 관계의 모듈을 번들링 후 서버가 준비됩니다. 반면에 Vite는 극단적으로 빠른 Esbuild로 미리 번들링 한 모듈을 필요시 동적으로 가져오므로 명령 시 즉각적으로 서버가 구동됩니다.</li>
<li>프로덕션 빌드: 프로덕션 빌드에 필요한 기능이 미비한 Esbuild 대신 사용한 Rollup은 각 모듈을 개별적인 범위의 함수로 맵핑하여 결합하는 Webpack 방식과 달리 하나의 파일에 모든 종속 모듈을 전역 범위로 선언해 결합합니다. 따라서 중복제거 및 가볍고 빠른 빌드 결과를 냅니다.</li>
</ul>

<h2 data-ke-size="size26">Webpack에서 Vite로의 마이그레이션 과정</h2>
<p data-ke-size="size16">Vite의 설정 파일들을 옮겨오기 위해 빈 Vite 프로젝트를 생성합니다.</p>
<p data-ke-size="size16">참고로 Vite는 14.18 또는 16 이상의 Node.js를 요구합니다.</p>

<h3 data-ke-size="size23">1. vite 프로젝트 생성</h3>
<pre><code>yarn create vite[프로젝트 명] --template react-ts
</code></pre>

<h3 data-ke-size="size23">2. 생성된 vite 프로젝트의 package.json 파일의 Script 명령줄과 devDependencies의 Vite 관련 내용을 마이그레이션 할 기존 프로젝트 package.json으로 복사</h3>
<pre><code>"scripts": {
    "start": "vite",
    "build": "tsc &amp;&amp; vite build",
    "preview": "vite preview"
  },

"devDependencies": {
		...생략...
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.2"
  }
</code></pre>
<p data-ke-size="size16">생성된 vite 프로젝트에는 “dev” : “vite”라고 되어 있지만, 기존 프로젝트에 맞추기 위해 dev가 아니라 start로 복사했습니다.</p>

<h3 data-ke-size="size23">3. 기존 프로젝트의 node_modules 디렉토리를 제거 한 후 재설치</h3>
<pre><code>rm -rf ./node_modules/
</code></pre>

<h3 data-ke-size="size23">4. 설정 파일 복사</h3>
<figure data-ke-mobilestyle="widthOrigin" data-filename="설정파일.png" data-origin-width="546" data-origin-height="664">
    <span data-url="https://blog.kakaocdn.net/dn/bbxfTf/btsg9vXAmoK/DNyTVfqnBx2Yf8zJUY95r1/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bbxfTf/btsg9vXAmoK/DNyTVfqnBx2Yf8zJUY95r1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="설정파일.png" data-origin-width="546" data-origin-height="664">
    </span>
    
</figure>
<p data-ke-size="size16"><span>&nbsp;tsconfig.json: 기존 프로젝트에서 추가했던 compilerOptions이 있다면 복사해온 tsconfig.json에도 추가합니다.</span></p>
<p data-ke-size="size16">src/vite-env.d.ts: 기존 프로젝트의&nbsp;src/react-app-env.d.ts&nbsp;파일에 추가한 내용이 있다면&nbsp;src/vite-env.d.ts에도 추가합니다. 기존 프로젝트의&nbsp;src/react-app-env.d.ts&nbsp;파일은 제거합니다.</p>

<h3 data-ke-size="size23">5. 기존 프로젝트에 있는 public/index.html 파일의 이동</h3>
<p data-ke-size="size16">기존 프로젝트의 public/index.html을 루트 디렉토리로 이동 후 index.html의 &lt;body&gt;에 아래 내용을 추가합니다.</p>
<pre><code>&lt;body&gt;
  &lt;div id="root"&gt;&lt;/div&gt;
  &lt;script type="module" src="/src/index.tsx"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>
<p data-ke-size="size16">5번까지가 기본 설정이고, 이후 에러를 해결하기 위해 아래와 같은 설정을 했습니다.</p>

<h2 data-ke-size="size26">트러블 슈팅</h2>
<h3 data-ke-size="size23">1. 절대 경로 사용</h3>
<p data-ke-size="size16">기존 프로젝트에서 작성된 절대 경로의 설정 방식을 변경했습니다.</p>
<pre><code>import MindSpaceText from '@/images/MindSpaceText.png';
</code></pre>

<p data-ke-size="size16">tsconfig.json 파일과 vite.config.ts 파일을 아래와 같이 변경합니다.</p>
<pre><code>// tsconfig.json
"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
},
</code></pre>
<pre><code>// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';                      // 추가

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),    // 추가
    },
  },
});
</code></pre>

<h3 data-ke-size="size23">2. 환경 변수 설정 변경</h3>
<p data-ke-size="size16">기존 프로젝트에서는 REACT_APP_HOST로 api url을 환경변수로 지정했는데, vite에서 접근 가능한 환경 변수는 VITE_를 붙여야 합니다. 따라서 VITE_API_URL로 환경변수 정의 를 변경했습니다.</p>
<pre><code>VITE_API_URL=http://localhost:8080/
</code></pre>
<p data-ke-size="size16">환경변수에 접근하고자 할 때는 ${import.meta.env.VITE_API_URL} 를 사용해서 접근합니다.</p>

<h3 data-ke-size="size23">3. URI malformed 에러 해결</h3>
<p data-ke-size="size16">이제 파일 경로를 못찾는 문제는 발생하지 않았는데, 아래와 같은 에러가 발생했습니다.</p>
<p data-ke-size="size16">[vite] Internal server error: URI malformed</p>
<p data-ke-size="size16"><a href="https://stackoverflow.com/questions/72396236/error-uri-malformed-when-running-react-application-on-mac">https://stackoverflow.com/questions/72396236/error-uri-malformed-when-running-react-application-on-mac</a></p>
<p data-ke-size="size16">구글링으로 stackoverflow에서 알려준 해결 방법으로 index.tsx파일을 변경했더니 해결되었습니다.</p>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link rel="icon" href="/favicon.ico" /&gt;  // "%PUBLIC_URL%" 삭제
    &lt;meta name="viewport" content="width=device-width, initial-scale=1" /&gt;
    &lt;meta name="theme-color" content="#000000" /&gt;
    &lt;meta
      name="description"
      content="Web site created using create-react-app"
    /&gt;
    &lt;title&gt;React App&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id="root"&gt;&lt;/div&gt;
    &lt;script type="module" src="/src/index.tsx"&gt;&lt;/script&gt;  
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style6">
<h2 data-ke-size="size26">결과</h2>
<ul data-ke-list-type="disc">
<li>기존 실행 시간 :</li>
</ul>
<figure data-ke-mobilestyle="widthOrigin" data-filename="기존.png" data-origin-width="138" data-origin-height="48">
    <span data-url="https://blog.kakaocdn.net/dn/deDVGC/btshc6CiLPl/Kg2iKoSklA31REDB72VCbK/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/deDVGC/btshc6CiLPl/Kg2iKoSklA31REDB72VCbK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="기존.png" data-origin-width="138" data-origin-height="48">
    </span>
    
</figure>
<ul data-ke-list-type="disc">
<li>vite 적용 후 실행 시간 :</li>
</ul>
<figure data-ke-mobilestyle="widthOrigin" data-filename="이후.png" data-origin-width="256" data-origin-height="30">
    <span data-url="https://blog.kakaocdn.net/dn/bUgiUI/btsg256Hcde/baGW6iYtJiJOR1c8PwNxuK/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bUgiUI/btsg256Hcde/baGW6iYtJiJOR1c8PwNxuK/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-filename="이후.png" data-origin-width="256" data-origin-height="30">
    </span>
    
</figure>
<p data-ke-size="size16">비교해보면 개발 서버 구동이 매우 단축된 것을 확인할 수 있습니다.</p>

<p data-ke-size="size16">에러를 해결할 때는 삽질을 많이 해서 힘들었으나 서버 구동 시간이 단축된 모습을 보니 웹 개발용 빌드 도구로 vite를 왜 많이 사용하는 지 깨달았습니다. 관심 있으신 분들은 한번 사용해보시는 걸 추천드립니다.</p>
<hr contenteditable="false" data-ke-type="horizontalRule" data-ke-style="style6">
<h3 data-ke-size="size23">REF</h3>
<p data-ke-size="size16"><a href="https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/">https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/</a></p>
            
            
                </div></div>

공부 기록하는 블로그

Suhyeon Lee

원티드 프리온보딩 4월 챌린지를 수강할 때 vite를 얕게 배웠었고, 빌드 속도가 매우 빨라진다는 점을 듣고 현재 진행하고 있는 프로젝트에도 적용하면 좋을 것 같아 Vite를 사용해보고자 했습니다.
이미 많이 진행된 프로젝트에 번들러를 webpack에서 vite로 바꾸는 과정을 진행했습니다.
 
Vite
Vite는 Vue.js 팀이 개발한 웹 개발용 빌드 도구입니다. 인기 비결은 뭐니해도 ‘속도’입니다. 개발과 빌드 속도가 매우 빠릅니다.
 
Vite가 빠른 이유
개발 서버: Webpack의 번들 기반 개발 서버는 소스 코드와 모든 종속 관계의 모듈을 번들링 후 서버가 준비됩니다. 반면에 Vite는 극단적으로 빠른 Esbuild로 미리 번들링 한 모듈을 필요시 동적으로 가져오므로 명령 시 즉각적으로 서버가 구동됩니다.
프로덕션 빌드: 프로덕션 빌드에 필요한 기능이 미비한 Esbuild 대신 사용한 Rollup은 각 모듈을 개별적인 범위의 함수로 맵핑하여 결합하는 Webpack 방식과 달리 하나의 파일에 모든 종속 모듈을 전역 범위로 선언해 결합합니다. 따라서 중복제거 및 가볍고 빠른 빌드 결과를 냅니다.
 
Webpack에서 Vite로의 마이그레이션 과정
Vite의 설정 파일들을 옮겨오기 위해 빈 Vite 프로젝트를 생성합니다.
참고로 Vite는 14.18 또는 16 이상의 Node.js를 요구합니다.
 
1. vite 프로젝트 생성
yarn create vite[프로젝트 명] --template react-ts
 
2. 생성된 vite 프로젝트의 package.json 파일의 Script 명령줄과 devDependencies의 Vite 관련 내용을 마이그레이션 할 기존 프로젝트 package.json으로 복사
"scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
"devDependencies": {
		...생략...
    "@vitejs/plugin-react": "^4.0.0",
    "vite": "^4.3.2"
  }
생성된 vite 프로젝트에는 “dev” : “vite”라고 되어 있지만, 기존 프로젝트에 맞추기 위해 dev가 아니라 start로 복사했습니다.
 
3. 기존 프로젝트의 node_modules 디렉토리를 제거 한 후 재설치
rm -rf ./node_modules/
 
4. 설정 파일 복사
 tsconfig.json: 기존 프로젝트에서 추가했던 compilerOptions이 있다면 복사해온 tsconfig.json에도 추가합니다.
src/vite-env.d.ts: 기존 프로젝트의 src/react-app-env.d.ts 파일에 추가한 내용이 있다면 src/vite-env.d.ts에도 추가합니다. 기존 프로젝트의 src/react-app-env.d.ts 파일은 제거합니다.
 
5. 기존 프로젝트에 있는 public/index.html 파일의 이동
기존 프로젝트의 public/index.html을 루트 디렉토리로 이동 후 index.html의 <body>에 아래 내용을 추가합니다.
<body>
  <div id="root"></div>
  <script type="module" src="/src/index.tsx"></script>
</body>
5번까지가 기본 설정이고, 이후 에러를 해결하기 위해 아래와 같은 설정을 했습니다.
 
트러블 슈팅
1. 절대 경로 사용
기존 프로젝트에서 작성된 절대 경로의 설정 방식을 변경했습니다.
import MindSpaceText from '@/images/MindSpaceText.png';
 
tsconfig.json 파일과 vite.config.ts 파일을 아래와 같이 변경합니다.
// tsconfig.json
"baseUrl": ".",
"paths": {
  "@/*": ["src/*"]
},
// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';                      // 추가
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),    // 추가
    },
  },
});
 
2. 환경 변수 설정 변경
기존 프로젝트에서는 REACT_APP_HOST로 api url을 환경변수로 지정했는데, vite에서 접근 가능한 환경 변수는 VITE_를 붙여야 합니다. 따라서 VITE_API_URL로 환경변수 정의 를 변경했습니다.
VITE_API_URL=http://localhost:8080/
환경변수에 접근하고자 할 때는 ${import.meta.env.VITE_API_URL} 를 사용해서 접근합니다.
 
3. URI malformed 에러 해결
이제 파일 경로를 못찾는 문제는 발생하지 않았는데, 아래와 같은 에러가 발생했습니다.
[vite] Internal server error: URI malformed
https://stackoverflow.com/questions/72396236/error-uri-malformed-when-running-react-application-on-mac
구글링으로 stackoverflow에서 알려준 해결 방법으로 index.tsx파일을 변경했더니 해결되었습니다.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />  // "%PUBLIC_URL%" 삭제
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>  
  </body>
</html>
결과
기존 실행 시간 :
vite 적용 후 실행 시간 :
비교해보면 개발 서버 구동이 매우 단축된 것을 확인할 수 있습니다.
 
에러를 해결할 때는 삽질을 많이 해서 힘들었으나 서버 구동 시간이 단축된 모습을 보니 웹 개발용 빌드 도구로 vite를 왜 많이 사용하는 지 깨달았습니다. 관심 있으신 분들은 한번 사용해보시는 걸 추천드립니다.
REF
https://tech.cloudmt.co.kr/2023/02/23/build-fast-webpack-to-vite-migratiokn/

Vite로 번들러 마이그레이션 및 에러 해결

댓글