Fix : vite 마이그레이션중 process is not defined

- vite는 process.env를 쓸때 proces 대신 import.meta.env를 사용해야한다 - img태그 src는 public/imag 폴더의 경로는 ./img/파일명으로 사용하면 된다
team-3-in · Feb 20, 2024 · c4c93b6 · c4c93b6
1 parent bded6c4
commit c4c93b6
Show file tree

Hide file tree

Showing 11 changed files with 39 additions and 65 deletions.
diff --git a/packages/frontend/.eslintrc.cjs b/packages/frontend/.eslintrc.cjs
@@ -1,4 +1,8 @@
 module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
   root: true,
 
   parser: '@typescript-eslint/parser',
@@ -8,12 +12,12 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:@typescript-eslint/recommended',
-    'plugin:prettier/recommended'
+    'plugin:prettier/recommended',
   ],
 
   rules: {
     semi: 'error',
     '@typescript-eslint/no-unused-vars': 'error',
-    'prettier/prettier': ['error', { endOfLine: 'auto' }]
-  }
-};
+    'prettier/prettier': ['error', { endOfLine: 'auto' }],
+  },
+};
diff --git a/packages/frontend/src/components/Main/ProfileToggle.tsx b/packages/frontend/src/components/Main/ProfileToggle.tsx
@@ -77,21 +77,13 @@ function ProfileToggle() {
     <Wrapper>
       <ModalBox>
         <ModalIconBox color="#FF2868">
-          <ModalImg
-            size="15px"
-            src={`${process.env.PUBLIC_URL}/img/logout.webp`}
-            alt="connect"
-          />
+          <ModalImg size="15px" src={`/img/logout.webp`} alt="connect" />
         </ModalIconBox>
         <p>로그아웃</p>
       </ModalBox>
       <ModalBox>
         <ModalIconBox color="#5562EA">
-          <ModalImg
-            size="15px"
-            src={`${process.env.PUBLIC_URL}/img/profile.webp`}
-            alt="connect"
-          />
+          <ModalImg size="15px" src={`/img/profile.webp`} alt="connect" />
         </ModalIconBox>
         <p>회원정보</p>
       </ModalBox>

diff --git a/packages/frontend/src/components/common/ClickNavigationBox.tsx b/packages/frontend/src/components/common/ClickNavigationBox.tsx
@@ -113,11 +113,7 @@ function ClickNavigationBox({
 
         <IconBox color={color}>
           {/* desktop 사이즈의 img size와 path를 string으로 받습니다 */}
-          <Img
-            size={size}
-            src={`${process.env.PUBLIC_URL}/img/${path}.webp`}
-            alt="connect"
-          />
+          <Img size={size} src={`/img/${path}.webp`} alt="connect" />
         </IconBox>
         {/* subTitle이 있으면 넣고 없으면 빼주세요 */}
         <DescBox>

diff --git a/packages/frontend/src/components/common/Logo.tsx b/packages/frontend/src/components/common/Logo.tsx
@@ -11,7 +11,7 @@ function Logo({ className }: LogoProps) {
 
   return (
     <LogoCSS className={className} onClick={() => navigate('/')}>
-      <img src={`${process.env.PUBLIC_URL}/img/logo.webp`} alt="logo" />
+      <img src={`/img/logo.webp`} alt="logo" />
     </LogoCSS>
   );
 }

diff --git a/packages/frontend/src/components/common/Mascort.tsx b/packages/frontend/src/components/common/Mascort.tsx
@@ -8,7 +8,7 @@ export type MascortProps = {
 function Mascort({ size }: MascortProps) {
   return (
     <MascortCSS size={size}>
-      <img src={`${process.env.PUBLIC_URL}img/mascort.webp`} alt="마스코트" />
+      <img src={`img/mascort.webp`} alt="마스코트" />
     </MascortCSS>
   );
 }

diff --git a/packages/frontend/src/components/pwaPrompt/PWAinstallPrompt.tsx b/packages/frontend/src/components/pwaPrompt/PWAinstallPrompt.tsx
@@ -87,14 +87,8 @@ function PWAinstallPrompt({ isIOSShow, setIsIOSShow }: PropsIOS) {
           <strong>IOS 사용자 앱 설치 방법 안내</strong>
         </section>
         <section className="img-wrap">
-          <img
-            src={`${process.env.PUBLIC_URL}/img/pwa-ios1.png`}
-            alt="ios 앱 설치"
-          />
-          <img
-            src={`${process.env.PUBLIC_URL}/img/pwa-ios2.png`}
-            alt="ios 앱 설치"
-          />
+          <img src={`/img/pwa-ios1.png`} alt="ios 앱 설치" />
+          <img src={`/img/pwa-ios2.png`} alt="ios 앱 설치" />
           <div className="btn-wrap">
             <button
               onClick={() => {

diff --git a/packages/frontend/src/pages/Loading.tsx b/packages/frontend/src/pages/Loading.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 import MoonLoader from 'react-spinners/MoonLoader';
 
@@ -20,10 +21,7 @@ function Loading() {
     <>
       <Wrapper>
         <MoonLoader color="#333333" loading size={45} speedMultiplier={0.5} />
-        <LoadImg
-          src={`${process.env.PUBLIC_URL}/img/loading.webp`}
-          alt="loading"
-        />
+        <LoadImg src={`/img/loading.webp`} alt="loading" />
       </Wrapper>
     </>
   );

diff --git a/packages/frontend/src/pages/Main.tsx b/packages/frontend/src/pages/Main.tsx
@@ -219,13 +219,10 @@ function Main() {
             navigate('/');
           }}
         >
-          <HomeImg src={`${process.env.PUBLIC_URL}/img/home.webp`} alt="home" />
+          <HomeImg src={`/img/home.webp`} alt="home" />
         </HomeBtn>
         <Btn onClick={() => setShowing((pre) => !pre)}>
-          <SkillImg
-            src={`${process.env.PUBLIC_URL}/img/skill.webp`}
-            alt="skill"
-          />
+          <SkillImg src={`/img/skill.webp`} alt="skill" />
         </Btn>
         {isShowing && <ProfileToggle />}
       </Header>
@@ -235,11 +232,7 @@ function Main() {
         <ContBox>
           <DescBox>
             <IconBox color="#395aa2">
-              <Img
-                size="21px"
-                src={`${process.env.PUBLIC_URL}/img/connectIcon.webp`}
-                alt="connect"
-              />
+              <Img size="21px" src={`/img/connectIcon.webp`} alt="connect" />
             </IconBox>
             <SubTitle>실전 기출문제 풀러가기</SubTitle>
           </DescBox>
@@ -251,11 +244,7 @@ function Main() {
         <ContBox>
           <DescBox>
             <IconBox color="#DE3755">
-              <Img
-                size="24px"
-                src={`${process.env.PUBLIC_URL}/img/wrongIcon.webp`}
-                alt="connect"
-              />
+              <Img size="24px" src={`/img/wrongIcon.webp`} alt="connect" />
             </IconBox>
             <SubTitle>내가 틀린 문제</SubTitle>
           </DescBox>
@@ -264,11 +253,7 @@ function Main() {
         <ContBox>
           <DescBox>
             <IconBox color="#EED600">
-              <Img
-                size="24px"
-                src={`${process.env.PUBLIC_URL}/img/favoriteIcon.webp`}
-                alt="connect"
-              />
+              <Img size="24px" src={`/img/favoriteIcon.webp`} alt="connect" />
             </IconBox>
             <SubTitle>즐겨찾기한 문제</SubTitle>
           </DescBox>

diff --git a/packages/frontend/src/serviceWorkerRegistration.ts b/packages/frontend/src/serviceWorkerRegistration.ts
@@ -13,13 +13,16 @@ type Config = {
 
 export function register(config?: Config) {
   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
-    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
+    const publicUrl = new URL(
+      process.env.PUBLIC_URL || '',
+      window.location.href,
+    );
     if (publicUrl.origin !== window.location.origin) {
       return;
     }
 
     window.addEventListener('load', () => {
-      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
+      const swUrl = `/service-worker.js`;
 
       if (isLocalhost) {
         checkValidServiceWorker(swUrl, config);

diff --git a/packages/frontend/tsconfig.json b/packages/frontend/tsconfig.json
@@ -33,8 +33,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
   },
   "include": ["src"],
-  "exclude": ["**/*.test.ts", "**/*.test.tsx"],
+  "exclude": ["**/*.test.ts", "**/*.test.tsx"]
 }
diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
@@ -1,15 +1,13 @@
-import { defineConfig } from 'vite';
+import * as path from 'path';
+
 import react from '@vitejs/plugin-react';
-import viteTsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from 'vite';
 import svgrPlugin from 'vite-plugin-svgr';
-import browserslistToEsbuild from 'browserslist-to-esbuild';
-import path from 'path';
 
 export default defineConfig({
-  plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
-  build: {
-    outDir: 'build',
-    target: browserslistToEsbuild(['>0.2%', 'not dead', 'not op_mini all']),
+  plugins: [react(), svgrPlugin()],
+  server: {
+    port: 3000,
   },
   resolve: {
     alias: {