[1주차] 김서연 미션 제출합니다. #3
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,60 +0,0 @@ | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> | ||
| <title>Todo-List</title> | ||
| <meta charset="utf-8" /> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Jua&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="todo-header"> | ||
| <h1 class="titles">To-do List</h1> | ||
| <div id="todayInfo"></div> | ||
| </div> | ||
| <div class="todo-container"> | ||
| <div id="inputField"> | ||
| <input | ||
| type="text" | ||
| id="todoInput" | ||
| placeholder="오늘의 할 일 입력" | ||
| onkeydown="keyCodeCheck();" | ||
| /> | ||
| <button type="button" id="addButton" onclick="makeTodoList();"> | ||
| + | ||
| </button> | ||
| <div id="currentStatus">❎ 0 ✅ 0</div> | ||
| </div> | ||
| <div id="grid"> | ||
| <div class="todo-field"> | ||
| <h3 class="titles">미완료 할 일</h3> | ||
| <ul id="todoList"></ul> | ||
| </div> | ||
| <div class="todo-field"> | ||
| <h3 class="titles">완료된 할 일</h3> | ||
| <ul id="completedList"></ul> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,141 @@ | ||
| // HTML이 로드되면 할 일 불러오기 | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| loadTodos(); | ||
| loadTodayInfo(); | ||
| }); | ||
|
|
||
| // Enter 키 입력 감지 | ||
| function keyCodeCheck(event) { | ||
| if ( | ||
| window.event.keyCode === 13 && | ||
|
There was a problem hiding this comment. window.event가 아닌 There was a problem hiding this comment. 처음에 There was a problem hiding this comment. 말씀해 주신 대로 |
||
| document.querySelector("#todoInput").value.trim() !== "" | ||
| ) { | ||
| makeTodoList(); | ||
| } | ||
| } | ||
|
|
||
| // 새로운 할 일 생성 함수 / 저장 데이터 불러오는 용 인자 | ||
| function makeTodoList(text = "", isChecked = false) { | ||
|
There was a problem hiding this comment. 새 할 일을 생성한다는 의미에서 |
||
| const todoInput = document.querySelector("#todoInput"); | ||
|
There was a problem hiding this comment. 자주 쓰이는 DOM요소들은 함수 바깥에 전역 스코프로 한번만 가져오고, 참조하면 좋을 것 같아요! |
||
| const inputValue = text || todoInput.value.trim(); | ||
|
There was a problem hiding this comment. 사용자 입력값을 js 내부에서가 아닌 함수의 인자로 받아서 텍스트를 처리할 수도 있을 것 같아요 |
||
|
|
||
| if (inputValue === "") return; | ||
|
|
||
| // 새로운 할 일 요소 생성 | ||
| const newLi = createTodoElement(inputValue, isChecked); | ||
|
|
||
| // 해야 할 일 목록에 추가 | ||
| updateTodoList(newLi, isChecked); | ||
|
|
||
| if (!text) todoInput.value = ""; // 직접 입력한 경우 입력창 초기화 | ||
| saveTodos(); | ||
| } | ||
|
|
||
| // 개별 할 일 요소 생성 | ||
| function createTodoElement(text, isChecked) { | ||
| // 리스트 생성 | ||
| const newLi = document.createElement("li"); | ||
|
|
||
| // 체크박스 생성 | ||
| const checkbox = document.createElement("input"); | ||
| checkbox.type = "checkbox"; | ||
| checkbox.checked = isChecked; | ||
|
|
||
| // 체크박스 이벤트 | ||
| checkbox.addEventListener("change", function () { | ||
| if (this.checked) { | ||
| newSpan.classList.add("checkedTodos"); | ||
| } else { | ||
| newSpan.classList.remove("checkedTodos"); | ||
| } | ||
| updateTodoList(newLi, this.checked); | ||
| saveTodos(); | ||
| }); | ||
|
|
||
| // 할 일 내용 | ||
| const newSpan = document.createElement("span"); | ||
| newSpan.textContent = text; | ||
|
|
||
| // 저장된 데이터 체크박스 활성화 | ||
| if (isChecked) newSpan.classList.add("checkedTodos"); | ||
|
|
||
| // 삭제 버튼 | ||
| const deleteButton = document.createElement("button"); | ||
| deleteButton.textContent = "del"; | ||
| deleteButton.classList.add("delete-button"); | ||
| deleteButton.addEventListener("click", function () { | ||
| newLi.remove(); | ||
| saveTodos(); | ||
| updateStatus(); | ||
| }); | ||
|
|
||
| newLi.append(checkbox, newSpan, deleteButton); | ||
| return newLi; | ||
| } | ||
|
|
||
| // 미완료/완료 할 일 개수 업데이트 | ||
| function updateStatus() { | ||
| const todoList = document.querySelector("#todoList"); | ||
| const completedList = document.querySelector("#completedList"); | ||
| const currentStatus = document.querySelector("#currentStatus"); | ||
|
|
||
| currentStatus.innerHTML = `❎ ${todoList.childElementCount} ✅ ${completedList.childElementCount}`; | ||
| } | ||
|
|
||
| // 미완료/완료 할 일 분리 | ||
| function updateTodoList(liElement, isChecked) { | ||
|
There was a problem hiding this comment. 완료목록, 미완료목록을 DOM 말고 배열로 관리해도 좋습니다. 지금도 문제는 없지만 배열로 관리했을 때 로컬스토리지 저장/로딩에 더 용이할 수 있을 것 같아요! |
||
| const todoList = document.querySelector("#todoList"); | ||
| const completedList = document.querySelector("#completedList"); | ||
|
|
||
| if (isChecked) { | ||
| completedList.appendChild(liElement); | ||
| } else { | ||
| todoList.appendChild(liElement); | ||
| } | ||
|
|
||
| updateStatus(); | ||
| } | ||
|
|
||
| // localStorage 저장 함수 | ||
| function saveTodos() { | ||
| const todos = []; | ||
|
|
||
| document.querySelectorAll("#todoList li, #completedList li").forEach((li) => { | ||
| const text = li.querySelector("span").textContent; | ||
| const isChecked = li.querySelector('input[type="checkbox"]').checked; | ||
| todos.push({ text, isChecked }); | ||
| }); | ||
|
|
||
| localStorage.setItem("todos", JSON.stringify(todos)); | ||
| } | ||
|
|
||
| // localStorage에서 데이터 불러오기 | ||
| function loadTodos() { | ||
| const todoList = document.querySelector("#todoList"); | ||
| const completedList = document.querySelector("#completedList"); | ||
|
|
||
| todoList.innerHTML = ""; | ||
| completedList.innerHTML = ""; | ||
|
|
||
| const savedTodos = JSON.parse(localStorage.getItem("todos")) || []; | ||
| savedTodos.forEach((todo) => { | ||
| const newLi = createTodoElement(todo.text, todo.isChecked); | ||
| updateTodoList(newLi, todo.isChecked); | ||
| }); | ||
| } | ||
|
Comment on lines
+120
to
+125
There was a problem hiding this comment. 지금 각 li를 만들 때마다 updateTodoList로 DOM을 재조작하는데 투두리스트가 많아지면 DOM 변경이 많아져서 성능적으로 불편함이 있을 것 같아요. 전역으로 let todos =[] 배열로 두고, 할 일 추가/수정으로 배열이 변경되었을 때 renderTodos() 이런 느낌으로 한번에 DOM을 리렌더링하는 설계도 고려해보면 좋을 것 같습니다. There was a problem hiding this comment. 확실히 리스트가 많아지면 말씀해 주신 방법대로 배열로 관리하는 게 성능 면에서 더 효율적일 것 같네요! 한 번 어떻게 적용해 보면 좋을지 고민해 봐야 할 것 같아요 좋은 피드백 감사합니다😊 |
||
|
|
||
| // 오늘의 날짜 업데이트 | ||
| function loadTodayInfo() { | ||
|
There was a problem hiding this comment. 처음에는 로컬스토리지에서 데이터를 불러오는 함수가 이런 관점도 있구나! 고민해 보시면 좋을 것 같습니다. There was a problem hiding this comment. 확실히 함수 쓰임에 따라 일관적으로 함수명을 작성하는 게 가독성 면에서 훨씬 좋겠네요!! 함수명, 변수명에 대해 조금 더 고민해 볼 필요가 있을 것 같아요. 좋은 피드백 감사합니다! 😊 |
||
| const todayInfo = document.querySelector("#todayInfo"); | ||
|
|
||
| var today = new Date(); | ||
|
There was a problem hiding this comment. var은 의도치 않는 스코프 이슈가 있을 수 있으니 let, const활용을 추천드립니다! There was a problem hiding this comment. 스코프에 대해 제대로 이해하지 못한 상태로 코드를 짜기 시작해서 별다른 기준 없이 변수를 선언했던 것 같아요.💦 이번 과제 공부하면서 조금 더 잘 이해하게 되었으니 말씀해 주신 대로 적용하고 다른 부분도 다시 한 번 되짚어 봐야 할 것 같아요. 감사합니다! |
||
| var year = today.getFullYear(); | ||
| var month = today.getMonth(); | ||
| var date = today.getDate(); | ||
| var day = today.getDay(); | ||
|
|
||
| var days = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]; | ||
|
|
||
| todayInfo.innerHTML = | ||
|
There was a problem hiding this comment.
|
||
| year + "년 " + (month + 1) + "월 " + date + "일 (" + days[day] + ")"; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
class, id를 사용하는 목적이 눈에 보이면 좋을 것 같아요. 저는 우선 class를 활용하고, 중복된 class명에서 따로 관리가 필요할 때 id를 사용합니다. 추후 리액트, Next.js에서는 id를 자주 사용하지 않지만, class명이나 활용에 있어 목적을 생각하면 더 좋은 코드를 짤 수 있다고 생각합니다 👍