Merge pull request #74 from Konkuk-KUIT/ro-el

feat: week5 미션 구현
Konkuk-KUIT · May 4, 2024 · f753d26 · f753d26
2 parents e8b0369 + ba9d49f
commit f753d26
Show file tree

Hide file tree

Showing 11 changed files with 30,379 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 .DS_Store
 */node_modules
 
+
diff --git a/week5/ro-el/package-lock.json b/week5/ro-el/package-lock.json
diff --git a/week5/ro-el/package.json b/week5/ro-el/package.json
@@ -0,0 +1,26 @@
+{
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+  }
+}
diff --git a/week5/ro-el/public/index.css b/week5/ro-el/public/index.css
@@ -0,0 +1,17 @@
+.todo-list {
+  padding: 0;
+}
+.todo {
+  list-style: none;
+
+  span {
+    line-height: 20px;
+  }
+  .key {
+    color: navy;
+    font-weight: bold;
+  }
+  .value {
+    font-weight: bold;
+  }
+}
diff --git a/week5/ro-el/public/index.html b/week5/ro-el/public/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Todo App</title>
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>
diff --git a/week5/ro-el/src/App.js b/week5/ro-el/src/App.js
@@ -0,0 +1,70 @@
+import React from "react";
+import todoData from "./todoData.json";
+import Todo from "./Todo";
+
+const Header = ({ title }) => {
+  return (
+    <>
+      <h1>{title}</h1>
+    </>
+  );
+};
+
+const App = () => {
+  const title = "Todo List";
+
+  return (
+    <>
+      <Header title={title} />
+
+      <h2>실습</h2>
+      {/* <Todo todo={todoData.todos[0]} /> */}
+      <ul className="todo-list">
+        {todoData.todos.map((value, index) => (
+          <Todo
+            key={value.id} //key 값으로 index를 넣으면 안 됨
+            id={value.id}
+            task={value.task}
+            completed={value.completed}
+            priority={value.priority}
+          />
+        ))}
+      </ul>
+      <hr />
+
+      <h2>미션1: completed가 true인 값만 map으로 출력</h2>
+      <ul className="todo-list">
+        {todoData.todos.map((value, index) =>
+          value.completed ? ( //삼항 연산자
+            <Todo
+              key={value.id}
+              id={value.id}
+              task={value.task}
+              completed={value.completed}
+              priority={value.priority}
+            />
+          ) : null
+        )}
+      </ul>
+      <hr />
+
+      <h2>미션2: priority가 5 이상인 값만 map으로 출력</h2>
+      <ul className="todo-list">
+        {todoData.todos.map(
+          (value, index) =>
+            value.priority >= 5 && ( //단축 평가 논리 계산법
+              <Todo
+                key={value.id}
+                id={value.id}
+                task={value.task}
+                completed={value.completed}
+                priority={value.priority}
+              />
+            )
+        )}
+      </ul>
+    </>
+  );
+};
+
+export default App;
diff --git a/week5/ro-el/src/Todo.js b/week5/ro-el/src/Todo.js
@@ -0,0 +1,29 @@
+import React from "react";
+
+const Todo = ({ id, task, completed, priority }) => {
+  return (
+    <>
+      <li className="todo">
+        <div>
+          <span className="key">id: </span>
+          <span className="value">{id}</span>
+        </div>
+        <div>
+          <span className="key">task: </span>
+          <span className="value">{task}</span>
+        </div>
+        <div>
+          <span className="key">completed: </span>
+          <span className="value">{completed.toString()}</span>
+        </div>
+        <div>
+          <span className="key">priority: </span>
+          <span className="value">{priority}</span>
+        </div>
+      </li>
+      <p></p>
+    </>
+  );
+};
+
+export default Todo;
diff --git a/week5/ro-el/src/index.js b/week5/ro-el/src/index.js
@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import App from "./App";
+//import {App} from "./App";
+
+const root = createRoot(document.getElementById("app")); //root 지정
+root.render(<App />);
diff --git a/week5/ro-el/src/todoData.json b/week5/ro-el/src/todoData.json
@@ -0,0 +1,34 @@
+{
+  "todos": [
+    {
+      "id": 1,
+      "task": "청소하기",
+      "completed": true,
+      "priority": 3
+    },
+    {
+      "id": 2,
+      "task": "쇼핑하기",
+      "completed": false,
+      "priority": 7
+    },
+    {
+      "id": 3,
+      "task": "운동하기",
+      "completed": true,
+      "priority": 6
+    },
+    {
+      "id": 4,
+      "task": "공부하기",
+      "completed": false,
+      "priority": 4
+    },
+    {
+      "id": 5,
+      "task": "요리하기",
+      "completed": true,
+      "priority": 8
+    }
+  ]
+}
diff --git a/week5/ro-el/src/강의실습.js b/week5/ro-el/src/강의실습.js
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/*const Header = (props) => {
+  console.log(props);
+  return (
+    <>
+      <h1>{props.name}</h1>
+      {props.name === 'Judy' ? <div>{props.name}</div> : <div>false</div>}
+      <div>{props.count}</div>
+    </>
+  );
+};*/
+
+const Header = ({ name, count, children, isChildren }) => {
+  console.log(name, count);
+  console.log(children);
+  return (
+    <>
+      <h1>{name}</h1>
+      {name === "Judy" ? <div>{name}</div> : <div>false</div>}
+      <div>{count}</div>
+      <div style={{width: "100px", height: "100px", backgroundColor: "red"} } />
+      {/* {children} */}
+      {isChildren ? <h2>{children}</h2> : <h2>false</h2>}
+    </>
+  );
+};
+
+const AppEx = () => {
+  const name = "KUIT";
+  const cnt = 1;
+  // const isChildren = true;
+  return (
+    <>
+      {/* <Header name={name} count={cnt} /> */}
+      <Header name={name} count={cnt} isChildren/*={isChildren}*/>~
+				안에 내용 있지롱<br />내가 props의 children이다!
+        <div>요소 모두 반영됨</div>
+			</Header>
+    </>
+  );
+};
+
+Header.propTypes = {
+  name: PropTypes.number,
+}
+
+//컴포넌트를 내보내려면 export 해야 함
+// export default App;
+//or
+//export {App};
diff --git a/week5/ro-el/todoData.json b/week5/ro-el/todoData.json
@@ -0,0 +1,34 @@
+{
+  "todos": [
+    {
+      "id": 1,
+      "task": "청소하기",
+      "completed": true,
+      "priority": 3
+    },
+    {
+      "id": 2,
+      "task": "쇼핑하기",
+      "completed": false,
+      "priority": 7
+    },
+    {
+      "id": 3,
+      "task": "운동하기",
+      "completed": true,
+      "priority": 6
+    },
+    {
+      "id": 4,
+      "task": "공부하기",
+      "completed": false,
+      "priority": 4
+    },
+    {
+      "id": 5,
+      "task": "요리하기",
+      "completed": true,
+      "priority": 8
+    }
+  ]
+}