부산대학교 FE 성민기 - 1단계 세팅 (Prettier 추가)

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

README.md

@@ -1 +1,17 @@
 # react-gift-login
+
+# TODO
+
+# 홈과 로그인(WIP) 레포지토리를 클론해요. : CLEAR
+
+# 불필요한 파일, 코드를 정리해요. : CLEAR
+
+# 절대경로로 Import 할 수 있게 alias를 설정해요. : CLEAR
+
+# Prettier가 무엇인지 찾아보고 추가해주세요. : CLEAR
+
+# emotion 스타일 라이브러리를 추가하고, reset css를 적용해주세요.
+
+# 기본 폰트로 Pretendard를 적용해주세요.
+
+# 기능 단위로 나누어 커밋을 해주세요.

package.json

@@ -15,13 +15,15 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/node": "^24.0.4",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@vitejs/plugin-react": "^4.4.1",
     "eslint": "^9.25.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^16.0.0",
+    "prettier": "^3.6.1",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.30.1",
     "vite": "^6.3.5"

src/App.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
-import reactLogo from './assets/react.svg'
+import reactLogo from '@/assets/react.svg'
 import viteLogo from '/vite.svg'
-import './App.css'
+import '@/App.css'
 
 function App() {
   const [count, setCount] = useState(0)

src/main.tsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import '@/index.css'
+import App from '@/App.tsx'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

tsconfig.app.json

@@ -21,7 +21,13 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "include": ["src"]
 }

tsconfig.node.json

@@ -19,7 +19,14 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": true,
+
+    /* 절대경로 설정 */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+
   },
   "include": ["vite.config.ts"]
 }

vite.config.ts

@@ -1,7 +1,14 @@
+
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import path from 'path'
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
 })