231130 TIL

html 사용자 정의 데이터 속성 data-

 

방명록의 수정과 삭제 기능을 구현하면서

데이터베이스에 저장되어있는 값을 어떻게 불러오는가 에 대한 고민에 프로젝트 둘쨋날 내내 머리를 싸맸었다.

서치를 하면서 주워온 삭제기능 코드를 하나하나 읽어보는데 <div>안에 class 선언 말고도 

이렇게 처음 보는 속성들이 들어있었다.

저 변수들은 여기서 나온 것인데 getDocs 를 통해 collection 속 docs를 불러오고 각각의 doc에서 가져와서 선언한 변수들을 <div> 안에 사용자 정의 데이터로서 추가적으로 저장한 것이다.

그리고 수정 과 삭제 버튼을 클릭했을 때도 그 값을 불러올 수 있도록 버튼 각각의 속성에 사용자 정의 데이터로서 붙여넣었다. 이렇게 추가적으로 넣은 값을 수정과정과 삭제과정에서 계속 이용한다. 급한것 해치우고 천천히 보니까 재밌다. 방명록 기능만 따로 떼서 내가 정리해봐야겠다.

 

위에서 사용한 것과 같은 것을 html의 데이터셋 속성이라고도 하고 html 의 변수 역할이라고도 한다고한다.

기본적으로 태그 내에 data-를 기재하고 그 뒤에 사용자가 정의하고 싶은 속성명과 속성값을 써준다.

하나의 태그에 여러 속성을 저장하고 불러올 수 있어서 정말 편리한 것 같다.

처음 수정과 삭제기능을 시도할 때에는 도대체 문서ID를 어떻게 가져오는지 이해가 안됐었다.

create read 기능은 foreach 함수를 통해서 모든 값이 나오니까 하나씩 변수를 지정해주면 됐었는데

작성되어 있는 방명록에서 내 눈에 보이는 거라곤 이름과 내용뿐이었으니깐...

data-

---

발표 연습하는데 나 이정도로 발표를 못했었나 자괴감이 든다.......