[1주차] 오유진 과제 제출합니다.#9
Conversation
|
Review Questions DOM은 무엇인가요? 요거 질문에 대한 답변도 달아주시면 감사하겠습니당! |
Wannys26
left a comment
Wannys26
left a comment
There was a problem hiding this comment.
고생많으셨습니다~!!
유진님 2주차때도 좋은 코드 기대하겠습니다!
열심히 해주셔서 감사해요 ㅎㅎ
There was a problem hiding this comment.
2주차 react 마이그레이션 과정에서는 localStorage 한번 활용해보셨으면 합니당!
| li.innerHTML = ` | ||
| <label class="checkbox-container"> | ||
| <input type="checkbox" class="todo-checkbox" ${ | ||
| todo.completed ? "checked" : "" | ||
| }> | ||
| <span class="checkmark"></span> | ||
| </label> | ||
| <p class="todo-text">${todo.text}</p> | ||
| <button class="delete-button">삭제</button> | ||
| `; |
There was a problem hiding this comment.
innerHTML 사용이 적절할지? 에 대한 고민을 해보실 수 있는 링크 첨부해드립니당!
https://github.com/CEOS-Developers/vanilla-todo-21th/pull/6/files#r1997513080
| .date-controller { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| gap: 20px; | ||
| } |
There was a problem hiding this comment.
민교님 리뷰 코멘트
민교님 리뷰랑 동일한 내용인데, date 값이 변함에 따라 양 옆 버튼이 움직여서, 이 점 수정하면 좋을거 같습니당!
| #submit-button { | ||
| background-color: #f7e600; | ||
| color: #3a1d1d; | ||
| border: 0; | ||
| border-radius: 10px; | ||
| padding: 5px 10px; | ||
| font-weight: 500; | ||
| } |
There was a problem hiding this comment.
여기에도 cursor: pointer; 추가해주시면 좋을거 같아용!
추가로 deleteButton 처럼 hover시에 효과도 넣어주면 좋을거 같습니다~
| .delete-button { | ||
| background-color: #3a1d1d; | ||
| color: #f7e600; | ||
| border: none; | ||
| border-radius: 12px; | ||
| padding: 8px 15px; | ||
| cursor: pointer; | ||
| font-weight: bold; | ||
| } |
There was a problem hiding this comment.
텍스트가 길어졌을때, 삭제 버튼의 공간이 부족하게 됩니당~!
flex-shrink: 0; 추가해주시면 좋을거 같아요
| } | ||
|
|
||
| function getDateKey(date) { | ||
| return date.toISOString().split("T")[0]; |
There was a problem hiding this comment.
toISOString()을 사용하면 key로 로컬 날짜가 아니라, UTC 기준 날짜 기반 문자열을 반환해서 로컬 날짜와 다른 키로 저장될 수 있어요.
현재는 잘 동작하지만, 일관성 측면에서 ISOString() 사용보다 getFullYear(), getMonth(), getDate()를 활용해 로컬 기준'YYYY-MM-DD' 문자열을 직접 생성하는 방식이 더 좋을 수도 있을 것 같아요.
브라우저 콘솔에 코드 입력해보시면 확인하실 수 있습니다!
const testDate = new Date(2026, 2, 16, 1, 0, 0);
console.log("로컬:", testDate.toString());
console.log("ISO:", testDate.toISOString());
console.log("date key:", testDate.toISOString().split("T")[0]);
| li.innerHTML = ` | ||
| <label class="checkbox-container"> | ||
| <input type="checkbox" class="todo-checkbox" ${ | ||
| todo.completed ? "checked" : "" | ||
| }> | ||
| <span class="checkmark"></span> | ||
| </label> | ||
| <p class="todo-text">${todo.text}</p> | ||
| <button class="delete-button">삭제</button> | ||
| `; |
There was a problem hiding this comment.
todo.text는 html input 태그에서 가져오는 사용자 입력값인데, innerHTML에 그대로 삽입하기보다는 textContent로 넣는 게 더 안전해보여요.
문서에서도 innerHTML은 문자열을 HTML로 그대로 파싱하는 API라서 injection 공격에 취약하다고 적혀있어요.
🔗 https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
예를 들어, 사용자가 '<b>코드 리뷰하기</b>'라고 입력하면 Bold체로 할 일이 등록되는 것을 확인하실 수 있을 거에요.
| </head> | ||
| <body> | ||
| <header> | ||
| <span>To Do</span> |
There was a problem hiding this comment.
To Do는 페이지의 대표 제목이니, span보다는 h1 같은 heading 태그를 사용하는 것도 좋을 것 같아요.
시맨틱 구조가 더 명확해지고 문서 의미도 더 잘 드러날 것 같습니다!
| todoActions.addTodo(text, getDateKey(currentDate)); | ||
| todoInput.value = ""; | ||
| render(); | ||
| } |
There was a problem hiding this comment.
입력값 앞뒤 공백을 제거하고 빈 문자열을 한 번 더 체크해주신 점이 좋은 것 같습니다!
추가로 등록 후 다시 바로 입력할 수 있게 todoInput.focus()까지 넣어주면 사용성이 더 좋아질 것 같아요 :)
|
|
||
| .delete-button { | ||
| background-color: #3a1d1d; | ||
| color: #f7e600; |
There was a problem hiding this comment.
color: #3a1d1d;
background-color: #f7e600;
색상 값이 여러 군데 반복되고 있어서, 이후 스타일 수정 시 한 번에 관리하기 쉽도록 CSS 변수로 빼두는 것도 좋을 것 같아요!
4 participants
https://vanilla-todo-23rd-seven.vercel.app
평소 리액트나 Next.js를 사용할 때는 당연하게 여겼던 상태 변경에 따른 자동 렌더링이 JS에서는 얼마나 힘든 일인지 느낄 수 있었습니다.
데이터가 변할 때마다 DOM 요소를 직접 조작하여 화면을 업데이트해야 하는 과정이 조금 낯설고 힘들었지만, 이 과정을 통해 브라우저가 화면을 그리는 기본 원리를 깊이 이해할 수 있었습니다."
날짜별로 해당 일의 투두만 보여주기 위해 filter 등을 사용하여 리액트의 useState와 비슷하게 구현하려고 노력했습니다.
기본적인 는 스타일링하기 까다롭다고 하여 display: none으로 설정하고 대신 에 .checkmark를 부여하여 보다 정교하고 간단하게 스타일링할 수 있었습니다.
단계별로 과정이 마무리될 때마다 커밋하는 습관을 들여야 하는데 작업하다보니 자꾸 잊어버려서 이번 과제에서도 마지막에 한꺼번에 커밋하게 되었습니다. 특히 협업에서 단계별 커밋이 서로 소통할 때 중요하기 때문에 다음 과제부터, 앞으로 꾸준히 단계별로 커밋하는 습관을 들이기 위해 노력하겠습니다.