Conversation
|
Review Questions 1.DOM은 무엇인가요? 2.이벤트 흐름 제어(버블링 & 캡처링)이 무엇인가요? 3. 클로저와 스코프가 무엇인가요? |
|
과제 진행 중 개선 및 학습한 부분 date input UI 개선 Todo 드래그 앤 드롭 기능 구현 드래그 UX 개선 색상 및 UI 가독성 개선 다크모드 UI 조정 달력 위치 UI 개선 |
waldls
left a comment
waldls
left a comment
There was a problem hiding this comment.
승연님 1주차 과제하시느라 수고 많으셨습니다! 드래그 UX까지 생각하신 점이 너무 멋있어요✨
React로 리팩토링한 버전도 기대됩니당 ㅎㅎㅎ
| body.dark-mode .hamburger { | ||
| color: var( --darkmode_hamburge); | ||
| } |
There was a problem hiding this comment.
CSS 변수를 활용해 다크모드를 구현하신 점이 체계적이라 좋은 것 같아요! 다만 .hamburger 스타일 부분에 오타가 있어 수정이 필요해 보입니다.
| /*체크박스 스타일*/ | ||
| .todo input[type="checkbox"] { | ||
| appearance: none; | ||
| /*flex-shrink: 0;*/ | ||
| width: 18px; | ||
| height: 18px; | ||
| border-radius: 5px; | ||
| border: 2px solid var(--bg_checkbox); | ||
| /*display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| transition: all 0.2s ease-in-out;*/ | ||
| cursor: pointer; | ||
| position: relative; | ||
| background-color: var(--bg_checkbox); | ||
| } |
There was a problem hiding this comment.
현재는 입력이 길어질 때 왼쪽의 체크박스가 찌그러지는 현상이 발생하는 것 같습니다!
체크박스에 flex-shrink: 0;을 주면 해결할 수 있을 것 같습니다. 관련된 문서 링크 하나 남기고 갑니다!
| /*할 일 텍스트 스타일*/ | ||
| .todo span { | ||
| flex-grow: 1; | ||
| font-size: 14px; | ||
| text-align: left; | ||
| } | ||
|
|
There was a problem hiding this comment.
현재 한국어는 줄바꿈이 잘 되는데, 띄어쓰기 없는 긴 영문이나 숫자는 박스를 뚫고 나가는 것 같아요 🥲
.todo span에 word-break: break-all; 속성을 추가하면 해결될 것 같습니다!
관련해서 참고할만한 블로그 글 하나 남깁니당
| function handleOutsideClick(event) { | ||
| if (!sidebar.contains(event.target) && !hamburger.contains(event.target)) { | ||
| closeSidebar(); | ||
| } |
There was a problem hiding this comment.
사이드바 외부 클릭 처리 로직에서 Early Return 패턴을 적용해 보셔도 좋을 것 같습니다!
사이드바나 햄버거 버튼 클릭처럼 '동작을 방해하지 않아야 할 상황'을 먼저 return으로 걸러내면, 본 로직을 중괄호 안에 가둘 필요가 없어 들여쓰기도 줄어들고 코드도 훨씬 직관적으로 변할 것 같아요~!
function handleOutsideClick(event) {
if (sidebar.contains(event.target) || hamburger.contains(event.target)) return;
closeSidebar();
}
Tutankhannun
left a comment
Tutankhannun
left a comment
There was a problem hiding this comment.
이번 주차 과제도 수고 많으셨습니다~~ 다크모드 설정, 순서 변경 등 다양한 기능을 추가한 점도 인상 깊었습니다. 이번 코드 리뷰에 달린 내용들 반영하여 다음주 과제도 잘 부탁드립니다~~
|
|
||
| // 이벤트 리스너 등록 | ||
| enterButton.addEventListener("click", addTodo); | ||
| input.addEventListener("keypress", (event) => { |
There was a problem hiding this comment.
웹 표준에서는 keypress보다는 keydown 혹은 keyup을 사용하는 것이 권장됩니다! 또한 한글 IME 이슈도 한번 보시면 좋을 것 같아요~
KeyboardEvent.key
input에 한글 입력 시 엔터 키 중복 실행 막기 (feat. isComposing)
| const todoText = document.createElement("span"); | ||
| todoText.textContent = text; | ||
| if (completed) { | ||
| todoText.style.textDecoration = "line-through"; |
There was a problem hiding this comment.
스타일 변경은 JS 인라인보다 CSS 클래스로 분리하는 것이 이후의 유지 보수에도 용이하고 더 간결하고 보기 좋은 코드가 됩니다~
|
|
||
| // 날짜 변경 (이전/다음) | ||
| function changeDate(days) { | ||
| const newDate = new Date(currentDate); |
There was a problem hiding this comment.
new Date(YYY-MM-DD) 형식의 문자열을 넘기면 UTC 기준으로 파싱되어 한국(UTC+9)에서 실행하면 실제로는 날짜가 하루 밀리는 버그가 생길 수 있습니다. const [y, m, d] = dateString.split("-")와 같이 스플릿 문자열을 사용하는 등의 방식을 고려해주셔도 좋을 것 같습니다!
| </main> | ||
| <script src="./main.js"></script> | ||
| </body> | ||
| </html> No newline at end of file |
There was a problem hiding this comment.
aside, nav 시맨틱 태그로 분리해서 코드 작성해주셔서 영역 구분과 가독성이 더욱 좋은 것 같습니다!
4 participants
No description provided.