경북대 FE_김강민_1주차 과제 Step1

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2021,
+    "sourceType": "module",
+    "project": "./tsconfig.json",
+    "createDefaultProgram": true
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react",
+    "react-hooks",
+    "jsx-a11y",
+    "import",
+    "prettier"
+  ],
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true
+      }
+    }
+  },
+  "ignorePatterns": [".eslintrc.json", "vite.config.ts"],
+  "rules": {
+    "no-param-reassign": ["error", { "props": false }],
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "react/prop-types": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto"
+      }
+    ],
+    "react/react-in-jsx-scope": "off"
+  }
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1,39 @@
+{
+  "arrowParens": "always",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "auto",
+  "htmlWhitespaceSensitivity": "css",
+  "insertPragma": false,
+  "jsxSingleQuote": true,
+  "printWidth": 80,
+  "proseWrap": "always",
+  "quoteProps": "as-needed",
+  "requirePragma": false,
+  "semi": true,
+  "singleAttributePerLine": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false,
+  "vueIndentScriptAndStyle": false,
+
+  "plugins": ["@trivago/prettier-plugin-sort-imports"],
+  "importOrder": [
+    "^react(.*)",
+    "<THIRD_PARTY_MODULES>",
+    "^@api/(.*)$",
+    "^@assets/(.*)$",
+    "^@components/(.*)$",
+    "^@constants/(.*)$|^@utils/(.*)",
+    "^@hooks/(.*)$",
+    "^@interface/(.*)$",
+    "^@pages/(.*)$",
+    "^@store/(.*)$",
+    "^@styles/(.*)$",
+    "^@utils/(.*)$",
+    "^(.*)/(.*)$"
+  ],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": false
+}

README.md

@@ -1,2 +1,57 @@
 # react-gift-react-foundation
+
 FE 카카오 선물하기 1주차 과제: React 기초
+
+## 📂 폴더구조
+
+```
+📦 public
+📦 src
+ ┣ 📂 apis
+ ┣ 📂 assets
+ ┣ 📂 components
+ ┣ 📂 constants
+ ┣ 📂 hooks
+ ┣ 📂 interface
+ ┣ 📂 pages
+ ┣ 📂 store
+ ┣ 📂 styles
+ ┣ 📂 utils
+ ┣ 📜 App.css
+ ┣ 📜 App.tsx
+ ┣ 📜 index.css
+ ┣ 📜 main.tsx
+ ┣ ...
+ ┗ 📜 vite.config.ts
+```
+
+## 📝 과제 요구사항
+
+- [x] Create React App을 기반으로 프로젝트를 생성해요.
+- [x] Typescript로 프로젝트가 동작되게 세팅하고, 절대 경로로 Import 할 수 있게
+      alias를 설정해주세요.
+- [x] ESLint, Prettier를 추가하고 본인만의 Lint 룰을 세팅해주세요.
+- [x] emotion 스타일 라이브러리를 추가하세요.
+- [x] reset css를 적용해주세요.
+- [x] .gitignore를 추가해주세요.
+- [x] 프로젝트에 불필요한 코드들은 정리해주세요.
+- [x] 본인만의 폴더 구조 기준을 세우고 반영해주세요.
+- [x] 본인만의 기준으로 일관된 코드를 작성해주세요.
+- [x] 기능 단위로 나누어 커밋을 해주세요.
+
+## 📌 참고사항
+
+### 1. CRA가 아닌 Vite를 사용하여 프로젝트를 생성했습니다.
+
+![vite img](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcePnwk%2FbtsivScj9G2%2FBHZCXU4epnHKfBR6oyVdF1%2Fimg.png)
+
+- 최근에 Vite를 더 많이 사용하는 걸로 알고있고, CRA보다 성능과 속도면에서 조금
+  더 우수하다고 생각하여 Vite를 사용했습니다.
+
+### 2. 패키지 매니저로 Pnpm을 사용했습니다.
+
+![pnpm img](https://res.cloudinary.com/practicaldev/image/fetch/s--yPFpEvxt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/practicaldev/image/fetch/s--5LB7xZGh--/c_imagga_scale%2Cf_auto%2Cfl_progressive%2Ch_420%2Cq_auto%2Cw_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o8e2at4huuuv08y24jvg.png)
+
+- 대부분이 많이 사용하는 패키지매니저인 npm 보다 더 효율적으로 패키지를
+  관리하며, 라이브러리 설치를 조금 더 빠르게 설치가 가능하다는 장점이 있어
+  Pnpm을 사용하게 되었습니다.

index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="node_modules/modern-normalize/modern-normalize.css"
+    />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package.json

@@ -0,0 +1,43 @@
+{
+	"name": "react-gift-react-foundation",
+	"private": true,
+	"version": "0.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc -b && vite build",
+		"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@emotion/react": "^11.11.4",
+		"@emotion/styled": "^11.11.5",
+		"modern-normalize": "^2.0.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-router-dom": "^6.23.1"
+	},
+	"devDependencies": {
+		"@trivago/prettier-plugin-sort-imports": "^4.3.0",
+		"@types/node": "^20.14.9",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"@typescript-eslint/eslint-plugin": "^7.2.0",
+		"@typescript-eslint/parser": "^7.2.0",
+		"@vitejs/plugin-react-swc": "^3.5.0",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-jsx-a11y": "^6.8.0",
+		"eslint-plugin-n": "^16.6.2",
+		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-promise": "^6.1.1",
+		"eslint-plugin-react": "^7.34.1",
+		"eslint-plugin-react-hooks": "^4.6.2",
+		"eslint-plugin-react-refresh": "^0.4.7",
+		"prettier": "^3.2.5",
+		"typescript": "^5.2.2",
+		"vite": "^5.3.1"
+	}
+}