[TIL]230609

문제점

수정 버튼 -> 비밀번호 입력창 -> 취소 버튼 클릭 -> 다시 수정 버튼 클릭 -> 비밀번호 확인 -> 수정한 것 저장
위에 과정을 수행하면 수정되었습니다가 두번 출력되는 것을 보니, 수정하는 함수가 멈추지 않고 실행되고 있는 것 같아서 수정이 취소하고 다시 수정을 시도하는 것 만큼 실행되는 문제가 발생하는 것 같다

시도해본 것

취소버튼 위치를 업데이트 함수 내에서 위치를 변경해봤다.
변수를 하나 추가해서 t/f로 지정해서 실행해봤다
취소 버튼이 실행되면 false를 반환하도록 해봤다.

• 생각해본 것
  함수를 독립적으로 분리해서 t/f로 분리하면 될 것 같은??
  그냥 alert창 없애기

해결방안

질문을 통해 이벤트 제거 메서드가 있는 것을 알게 되었다.

element.removeEventListener(type, eventListener);

확인 버튼을 눌렀을 때 함수를 따로 빼주고 확인 버튼을 눌렀을 때 클릭 이벤트가 발생하도록 분리해주었다.

const handleConfirmButton = () => {}
confirmButtons.addEventListener("click", handleConfirmButton);

취소 버튼이 눌러졌을 때 이벤트를 지워주는 동작을 추가해주었다.

cancelButton.addEventListener("click", () => {
    confirmButtons.removeEventListener("click", handleConfirmButton);

  });

js특강 SPA

js로 spa를 만들 때에는 hash를 사용하여 routing #/html 로 이동한다.
hashed routing

요즘에는 잘 사용하지 않는다.
js 번들러를 사용하기 때문
parcel -> 가벼운 번들러

alias : 별칭

?? : null병합 연산자

jsDoc : js를 문서화 -> /***/