Jihykim2 TODO, Web(2)(3) 제출

v1/frontend/API_호출_마스터하기/async-await.js

@@ -0,0 +1,29 @@
+const url = "http://localhost:3000/users";
+
+const fetchUsers = async () => {
+  try {
+    const response = await fetch(url); // fetch 요청을 보낸 뒤 응답 대기
+    if (!response.ok) {
+      throw new Error("error in http-requests");
+    }
+    const users = await response.json(); // parsing 대기
+    return users;
+  } catch (error) {
+    throw error;
+  }
+};
+
+const loadUsers = async () => {
+  try {
+    const users = await fetchUsers();
+    if (users) {
+      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,21 @@
+const url = "http://localhost:3000/users";
+
+function fetchUsers(callback) {
+  fetch(url).then((response) => {
+    if (response.ok) {
+      return response
+        .json()
+        .then((data) => callback(null, data))
+        .catch((error) => callback(error, null));
+    }
+    callback(new Error("error in network"), 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,22 @@
+const url = "http://localhost:3000/users";
+
+function fetchUsers() {
+  return fetch(url).then((response) => {
+    if (response.ok) {
+      return response.json();
+    }
+    throw new Error("error in network");
+  });
+}
+
+fetchUsers()
+  .then((users) => {
+    if (users) {
+      console.log("Users: ", users);
+    } else {
+      console.log("No users found.");
+    }
+  })
+  .catch((error) => {
+    console.error("Failed to fetch users: ", error);
+  });

v1/frontend/API_호출_마스터하기/summary.md

@@ -0,0 +1,115 @@
+# API 호출 마스터하기
+
+## [ 1 ] 기본 작업 환경 구성
+
+### `json-server`란?
+
+: 가짜 API 서버를 만드는 툴로, 짧은 시간 REST API가 필요할 때, 간단하게 만들어서 테스트해 볼 수 있다.
+
+즉, 간단한 REST API를 신속하게 사용할 수 있도록 해주는 노드(Node.js) 모듈로, 프론트엔드 개발 중 백엔드 서버 없이도 API를 사용해볼 수 있게 해준다.
+
+- 사용법: 사용자는 로컬 파일에 JSON 데이터를 작성하고, `json-server`가 이 파일을 데이터베이스로 사용하여 API 요청에 응답하도록 설정할 수 있다.
+
+- `json-server`를 사용하여 처리할 수 있는 내용
+  - `GET`, `POST`, `PUT`, `DELETE` 요청 처리
+  - 풀 텍스트 검색
+  - 관계 링크 및 임베디드 리소스
+  - 페이지네이션 및 정렬
+
+## [ 2 ] CallBack 방식 구현
+
+### callback function
+
+: 매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.
+즉, 파라미터로 일반적인 변수나 값을 전달하는 것이 아닌 함수 자체를 전달하는 함수의 형태를 콜백 함수라고 한다.
+
+보통 콜백함수에 전달되는 함수는 일회용으로 사용하기 때문에 굳이 함수의 이름을 명시할 필요가 없어 주로 익명 함수의 형태로 넣는다.
+
+### 콜백 함수 사용 원칙
+
+1. 익명의 함수 사용
+
+   : 함수 호출에 일회용으로 사용되는 경우가 많아 코드의 간결성을 위해 이름이 없는 익명의 함수를 사용한다.
+
+2. 화살표 함수 모양의 콜백
+
+   : 보다 더 간결한 표현을 위해 화살표 함수를 통해 익명 화살표 함수 형태로 정의하여 사용한다.
+
+3. 함수의 이름을 넘기기
+
+   : 자바스크립트는 `null`, `undefined` 타입을 제외하고 모든 것을 객체로 다룬다. 따라서, 매개변수에 일반적인 변수나 상수 값 뿐만 아니라 함수 자체를 객체로 전달이 가능하다.
+
+   만일 콜백 함수가 일회용이 아닌 여러 호출 함수에 재활용으로 자주 이용될 경우, 별도로 함수를 정의하고 함수의 이름만 호출 함수의 인자에 전달하는 형식으로 사용할 수 있다.
+
+### 콜백 함수의 주의점
+
+1. `this`를 사용한 콜백 함수
+
+   : 콜백 함수 내에서 `this` 키워드를 사용하면 기대한 대로 작동하지 않을 수 있다.
+
+   > 콜백 함수는 다른 함수의 인자로 전달되는 함수로, 콜백 함수는 자신을 전달받은 함수에 의해 호출되는데, 이때 콜백 함수의 `this` 객체는 콜백함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의되지 않은 경우 전역 객체인 `window`를 가리킨다(참조한다).
+
+2. 화살표 함수 사용
+
+   : 화살표 함수는 자신만의 `this`를 가지지 않고, 상위 스코프의 `this`를 참조하기 때문에 전역 객체를 무시하고 무조건 자신을 들고 있는 상위 객체를 가리킨다.
+
+### 콜백 지옥
+
+: 콜백 지옥이란, 함수의 매개변수로 넘겨지는 콜백 함수가 반복되어 코드의 들여쓰기 수준을 감당하기 힘들어질 정도로 깊어지는 현상을 말한다.
+
+### 구현
+
+1. `XMLHttpRequest` 객체를 사용
+
+   - 위 객체는 `javascript`에서 HTTP 요청을 보낼 수 있는 오래된 방법으로, 복잡한 구성이 필요하다.
+   - 하지만 요청 진행 상태를 추적하는 등 보다 세밀한 네트워크 제어가 가능하다.
+   - 콜백 패턴을 사용하므로 복잡한 비동기 코드를 관리하기 어려울 수 있다.
+
+2. `fetch` 사용
+   - `fetch` API는 웹 브라우저와 Node.js 환경에서 네트워크 통신을 위해 사용할 수 있는 모던하고 강력한 API로, HTTP 요청을 보내고 원격 서버로부터 자원을 비동기적으로 가져올 수 있다.
+   - `promise` 기반으로 비동기 작업을 처리한다.
+   - 최소한 하나의 인자(url)을 필요로 하며, 요청이 성공적으로 완료되면 `fetch`는 `Response` 객체를 담은 promise를 반환한다
+
+### `Error` 객체
+
+: `new Error()`를 사용하는 이유
+
+- 에러 스택 추적: 오류가 발생한 위치를 추적하는 데 매우 유용, 디버깅 시 필수
+- 표준화된 에러처리: 일관된 오류 관리가 가능하도록 표준화된 형태인 `Error` 객체를 사용하여 처리
+- 추가적인 정보 포함: `message` 속성 외에도 `name`, `code` 등의 추가적인 정보를 포함하여 오류에 대한 세부적인 정보를 제공
+
+## [ 3 ] promise 방식 구현
+
+> `promise`는 `javascript`에서 비동기 작업을 다루기 위한 객체로, 비동기 연산이 완료되기를 기다리지 않고 즉시 반환된다.
+
+### promise의 상태
+
+1. Pending (대기): 비동기 처리가 아직 완료되지 않는 상태
+2. Fulfilled (이행): 비동기 처리가 성공적으로 완료되어 결과 값을 반환한 상태
+3. Rejected (거부): 비동기 처리가 실패하거나 오류가 발생한 상태
+
+### promise의 체이닝
+
+: `promise` 객체는 `then`, `catch`, `finally` 메소드를 통해 체인을 형성할 수 있다. 이들은 각각의 promise가 실행된 상태에 따라 다음을 정의하는 데 사용된다.
+
+- `then`: 두개의 인자를 받을 수 있다. 첫번째는 성공적으로 이행되었을 때 실행되는 함수며, 두번째는 거부되었을 때 실행되는 함수이다.
+- `catch`: promise가 거부되었을 때 실행되는 함수를 인자로 받는다.
+- `finally`: 결과에 상관없이 실행되어야 할 함수를 인자로 받는다.
+
+### promise를 사용하는 이유
+
+1. 콜백 지옥 해결: 중첩된 콜백의 복잡성을 줄이고, 코드의 가독성을 향상시킨다.
+2. 강력한 에러처리: `try-catch`와 유사하게 에러를 캐치하고 처리할 수 있는 구조를 제공한다.
+3. 동기식 코드 작성: 비동기 코드를 동기식으로 읽고 쓸 수 있다
+
+## [ 4 ] async & await 방식 구현
+
+: ES2017에 도입된 문법으로 promise 로직을 더 쉽고 간결하게 사용할 수 있다.
+하지만, promise를 대체하기 위한 기능은 아니다.
+내부적으로는 여전히 promise를 사용해서 비동기를 처리하고, 코드를 작성하는 부분에 있어서 유지보수가 편리하도록 문법을 달리한 것이라 생각하자.
+
+> `function` 키워드 앞에 `async`를 붙이고, 비동기로 처리되는 부분 앞에 `await`를 붙여주면 된다.
+
+> `promise`는 `then`을 연속적으로 사용하여 비동기 처리를 하지만, async/await는 필요한 경우마다 await를 붙여서 비동기 처리를 기다리고 있다는 것을 직관적으로 표현하고 있다.
+
+> async의 return value는 항상 `promise` 객체이다.

v1/frontend/HTML+CSS+JS_LV_1_Todo_List_마스터하기/index.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width"/>
+    <title>TODO List</title>
+    <link href="style.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div id="root" class="flex-col">
+      <header>
+        <p id="title">TODO LIST</p>
+      </header>
+      <main>
+        <article class="flex-row">
+          <input id="input-text" type="text" placeholder="Write down your todo-list" maxlength="30" size="100">
+          <button id="add-todo" type="button">
+            <img src="./images/enter_btn.svg" alt="enter button">
+          </button>
+        </article>
+        <section>
+          <div id="btn-list">
+            <button id="show-all">
+              <img src="images/show_all_btn.svg" alt="all list">
+            </button>
+            <button id="show-todo">
+              <img src="images/show_todo_btn.svg" alt="todo list">
+            </button>
+            <button id="show-done">
+              <img src="images/show_done_btn.svg" alt="done list">
+            </button>
+          </div>
+          <ul id="todo-list" class="flex-col"></ul>
+        </section>
+      </main>
+    </div>
+    <script src="todo.js"></script>
+  </body>
+</html>

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

@@ -0,0 +1,65 @@
+/* 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;
+  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;
+}
+
+/* Button reset */
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  box-shadow: none;
+  border-radius: 0;
+  cursor: pointer;
+  font: inherit;
+  color: inherit;
+  outline: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}