Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[1주차] 박지수 미션 제출합니다. #11

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

[1주차] 박지수 미션 제출합니다. #11

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e43e3ee
feat: html 구현
jsomnium Sep 7, 2024
3a98b25
style: css 설정
jsomnium Sep 7, 2024
bc1bf1d
feat: 할 일 추가 기능, 오늘 날짜 띄우기
jsomnium Sep 7, 2024
e66a020
feat: 엔터키로 할 일 추가
jsomnium Sep 7, 2024
6c0f6a4
docs: 문서 수정
jsomnium Sep 7, 2024
e84a2e8
docs: 문서 수정(2)
jsomnium Sep 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion jsomnium/todo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,10 @@ function addTodo() {

newTodoInput.value = '';
}
}
}
// 엔터키로 할 일 추가 가능
newTodoInput.addEventListener('keydown', (e) => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

버튼 클릭시 할일이 1개씩 잘 추가되는 반면, 엔터키를 누르면 할일이 항상 2개씩 중복 추가하는 문제가 있는 것 같아요!!
문제의 원인은 'keydown' 이벤트 발생 시점 때문인 것 같은데요,
'keydown' 이벤트는 모든 키를 눌렀을때 발생하는 이벤트로, 문자/숫자/특수문자/enter 키를 눌렀을 때는 '연속적으로' 발생한다고 해요!!
이벤트 핸들러 내에 콘솔로 찍어보면 엔터키를 한번만 클릭했음에도 2번 출력되는걸 볼 수 있네요..!
image

지금 필요한 건 일회성 동작을 보장하는 방법인데, 이를 위해선 keydown 이벤트 말고, keyup 이벤트를 사용하는 것을 추천드려요!
keyup 이벤트는 키를 눌렀다가 뗐을 때 한 번만 발생하므로, 연속적인 이벤트 발생을 방지할 수 있어요.

keypress 이벤트도 가능하긴 하나, 공식 문서에서 '폐지'되었으므로 사용하지 않을 것으로 권장해요.

if (e.key === 'Enter') {
addTodo();
}
});