THE-SOPT-WEB · henization · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022 · Jun 15, 2022
diff --git a/week3_ts/.gitignore b/week3_ts/.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?
diff --git a/week3_ts/index.html b/week3_ts/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="ko">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Vite App</title>
+        <link rel="stylesheet" href="./reset.css" />
+        <link rel="stylesheet" href="./global.css" />
+    </head>
+    <body>
+        <div id="root" style="height: 100%"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/week3_ts/package.json b/week3_ts/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "week3_ts",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^1.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.9.9"
+  }
+}
diff --git a/week3_ts/reset.css b/week3_ts/reset.css
@@ -0,0 +1,129 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/week3_ts/src/App.tsx b/week3_ts/src/App.tsx
@@ -0,0 +1,45 @@
+import { useState } from 'react'
+import logo from './logo.svg'
+import './App.css'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>Hello Vite + React!</p>
+        <p>
+          <button type="button" onClick={() => setCount((count) => count + 1)}>
+            count is: {count}
+          </button>
+        </p>
+        <p>
+          Edit <code>App.tsx</code> and save to test HMR updates.
+        </p>
+        <p>
+          <a
+            className="App-link"
+            href="https://reactjs.org"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Learn React
+          </a>
+          {' | '}
+          <a
+            className="App-link"
+            href="https://vitejs.dev/guide/features.html"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Vite Docs
+          </a>
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App
diff --git a/week3_ts/src/assets/image/권지용.jpg b/week3_ts/src/assets/image/권지용.jpg
diff --git a/week3_ts/src/assets/image/권호시.jpg b/week3_ts/src/assets/image/권호시.jpg
diff --git a/week3_ts/src/assets/image/김도영.jpg b/week3_ts/src/assets/image/김도영.jpg
diff --git a/week3_ts/src/assets/image/김정우.jpg b/week3_ts/src/assets/image/김정우.jpg
diff --git a/week3_ts/src/assets/image/김종인.jpg b/week3_ts/src/assets/image/김종인.jpg
diff --git a/week3_ts/src/assets/image/김준면.jpg b/week3_ts/src/assets/image/김준면.jpg
diff --git a/week3_ts/src/assets/image/나재민.jpg b/week3_ts/src/assets/image/나재민.jpg
diff --git a/week3_ts/src/assets/image/도경수.jpg b/week3_ts/src/assets/image/도경수.jpg
diff --git a/week3_ts/src/assets/image/변백현.jpg b/week3_ts/src/assets/image/변백현.jpg
diff --git a/week3_ts/src/assets/image/오세훈.jpg b/week3_ts/src/assets/image/오세훈.jpg
diff --git a/week3_ts/src/assets/image/윤정한.jpg b/week3_ts/src/assets/image/윤정한.jpg
diff --git a/week3_ts/src/assets/image/이동혁.jpg b/week3_ts/src/assets/image/이동혁.jpg
diff --git a/week3_ts/src/assets/image/이민형.jpg b/week3_ts/src/assets/image/이민형.jpg
diff --git a/week3_ts/src/assets/image/이제노.jpg b/week3_ts/src/assets/image/이제노.jpg
diff --git a/week3_ts/src/assets/image/정재현.jpg b/week3_ts/src/assets/image/정재현.jpg
diff --git a/week3_ts/src/assets/image/차은우.jpg b/week3_ts/src/assets/image/차은우.jpg
diff --git a/week3_ts/src/index.css b/week3_ts/src/index.css
@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
diff --git a/week3_ts/src/main.tsx b/week3_ts/src/main.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)
diff --git a/week3_ts/src/style.ts b/week3_ts/src/style.ts
diff --git a/week3_ts/tsconfig.json b/week3_ts/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/week3_ts/tsconfig.node.json b/week3_ts/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/week3_ts/vite.config.ts b/week3_ts/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()]
+})