IN-SOPT-WEB · borimong · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022 · Oct 13, 2022
diff --git a/week2/ToDoList/index.html b/week2/ToDoList/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<!--html5 의 구조 .. html 을 명시하는 코드 -->
+<html lang="ko">
+  <!--DOCTYPE 바로 밑에는 html 태그가 와야 한다. lang 는 언어 설정. 접근성 부분에서 차이 -->
+  <head>
+    <!--페이지의 메타 데이터를 포함하는 태그. 데이터를 설명하는 데이터이다. -->
+    <!--데이터들을 나타내는 데이터 = 메타 데이터!! -->
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0"
+    />
+    <script defer src="index.js"></script>
+  </head>
+  <body>
+    <header></header>
+    <nav id class="flex center">
+      <button id="today_button">오늘만 보기</button>
+      <button id="tomorrow_button">내일만 보기</button>
+      <button id="both_button">함께 보기</button>
+    </nav>
+    <main class="flex">
+      <section class="left">
+        <h5>오늘 할 일</h5>
+        <ul class="leftList">
+          <li class="grid">
+            예시 1
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+          <li class="grid last">
+            예시 2
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+        </ul>
+        <form class="flex">
+          <input class="leftInput" />
+          <button class="leftButton">+</button>
+        </form>
+      </section>
+      <section class="right">
+        <h5>내일 할 일</h5>
+        <ul class="rightList">
+          <li class="grid">
+            예시 1
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+          <li class="grid last">
+            예시 2
+            <span class="material-symbols-outlined">delete</span>
+          </li>
+        </ul>
+        <form class="flex">
+          <input class="rightInput" />
+          <button class="rightButton">+</button>
+        </form>
+      </section>
+    </main>
+    <footer></footer>
+  </body>
+  <script src="index.js"></script>
+</html>
diff --git a/week2/ToDoList/index.js b/week2/ToDoList/index.js
@@ -0,0 +1,123 @@
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+
+const nav = $('nav');
+const forms = $$('form');
+const left_form_button = $('.leftButton');
+const right_form_button = $('.rightButton');
+const left_input = $('.leftInput');
+const right_input = $('.rightInput');
+const left_list = $('.leftList');
+const right_list = $('.rightList');
+const garbage = $('.material-symbols-outlined');
+const lists = $$('li');
+
+//이벤트 위임을 이용해 버튼을 이용한 화면 전환 구현
+//애니메이션 효과 적용
+
+nav.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const target = e.target;
+    switch (target.id) {
+        case 'today_button' :
+            $('.right').classList.add('hidden');
+            $('.left').classList.add('full');
+            $('.left').classList.remove('hidden');
+            $('.right').classList.remove('full');
+            break;
+        case 'tomorrow_button' :
+            $('.left').classList.add('hidden');
+            $('.right').classList.add('full');
+            $('.right').classList.remove('hidden');
+            $('.left').classList.remove('full');
+            break;
+        case 'both_button' :
+            $('.right').classList.remove('hidden');
+            $('.left').classList.remove('full');
+            $('.left').classList.remove('hidden');
+            $('.right').classList.remove('full');
+            break; 
+    }
+
+})
+
+//Left + 버튼 클릭 시 Add 함수 호출하는 이벤트 
+
+left_form_button.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    left_list.appendChild(onAddLeft(left_input));
+
+})
+
+//Left 에 Add 하는 함수 
+
+function onAddLeft(left_input) {
+    const currentLi = document.createElement('li');
+    currentLi.innerHTML = left_input.value; 
+
+    //delete 아이콘 만들어서 리스트에 추가하기 
+    const currentDeleteBtn = document.createElement('span');
+    currentDeleteBtn.innerHTML = "delete";
+    currentDeleteBtn.classList.add('material-symbols-outlined');
+    currentLi.appendChild(currentDeleteBtn);
+
+    currentLi.classList.add('grid');
+
+    return currentLi;
+}
+
+//Right + 버튼 클릭 시 Add 함수 호출하는 이벤트 
+
+right_form_button.addEventListener("click", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    right_list.appendChild(onAddRight(right_input));
+})
+
+//Right 에 Add 하는 함수 
+
+function onAddRight(right_input) {
+    const currentLi = document.createElement('li');
+    currentLi.innerHTML = right_input.value; 
+
+    //delete 아이콘 만들어서 리스트에 추가하기 
+    const currentDeleteBtn = document.createElement('span');
+    currentDeleteBtn.innerHTML = "delete";
+    currentDeleteBtn.classList.add('material-symbols-outlined');
+    currentLi.appendChild(currentDeleteBtn);
+
+    currentLi.classList.add('grid');
+
+    return currentLi;
+}
+
+//Left 에서 휴지통 아이콘 클릭 시 삭제하는 기능 구현 
+
+left_list.addEventListener("click", (e) => {
+        e.stopPropagation();
+        const target = e.target;
+        switch (target.nodeName) {
+            case 'SPAN':
+            const n = e.target.parentNode;
+            left_list.removeChild(n);
+            break;
+        }
+
+    }
+)
+
+//Right 에서 휴지통 아이콘 클릭 시 삭제하는 기능 구현
+
+right_list.addEventListener("click", (e) => {
+    e.stopPropagation();
+    const target = e.target;
+    switch (target.nodeName) {
+        case 'SPAN':
+        const n = e.target.parentNode;
+        right_list.removeChild(n);
+        break;
+    }
+
+}
+)
diff --git a/week2/ToDoList/style.css b/week2/ToDoList/style.css
@@ -0,0 +1,122 @@
+* {
+    box-sizing: border-box;
+  }
+
+  html,
+  body {
+    height: 100vh;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .grid {
+    display: grid;
+  }
+
+  .center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* semantic tags */
+
+  header {
+    height: 100px;
+    background-color: red;
+  }
+
+  main {
+    width: 100%;
+    min-height: 700px;
+  }
+
+  nav {
+    height: 50px;
+    border-bottom: 1px solid black;
+  }
+
+  nav button {
+    margin-right: 10px;
+  }
+
+  section.left {
+    width: 50%;
+    border-right: 1px solid black;
+    padding-left: 20px;
+    position: relative;
+    transition-property: width;
+    transition-duration: 0.2s;
+    transition-timing-function: ease;
+  }
+
+  section.right {
+    width: 50%;
+    border-left: 1px solid black;
+    padding-left: 20px;
+    position: relative;
+    transition-property: width;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+  }
+
+  footer {
+    height: 30px;
+    width: 100%;
+    border-top: 1px solid black;
+    border-bottom: 1px solid black;
+    background-color: red;
+  }
+
+  /*button*/
+
+  button {
+    background-color: pink;
+    border: none;
+  }
+
+  /*form*/
+
+  form {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translate(-50%, 0);
+  }
+
+  form input {
+    min-width: 200px;
+  }
+
+  form button {
+    border-radius: 3px;
+    border: 1px solid black;
+  }
+
+  /*list*/
+
+  ul {
+    list-style: none;
+    padding-left: 10px;
+  }
+
+  li {
+    grid-template-columns: 9fr 1fr;
+    height: 50px;
+    padding-top: 20px;
+  }
+
+  .hidden { 
+      width: 0% !important;
+      height: 0;
+      padding: 0 !important;
+      overflow: hidden !important;
+      color: white;
+  }
+
+  .full {
+    width: 100% !important;
+
+  }
+
diff --git a/week2/TypeScript.md b/week2/TypeScript.md
@@ -0,0 +1,6 @@
+1. TypeScript는 무엇인가?
+TypeScript 의 근간이 되는 JavaScript 는 본래 브라우저를 위한 간단한 scripting language 로 사용되었다. 그러던 중 더 많은 사람들이 js 를 찾게 되고, 여러 기능(api 등)을 추가하며 현재의 보편적인 언어가 된 것이다. 태생이 간단한 코드 작성을 위한 언어이다 보니 다른 여느 개발 언어와 마찬가지로, 몇몇 오류들이 존재하는데 그 중 하나가 컴파일 과정에서 타입 오류를 체크하지 않는다는 점이다. 해당 오류는 간단한 프로그램을 작성할 때는 문제가 없을 수 있지만, 규모가 크고 유저가 많은 프로그램을 제작하는 경우라면 큰 문제가 될 수 있다. 이러한 js 의 단점을 보완하여 컴파일 과정에서 type 을 검사함으로써 대규모 개발도 안정적으로 진행할 수 있도록 돕는 언어가 바로 typescript 이다. 
+2. TypeScript를 이용한 개발을 꼭 해야 할까?
+개인 프로젝트 등의 간단한 개발을 하는 상황이라면 굳이 필요하지 않을 수도 있다. 그러나 유저가 많고 프로그램이 복잡하다면, 런타임 과정에서 예상치 못한 에러가 발생할 경우 프로그램이 중단될 수 있기 때문에, typescript 를 사용하는 것이 안정적으로 서비스를 운영하는 데에 도움이 될 것같다.
+3. TypeScript를 이용한 개발에서 중요한 것은 무엇이 있을까?
+typescript 가 js 에서 파생된 언어인 만큼, js 를 잘 숙지하는 것이 필요할 것 같다. 또 typescript 의 장점을 최대한 살리기 위해서는 타입 지정 시 any 사용은 최대한 지양해야 할 것 같다. 마지막으로, js 에서는 정상적으로 작동하는 구문들이 ts 에서는 에러로 인식되는 경우가 왕왕 있는데 (가령 number 타입을 빈 배열로 나누면, Js 에서는 infinity 가 되지만, ts 에서는 에러로 인식된다.) 이 경우 무조건적으로 ts 를 따를 것이 아니라, 에러를 ts에 맞게 수정할 것인지, 수정하지 않고 다른 코드를 추가하여 js에서의 값을 유지할 것인지에 대한 판단을 잘 하여 개발자가 의도한 바대로 프로그래밍하는 것이 중요할 것 같다.