240417 TIL_팀 프로젝트1 (팀 소개 웹페이지 제작) > JS 문법 (data-id, event, prompt, DOM, 비동기 함수)

팀 프로젝트 -ing 팀 소개 웹페이지 제작

[오늘의 고뇌]

댓글 삭제와 수정...

삭제를 도저히 모르겠다. 정말 안 되면 display : none 방향으로 생각 중... 하지만 최대한 구현하고 싶다.

일단 가서... 삭제를 패스워드가 맞으면 삭제를 해야지... 해야 하는데...파이어베이스.... 해당 값을 id를 주지 못해서 해당 div를 어떻게 삭제하지? 하는 중...

질문할 것
1. 파이어베이스를 사용해서 생성된 댓글을 삭제하려고 하는데, removeChild() 매서드를 알게 됐다. 이걸 사용하려면

/ HTML 요소의 ID를 사용하여 해당 요소를 찾음
let elementToRemove = document.getElementById("myElement");

// 요소를 부모로부터 제거
parentElement.removeChild(elementToRemove);

여기서 "myElement"는 삭제하려는 요소의 id...나 변수.... 쓰면 되는데.... 어떤 식으로 선언해야 할 지 모르겠다... 라는 고뇌

=> (충격 깨달음1) 파이어베이스는 파이어베이스가 가진 라이브러리가 있었다!

2. 해당 문서를 찾아서 아 이렇게 저렇게 넣는 건가? 맞는 건가? 고뇌...

=> (충격 깨달음2) 조금 바보 같지만, import 를 안 했다...! 라이브러리 사용하면 import 해야 하는 구나...!

3. 관련 문서를 찾아가며 고뇌했지만, 여전히 id 값, 변수 등을 어떻게 해야 할 지 모르는 상태...

=> 어떻게 주는지는 여러가지 방향이 있지만, 나의 경우는 튜터님의 도움을 받아 ' Date.now() ' 로 해결하려고 하고, 1번 요소랑 합쳐서 여차저차 지정 완료...!

새로 배운 부분

1. data-id = "${id}" // data-(변수명) 과 dataset!!!
2. event
3. prompt를 많이 사용했는데, 해당 값을 입력하지 않을 때(null) return 필수
4. 지정 방법은 하나가 아니다... document.querySelectorAll("")
5. 동적 실행
6. async 와 await 의 관계

좀 더 꼼꼼하게 해야 할 부분

1. 오타 주의
2. 변수 지정하지 않았으면서 값 잡지 말 것!
3. 무작정 이거겠지? 하고 값을 넣지 말고, console.log 로 확인해보기..

어떻게 저렇게 변수 지정 열심히 하면서 노가다로 버튼 만들었다...
다음엔 수정 부분이 조금 더 예쁘길 바라면서...

내일 할 것
버튼 위치 CSS
개인 페이지 만들기
발표자 정하기