2023-10-26 본 캠프 16일차 / 35일차 TIL

2023-10-26 본 캠프 16일차 / 35일차 TIL

주요진행사항

- 팀과제 진행

---

팀과제 진행

기능 추가

동적생성된 각 카드의 수정버튼과 삭제 버튼을 클릭시, 비밀번호 비교를 진행 후 각 이벤트 실행

---

발생 문제

비밀번호 비교를 위한 모달창이 한개이기 때문에 이 모달창에 각 카드의 비밀번호를 전달해야하며, 비밀번호 비교가 이루어진 후 삭제버튼이였다면, 해당카드를 삭제해야하고, 수정버튼이라면 해당카드의 textArea와 이외 버튼들을 활성화 시켜야한다. 따라서 모달창에 카드에 대한 정보를 보내는 부분에서 문제가 발생하였다.

---

문제 해결

동적생성이 이루어 질 때 수정, 삭제 버튼에 data-key 라는 속성을 부여하여 각 리뷰카드의 key를 추가하였다.

이 버튼들이 클릭 되었을 시 모달창에도 동일하게 data-key 라는 data속성과 data-mode라는 속성을 부여하였다.

data-mode는 삭제이벤트인지 수정이벤트인지 알려주기 위해 추가하였다.

삭제 버튼 클릭시

수정 버튼 클릭 시

모달창에서 비밀번호 비교는 확인버튼을 클릭했을 시 이루어지며

이 때 사용자 입력값과 비교할 비밀번호 데이터는 확인버튼의 부모요소 즉, 모달창에 접근하여 가져오며, 이때 data-key에 접근하여 키값을 가져온다.

localStorage에서 해당 키값과 일치하는 데이터를 가져온다.

---

느낀점

동적생성을 통해 여러 DOM 요소를 제작하고, 한개의 모달창에서 각 카드의 이벤트를 부여하려고 하니 접근법이 어려웠다. 카드 내부에서 이벤트를 처리하는 것이 가장 편하겠지만, 사용자의 요청에 의해 이번 예시처럼 다른 요소를 통해 비교를 하는 경우도 생각해볼 수 있는 좋은 기회였던 것 같다.

 

ps. 매니저님의 오늘의 명언 "비타민C + 소금 => 결석" 메모..