[1주차] 이규호 미션 제출합니다.

README.md

@@ -1,58 +1,61 @@
 # 1주차 미션: Vanilla-Todo
 
-# 서론
+# 배포
+[이규호 Todo List](https://vanilla-todo-18th-raimixto7-leekyuho114.vercel.app/)
 
-안녕하세요 🙌🏻 18기 프론트엔드 운영진 **배성준**입니다.
+# Key Questions
 
-이번 미션은 개발 환경 구축과 스터디 진행 방식에 익숙해지실 수 있도록 간단한 **to-do list** 만들기를 진행합니다. 무작정 첫 스터디부터 React를 다루는 것보다는 왜 React가 필요한지, React가 없으면 무엇이 불편한지 느껴 보고 본격적인 스터디에 들어가는 것이 React를 이해하는 데 더 많은 도움이 될 것이라 생각합니다.
+- DOM은 무엇인가요?
 
-비교적 가벼운 미션인 만큼 코드를 짜는 데 있어 여러분의 **창의성**을 충분히 발휘해 보시기 바랍니다. 작동하기만 하면 되는 것보다 같은 코드를 짜는 여러가지 방식과 패턴에 대해 고민해 보시고, 본인이 생각한 가장 창의적인 방법으로 코드를 작성해 주세요. 여러분이 미션을 수행하는 과정에서 겪는 고민과 생각의 깊이만큼 스터디에서 더 많은 것을 얻어가실 수 있을 것입니다.
+DOM(문서 객체 모델)은 웹 페이지(HTML이나 XML 문서)의 콘텐츠 및 구조, 그리고 스타일 요소를 구조화 시켜 표현하여 프로그래밍 언어가 해당 문서에 접근하여 읽고 조작할 수 있도록 API를 제공하는 일종의 인터페이스이다. 다시 말해 자바스크립트 같은 스크립팅 언어가 쉽게 웹 페이지에 접근하여 조작할 수 있게끔 연결시켜주는 역할을 담당한다.
 
-막히는 부분이 있더라도 우선은 스스로 공부하고 찾아보는 방법을 권고드리지만, 운영진의 도움이 필요하시다면 얼마든지 슬랙 Q&A 채널이나 프론트엔드 카톡방에 질문을 남겨 주세요!
+DOM은 HTML 문서를 계층적 구조와 정보로 표현하고, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 따라서 HTML DOM 혹은 DOM tree라고 부르기도 한다.
 
-# 미션
 
-## 미션 목표
+- HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
 
-- VSCode, Prettier를 이용하여 개발 환경을 관리합니다.
-- HTML/CSS의 기초를 이해합니다.
-- JavaScript를 이용한 DOM 조작을 이해합니다.
-- Vanilla Js를 이용한 어플리케이션 상태 관리 방법을 이해합니다.
+1. `createElement`
+```javascript
+var newDiv = document.createElement('div');
+```
+createElement는 지정 tagName의 HTML Element를 생성하는 메서드이다. HTML Element를 생성해 append하기 때문에 node만 삽입이 가능하다.
 
-## 기한
+2. `insertAdjacentHTML`
+```javascript
+element.insertAdjacentHTML(position, text);
+```
+insertAdjacentHTML은 target HTML Element의 특정 위치에 원하는 node를 추가할 수 있는 메서드이다. 가독성이 좋다는 장점이 있다.
 
-- 2023년 9월 15일 금요일
+- Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
 
-## Key Questions
+Semantic은 '의미론적인'이라는 뜻을 가진 형용사이므로 Semantic tag는 의미가 있는 태그를 뜻한다. header, nav, section, article 등의 태그가 이에 해당한다.
+
+HTML 문서의 가독성과 유지보수가 쉽기 때문에 유지보수를 하거나 다른 작업자가 코드를 볼 때 파악하기 쉽다는 장점이 있다. 또한 검색엔진이 검색을 수행할 때 HTML 내의 태그를 분석할 수 있다.
 
-- DOM은 무엇인가요?
-- HTML (tag) Element를 JavaScript로 생성하는 방법은 어떤 것이 있고, 어떤 방법이 가장 적합할까요?
-- Semantic tag에는 어떤 것이 있으며, 이를 사용하는 이유는 무엇일까요?
 - Flexbox Layout은 무엇이며, 어떻게 사용하나요?
+
+Flexbox Layout은 CSS의 display 속성 중 하나로, 요소들을 가로 혹은 세로 축 정렬하고 유연하게 배치하는 레이아웃 모델이다. 
+
+CSS container에 `display:flex`를 이용하여 요소들의 정렬 방식을 조정하거나 정렬 방향을 변경한다. 또한 flex의 다양한 속성을 사용하여 공간을 분배하고 필요에 따라 크기를 조정한다.
+
 - JavaScript가 다른 언어들에 비해 주목할 만한 점에는 어떤 것들이 있나요?
-- 코드에서 주석을 다는 바람직한 방법은 무엇일까요?
 
-## 필수 요건
+1. 웹 브라우저에서 직접 실행되는 스크립트 언어이기 때문에 동적인 웹 페이즈를 만들거나 상호작용을 추가할 수 있다.
+2. 웹 브라우저 뿐만 아니라 서버 측 애플리케이션 개발에도 사용된다.
+3. javascript를 이용하여 작은 웹 사이트부터 대규모 웹 어플리케이션까지 높은 확장성을 가지고 있다.
+4. javascript는 다양한 라이브러리와 기능이 있어 다양한 기능을 빠르게 구현할 수 있다.
 
-- [결과 화면](https://vanilla-todo-17th-qras.vercel.app/)의 기능을 그대로 구현합니다.
-- 결과 링크의 화면 디자인 그대로 구현해도 좋고, 자신만의 디자인을 적용해도 좋습니다.
-- CSS의 Flexbox를 이용하여 레이아웃을 구성합니다.
-- JQuery, React, Bootstrap 등 외부 라이브러리를 사용하지 않습니다.
-- 함수와 변수의 이름은 lowerCamelCase로 짓습니다.
-- 코딩의 단위를 기능별로 나누어 Commit 메세지를 작성합니다.
+- 코드에서 주석을 다는 바람직한 방법은 무엇일까요?
 
-## 선택 요건
+주석은 코드의 가독성과 유지보수성을 향상시키기 위해 중요하다. 
+1. 의도를 설명하는 주석을 작성해야한다. 코드 자체가 무엇을 하는지 설명하는 주석은 필요하지 않다.
+2. 중요한 정보나 코드를 강조하기 위해 사용한다.
+3. TODO 및 FIXME와 같은 작업해아할 부분을 주석으로 사용한다.
+4. 협업에 있어 주석의 일관성을 가지고 컨벤션을 지키며 작성한다.
+5. 과도한 주석은 피한다.
 
-- 외부 폰트([눈누 상업용 무료폰트](https://noonnu.cc/))로 입맛에 맞게 꾸밉니다.
-- 브라우저의 `localStorage` 혹은 `sessionStorage`를 이용하여 다음 번 접속 시에 기존의 투두 데이터를 불러옵니다.
-- 이 외에도 추가하고 싶은 기능이 있다면 마음껏 추가하셔도 됩니다.
+# 후기
+- 코드의 구조나 여러 메서드의 용도를 정확히 파악하면서 구현하려하다 보니 저의 부족한 부분을 뼈져리게 느꼈습니다.. 차후 과제에서 더 단단해지기 위해 열심히 하겠습니다!! React로만 구현을 하다가 JavaScript로 기능들을 구현하니 부족한 개념도 보완하고 이해도가 높아지는 시간이였습니다! 
 
-# 링크 및 참고자료
+- 커밋컨벤션에 맞춰 git을 사용하는 거에 더 익숙해져야할 것 같아 github를 더 유용하게 사용하도록 노력하겠습니다😊
 
-- [HTML/CSS 기초](https://heropy.blog/2019/04/24/html-css-starter/)
-- [HTML 태그](https://heropy.blog/2019/05/26/html-elements/)
-- [FlexBox 가이드](https://heropy.blog/2018/11/24/css-flexible-box/)
-- [JS를 통한 DOM 조작](https://velog.io/@bining/javascript-DOM-%EC%A1%B0%EC%9E%91%ED%95%98%EA%B8%B0#append)
-- [localStorage, sessionStorage](https://www.daleseo.com/js-web-storage/)
-- [git 사용법](https://wayhome25.github.io/git/2017/07/08/git-first-pull-request-story/)
-- [좋은 코드리뷰 방법](https://tech.kakao.com/2022/03/17/2022-newkrew-onboarding-codereview/)

index.html

@@ -6,9 +6,28 @@
     <title>Vanilla Todo</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-
   <body>
-    <div class="container"></div>
+    <div class="container">
+      <div class="header">
+        <div class="logo">TODO-list</div>
+        <div class="detail">
+          <div>투두리스트를 작성하고 오늘 하루를 기록해요</div>
+          <div id="clock-js">00:00</div>
+        </div>
+      </div>
+      <div class="todoInput">
+        <input id="addTodo" type="text" placeholder=" Add TODO">
+        <button id="plusButton">+</button>
+      </div>
+      <div class="todoList">
+        <div class="todoCards">
+        <!--여기에 todo 추가-->
+        </div>
+        <div class="doneCards">
+        <!--여기에 done 추가-->
+        </div>
+      </div>
+    </div>
   </body>
   <script src="script.js"></script>
 </html>

script.js

@@ -0,0 +1,164 @@
+const addTodoInput = document.getElementById('addTodo'); //add todo input
+const plusButton = document.getElementById('plusButton'); //plusbutton press
+const clockTarget = document.getElementById("clock-js"); //clock
+
+function addTodo(){
+    const todoText = addTodoInput.value.trim();
+    if(todoText==""){
+        alert("TODO를 입력하세요.");
+        return;
+    }
+    else if(todoText.length > 60){
+        alert("60자 이하로 입력해주세요.");
+        return;
+    }
+    //todo card 추가
+    const todoCards= document.querySelector(".todoCards");
+    const todoCard = document.createElement("div");
+    todoCard.classList.add("todoCard");
+
+    const todoElem = document.createElement("div");
+    todoElem.classList.add("todoElem");
+    todoElem.textContent = todoText;
+
+    const checkbox = document.createElement("input");
+    checkbox.type = "checkbox";
+
+    const todoDelete = document.createElement("button");
+    todoDelete.classList.add("todoDelete");
+    todoDelete.textContent = "X";
+
+    todoCard.appendChild(todoElem);
+    todoCard.appendChild(checkbox);
+    todoCard.appendChild(todoDelete);
+
+    todoCards.appendChild(todoCard);
+    saveTodos();
+    addTodoInput.value="";
+}
+function saveTodos(){
+    const todoCards = document.querySelectorAll(".todoCard");
+    const todos = [];
+    todoCards.forEach((todoCard)=>{
+            const todoElem = todoCard.querySelector(".todoElem").textContent;
+            const isChecked = todoCard.querySelector("input[type='checkbox']").checked;
+            todos.push({text: todoElem , checked : isChecked});
+        }
+    )
+    localStorage.setItem("data",JSON.stringify(todos));
+
+}
+function loadTodos(){
+    const localTodos = localStorage.getItem("data");
+    if(localTodos){
+        const todos = JSON.parse(localTodos);
+        todos.forEach((todo)=>{
+            const todoCard = document.createElement("div");
+            todoCard.classList.add("todoCard");
+
+            const todoElem = document.createElement("div");
+            todoElem.classList.add("todoElem");
+            todoElem.textContent = todo.text;
+
+            const checkbox = document.createElement("input");
+            checkbox.type = "checkbox";
+            checkbox.checked = todo.checked;
+
+            const todoDelete = document.createElement("button");
+            todoDelete.classList.add("todoDelete");
+            todoDelete.textContent = "X";
+
+            todoCard.appendChild(todoElem);
+            todoCard.appendChild(checkbox);
+            todoCard.appendChild(todoDelete);
+            if(todo.checked){
+                const doneCards= document.querySelector(".doneCards");
+                doneCards.appendChild(todoCard)
+                todoCard.classList.add("checked");
+                todoElem.style.textDecoration = "line-through";
+            }    
+            else{
+                const todoCards= document.querySelector(".todoCards");
+                todoCards.appendChild(todoCard)
+                todoElem.style.textDecoration = "none";
+            }
+        })
+    }
+    else{//localStorage가 없는경우
+        const localTodos = "[]";
+        localStorage.setItem("data",localTodos);
+    }
+}
+function handleClick(event){//click 핸들러
+    const clickedElement = event.target; // click event element
+    if(clickedElement.classList.contains("todoDelete")){
+        deleteTodo(clickedElement);
+    }
+    else if(clickedElement.type==="checkbox"){
+        handleCheckBoxClick(clickedElement);
+    }
+}
+function deleteTodo(deleteButton){//Todo 지움
+    const todoCard = deleteButton.parentElement;
+    const Cards = todoCard.parentElement;
+    if(todoCard.checked){//done에서 지우기
+        // const doneCards = document.querySelector(".doneCards"); 오류 발생
+        Cards.removeChild(todoCard);
+    }
+    else{
+        // const todoCards = document.querySelector(".todoCards");
+        Cards.removeChild(todoCard);
+    }
+    saveTodos();
+}
+function handleCheckBoxClick(checkedElement){
+    const todoCard = checkedElement.parentElement;
+    const todoElem = todoCard.querySelector(".todoElem");
+    if(checkedElement.checked){//체크되면 done으로 옮기기
+        const doneCards = document.querySelector(".doneCards");
+        todoCards.removeChild(todoCard);
+        doneCards.appendChild(todoCard);//doneCards로 붙이기
+        todoCard.classList.add("checked");//checked로 바꾸기
+        todoElem.style.textDecoration= "line-through"; //취소선 긋기
+    }
+    else{//체크 풀리면 todo 으로 옮기기
+        const todoCards = document.querySelector(".todoCards");
+        doneCards.removeChild(todoCard);
+        todoCards.appendChild(todoCard);
+        todoCard.classList.remove("checked");
+        todoElem.style.textDecoration= "none";
+    }
+    saveTodos();
+};
+//plusButton과 add Todo enter 클릭 이벤트 핸들러
+plusButton.addEventListener('click',addTodo);
+addTodoInput.addEventListener("keyup", (e)=>{
+    if(e.key === "Enter"){
+        addTodo();
+    }
+})
+//deleteButton,checkbox click 이벤트핸들러
+const todoCards = document.querySelector(".todoCards");
+const doneCards = document.querySelector(".doneCards");
+todoCards.addEventListener("click",handleClick);
+doneCards.addEventListener("click",handleClick);
+// clock 출력
+function clock(){
+    const date = new Date();
+    const month = date.getMonth();
+    const clockDate = date.getDate();
+    const day = date.getDay();
+    const week = ['일','월','화','수','목','금','토'];
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const seconds = date.getSeconds();
+    clockTarget.innerText=`${month+1}/${clockDate} ${week[day]}요일 ${hours < 10 ? `0${hours}` : hours}:${minutes < 10 ?  `0${minutes}` : minutes}:${seconds < 10 ? `0${seconds}` : seconds}`;//두자릿수 유지를 위한 삼항연산자
+}
+
+function init(){
+    clock();
+    setInterval(clock,1000);
+    loadTodos();
+}
+
+init();

style.css

@@ -0,0 +1,99 @@
+@font-face {
+    font-family: 'GmarketSansMedium';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/GmarketSansMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+body{
+    background-color: black;
+    color : #ECECEC;
+}
+.container{
+    display: flex;
+    flex-direction: column;
+    align-items: center; /*column 방향이기 때문에 align 사용*/
+    font-family: 'GmarketSansMedium';
+}
+.header{
+    display: flex;
+    height: 150px;
+    width: 500px;
+    align-items: center;
+}
+.logo{
+    font-size: 2em;
+    font-weight: 700;
+    width: 300px;
+}
+.detail{
+    font-size: 1em;
+    width: 180px;
+}
+#clock-js{
+    padding-top: 5px;
+}
+.todoList{
+    display:flex;
+    flex-direction: column;
+    width: 450px;
+}
+.todoInput{/*input container*/
+    display:flex;
+    height:35px;   
+    padding-bottom: 5px;
+}
+input[type=text]{/*input 태그 따로 설정*/
+    background-color: black;
+    color: #ECECEC;
+    border: solid 2px #ECECEC;
+    border-radius: 6px;
+    width: 400px;
+}
+#plusButton{
+    background-color: black;
+    color: #ECECEC;
+    border: solid 2px #ECECEC;
+    border-radius: 6px;
+    width: 35px;
+    margin-left: 5px;
+    transition : border 0.3s, color 0.3s;
+}
+#plusButton:hover{
+    border : solid 2px #5f5f5f;
+    color : #5f5f5f;
+}
+.todoCard{
+    background-color: #ECECEC;
+    color : black;
+    display:flex; /*todoElem 세로축 가운데 정렬*/
+    align-items:center;
+    justify-content:space-between;/* item 사이 간격 균일하게 */
+    height: 100px;
+    margin : 7px 0;
+    border-radius: 8px;
+}
+.todoCard.checked{
+    transition : opacity 0.3s;
+    opacity: 0.5;
+}
+.todoCard.checked:hover{ /*마우스 올렸을 때 살짝 밝게*/
+    opacity: 0.6;
+}
+.todoElem{
+    flex:1; /*여백 다 채우게끔*/
+    margin-left:30px;
+}
+input[type=checkbox]{
+    margin-left: 20px;
+}
+.todoDelete{
+    border: none;
+    margin-bottom: 80px;
+    margin-right: 5px;
+    font-size: 7px;
+    border-radius: 2px;
+    transition : background-color 0.3s;
+}
+.todoDelete:hover{
+    background-color: #b1b1b1;
+}