seonmiki 개포동배달음식, TODO, web(2), react 로그인

v1/frontend/API_호출_마스터하기/async_await.js

@@ -0,0 +1,27 @@
+const fetchUsers = async () => {
+    try {
+      const response = await fetch('http://localhost:3000/users');
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const users = await response.json();
+      return users;
+    } catch (error) {
+      throw new Error(`Failed to fetch users: ${error.message}`);
+    }
+};
+
+const loadUsers = async () => {
+  try {
+    const users = await fetchUsers();
+    if (users && users.length > 0) {
+      console.log('Users: ', users);
+    } else {
+      console.log('No users found.');
+    }
+  } catch (error) {
+    console.error('Failed to fetch users:', error);
+  }
+};
+
+loadUsers();

v1/frontend/API_호출_마스터하기/callback.js

@@ -0,0 +1,23 @@
+function fetchUsers(callback) {
+    fetch('http://localhost:3000/users')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      })
+      .then(data => {
+        callback(null, data);
+      })
+      .catch(error => {
+        callback(error, null);
+      });
+  }
+
+fetchUsers((error, users) => {
+if (error) {
+    console.error('Failed to fetch users:', error);
+    return;
+}
+console.log('Users:', users);
+});

v1/frontend/API_호출_마스터하기/db.json

@@ -0,0 +1,7 @@
+{
+    "users": [
+      { "id": 1, "name": "User One" },
+      { "id": 2, "name": "User Two" },
+      { "id": 3, "name": "User Three" }
+    ]
+  }

v1/frontend/API_호출_마스터하기/promise.js

@@ -0,0 +1,21 @@
+const fetchUsers = () => {
+    return fetch('http://localhost:3000/users')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error('Network response was not ok');
+        }
+        return response.json();
+      });
+};
+
+fetchUsers()
+  .then(users => {
+    if (users && users.length > 0) {
+      console.log('Users: ', users);
+    } else {
+      console.log('No users found.');
+    }
+  })
+  .catch(error => {
+    console.error('Failed to fetch users: ', error);
+  });

v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/css/reset.css

@@ -0,0 +1,138 @@
+/* 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,
+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,
+input,
+button {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+/* 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;
+}
+
+a {
+  text-decoration: none;
+}
+
+input:focus {
+  outline: none;
+}

v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/css/style.css

@@ -0,0 +1,157 @@
+@import "reset.css";
+@import url('https://fonts.googleapis.com/css2?family=Do+Hyeon&family=Inter:[email protected]&family=Noto+Sans+KR:[email protected]&display=swap');
+
+body {
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+    text-align: center;
+    box-sizing: border-box;
+
+    --main-color: #F28482;
+    --sub-color: #F5CAC3;
+    --background-color: #F7EDE2;
+
+    background-color: var(--background-color);
+}
+
+input::placeholder {
+    color: #BCBCBC;
+}
+
+h1, p {
+    font-family: "Inter", sans-serif;
+    color: var(--main-color);
+}
+
+h1 {
+    font-size: 80px;
+    font-weight: 800;
+    text-align: center;
+    margin-top: 5%;
+    padding-bottom: 20px;
+}
+
+article {
+    background-color: var(--sub-color);
+    width: 50%;
+    height: 60vh;
+    border-radius: 20px;
+    overflow-y: scroll;
+}
+
+li {
+    background-color: white;
+    color: var(--main-color);
+    width: 90%;
+    height: 6vh;
+    border-radius: 15px;
+    margin: 20px 30px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+
+    list-style-type: disc;
+}
+
+li span {
+    display: inline-block;
+    max-width: calc(100% - 100px); /* 버튼 컨테이너를 제외한 나머지 공간 */
+    white-space: nowrap; /* 텍스트를 한 줄로 유지 */
+    overflow: hidden;    /* 넘친 텍스트를 숨김 */
+    text-overflow: ellipsis; /* 넘친 부분을 '...'으로 표시 */
+}
+
+img {
+    width: 15px;
+    height: 15px;
+}
+
+.button-container {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+}
+
+button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.finished {
+    background-color: rgba(255, 255, 255, 0.3);;
+    text-decoration: line-through;
+}
+
+.todo-form {
+    display: flex;
+    justify-content: center;
+}
+
+.todo-form__input {
+    width: 500px;
+    height: 60px;
+    border-radius: 20px;
+    padding-left: 30px;
+}
+
+.todo-form__button {
+
+    padding-left: 10px;
+    cursor: pointer;
+
+    img {
+        width: 60px;
+        height: 60px;
+    }
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 2% 4%;
+    gap: 30px;
+}
+
+.finishBtn {
+    background-color: transparent;
+    border: 1px solid;
+    border-color: var(--main-color);
+    border-radius: 10px;
+
+    width: 3vw;
+    height: 3vh;
+
+    cursor: pointer;
+    font: inherit;
+}
+
+.deleteBtn {
+    background-color: var(--main-color);
+    border: 1px solid;
+    border-color: var(--main-color);
+    border-radius: 10px;
+
+    width: 3vw;
+    height: 3vh;
+
+    cursor: pointer;
+    font: inherit;
+    color: white;
+}
+
+.finishBtn img {
+    display: none;
+}
+
+li:not(.finished) .finishBtn:hover img {
+    display: block;
+}
+
+li.finished .finishBtn img {
+    display: block;
+}