RealTime (2) 썸네일형 리스트형 18. TWEETING - Realtime [2] 사용자가 자리를 비우거나 별도의 화면으로 이동하면 이벤트 리스너에 대한 구독을 취소한다.계속 켜두면 그만큼 비용을 지불하게 되기 때문이다. Realtime 기능을 사용하게 되면 데이터베이스에서 데이터를 읽을 때마다 비용을 지불하게 된다.비용이 크지 않고 무료로 많이 사용할 수 있지만 사용자가 보고 있으면 굳이 리스너를 쓸 필요가 없다. timeline.tsximport { collection, getDocs, limit, onSnapshot, orderBy, query } from "firebase/firestore"; import { useEffect, useState } from "react"; import { styled } from "styled-components";import { db } fr.. 17. TWEETING - Realtime [1] Firestore Database에서 실시간으로 쿼리의 변경 사항을 수신한다. onSnapshot 함수는 데이터베이스 및 쿼리와 실시간 연결을 생성하고해당 쿼리에 새 요소가 생성되거나 요소가 삭제되었거나또는 업데이트 됐을 때 쿼리에 알려준다. 문서를 한번 가져오는 것이 아닌 쿼리에 리스너를 추가한다.그리고 삭제,편집 또는 생성되었다는 알림을 받으면 해당 쿼리의 문서를 쭉 보면서 필요한 데이터를 추출한다. map을 통해 배열로 만들고 데이터를 추출한 후 tweet 객체를 생성하고tweet 객체 배열을 tweets 변수에 넣은 다음에 이 상태를 저장한다. timeline.tsximport { collection, getDocs, onSnapshot, orderBy, query } from "firebase/.. 이전 1 다음
