Add: ts dependency, tsconfig setting

front/public/index.html → front/index.html

@@ -16,4 +16,6 @@
         crossorigin="anonymous"
     ></script>
     <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
 </html>

front/package.json

@@ -3,35 +3,10 @@
     "homepage": "http://place.weballin.com",
     "version": "0.1.0",
     "private": true,
-    "dependencies": {
-        "@fortawesome/fontawesome-svg-core": "^6.2.0",
-        "@fortawesome/free-brands-svg-icons": "^6.2.0",
-        "@fortawesome/free-regular-svg-icons": "^6.2.0",
-        "@fortawesome/free-solid-svg-icons": "^6.2.0",
-        "@fortawesome/react-fontawesome": "^0.2.0",
-        "@headlessui/react": "^1.7.3",
-        "@heroicons/react": "^2.0.12",
-        "@tailwindcss/line-clamp": "^0.4.2",
-        "@testing-library/jest-dom": "^5.16.5",
-        "@testing-library/react": "^13.4.0",
-        "@testing-library/user-event": "^13.5.0",
-        "axios": "^0.27.2",
-        "react": "^18.2.0",
-        "react-apple-emojis": "^2.2.1",
-        "react-device-detect": "^2.2.2",
-        "react-dom": "^18.2.0",
-        "react-indiana-drag-scroll": "^2.2.0",
-        "react-router-dom": "^6.4.0",
-        "react-scripts": "5.0.1",
-        "recoil": "^0.7.5",
-        "swiper": "^8.4.2",
-        "web-vitals": "^2.1.4"
-    },
     "scripts": {
-        "start": "react-scripts start",
-        "build": "react-scripts build",
-        "test": "react-scripts test",
-        "eject": "react-scripts eject"
+        "dev": "vite",
+        "build": "tsc && vite build",
+        "serve": "vite preview"
     },
     "eslintConfig": {
         "extends": [
@@ -51,9 +26,41 @@
             "last 1 safari version"
         ]
     },
+    "dependencies": {
+        "@types/jest": "^29.5.7",
+        "@types/node": "^20.8.10",
+        "@types/react": "^18.2.35",
+        "@types/react-dom": "^18.2.14",
+        "react": "^18.2.0",
+        "react-router-dom": "^6.4.0",
+        "vite-tsconfig-paths": "^4.2.1",
+        "axios": "^0.27.2",
+        "react-device-detect": "^2.2.2",
+        "react-dom": "^18.2.0",
+        "react-indiana-drag-scroll": "^2.2.0",
+        "recoil": "^0.7.5",
+        "swiper": "^8.4.2",
+        "typescript": "^5.0.3",
+        "web-vitals": "^2.1.4",
+        "react-apple-emojis": "^2.2.1",
+        "@fortawesome/fontawesome-svg-core": "^6.2.0",
+        "@fortawesome/free-brands-svg-icons": "^6.2.0",
+        "@fortawesome/free-regular-svg-icons": "^6.2.0",
+        "@fortawesome/free-solid-svg-icons": "^6.2.0",
+        "@fortawesome/react-fontawesome": "^0.2.0",
+        "@headlessui/react": "^1.7.3",
+        "@heroicons/react": "^2.0.12",
+        "@tailwindcss/line-clamp": "^0.4.2"
+    },
     "devDependencies": {
+        "@types/react-router-dom": "^5.3.3",
+        "@vitejs/plugin-react": "^4.1.1",
         "autoprefixer": "^10.4.12",
         "postcss": "^8.4.16",
-        "tailwindcss": "^3.1.8"
+        "tailwindcss": "^3.1.8",
+        "vite": "^4.5.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^13.4.0",
+        "@testing-library/user-event": "^13.5.0"
     }
 }

front/src/Routes.js → front/src/Routes.jsx

@@ -9,7 +9,7 @@ import Join from './pages/Join';
 import MyPage from './pages/MyPage';
 import Detail from './pages/Detail';
 import Write from './pages/Write';
-import FindPassword from 'pages/FindPassword/index';
+import FindPassword from '@/pages/FindPassword/index';
 import FloatingBtn from './components/FloatingBtn';
 
 import Header from './components/header';

front/src/index.js → front/src/index.tsx

@@ -4,13 +4,15 @@ import './styles/index.css';
 import './styles/font.css';
 import Switchs from './Routes';
 import reportWebVitals from './reportWebVitals';
-import {RecoilRoot} from '../node_modules/recoil/';
+import {RecoilRoot} from 'recoil';
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-    <RecoilRoot>
-        <Switchs />
-    </RecoilRoot>
+  <React.StrictMode>
+      <RecoilRoot>
+          <Switchs />
+      </RecoilRoot>
+    </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

front/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+		"types": ["vite/client"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "~/*": ["./public/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

front/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

front/vite.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import viteTsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react(), viteTsconfigPaths()],
+});