2023-10-05 TIL

· 오늘 공부한 것

팀원 소개 페이지 제작(내일 배움 캠프 미니 프로젝트) : 구성한 와이어프레임으로 관리자페이지 제작(html, css 만 사용)

학습한 firebase를 프로젝트 내에 적용

학습한 jQuery를 사용해서 태그에 속성 부여

 

· 공부한 내용, 궁금한 내용, 부족한 내용

Firestore Database에서 자료를 가져올 때 getDocs를 사용해서 컬렉션 안에 있는 데이터를 모두 가져오고 getDoc은 하나의 내용을 가져오는데 이때 저장된 id를 통해서 가져올 수 있었다.

또한 전에 react를 사용할 때는 state에 가져온 정보를 저장해서 쉽게 사용할 수 있었는데 여기서는 html 태그에 가져온 id 정보를 저장해 보았다. 이 과정에서 객체 데이터를 한 번에 넣어 보려고 객체를 JSON 형태로 바꿔 보았는데 태그의 속성이 ""를 인식하다 보니 저장한 데이터 값이 { 으로 나왔다. 그 이유는 객체의 키값이 "로 시작하는데 data-id="{"name":"이승준", ....} 이런 식이다 보니 data-id 속성의 값이 "{" 이 형태로만 인식되어 나왔다. 그래서 id값만 넘기고 다시 firebase에 정보를 요청해서 받아오는 방식으로 해결하였다. 하지만 만약 객체가 저장이 됐어도 사용은 안 했을 거 같다. 왜냐하면 정보가 html 속성값에 들어가는 것은 말이 안 된다.

 

JSON형태로 객체를 data-data 속성에 담았지만 "{" 만 인식한 형태이다.

받아온 데이터로 화면 렌더링할 때 생성한 태그에 클릭 이벤트를 주는 방식을 찾아보았다. jQuery 다른 활용법들을 알고 싶다.

 

· 오늘 서칭 한 자료

https://velog.io/@yunsungyang-omc/HTML-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%86%8D%EC%84%B1-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-data-attribute\

(HTML) 데이터 속성 사용하기 (data attribute)

https://univdev.page/posts/firestore-read-data/

Firestore Database 데이터 읽기

https://java119.tistory.com/87

[jQuery || JavaScript] 동적 생성된 태그에 이벤트 주기(feat.append)

 

· 느낀 점

jQuery를 사용하면 간단하기는 하지만 애상하지 못한 곳에서 막히는 경우가 아직은 있다.

아직 firebase에서 firestore Database만 사용하고 있는데 Storage도 자주 사용할 거 같다.

태그에서 data 속성을 이해할 수 있었는데 알고 넘어가는 정도지 자주 사용하지 않을 거 같다.

html css만으로 페이지를 구성해 보았는데 왜 react와 같은 웹 프레임워크가 개발되었는지 알 거 같았다.

css는 사용하는 것은 간단한데 동작이나 반응형까지 생각하면 계속 공부해야 할 거 같다.