vite (3) 썸네일형 리스트형 17. TWEETING - Realtime [1] Firestore Database에서 실시간으로 쿼리의 변경 사항을 수신한다. onSnapshot 함수는 데이터베이스 및 쿼리와 실시간 연결을 생성하고해당 쿼리에 새 요소가 생성되거나 요소가 삭제되었거나또는 업데이트 됐을 때 쿼리에 알려준다. 문서를 한번 가져오는 것이 아닌 쿼리에 리스너를 추가한다.그리고 삭제,편집 또는 생성되었다는 알림을 받으면 해당 쿼리의 문서를 쭉 보면서 필요한 데이터를 추출한다. map을 통해 배열로 만들고 데이터를 추출한 후 tweet 객체를 생성하고tweet 객체 배열을 tweets 변수에 넣은 다음에 이 상태를 저장한다. timeline.tsximport { collection, getDocs, onSnapshot, orderBy, query } from "firebase/.. 02. Routing layout.tsximport { Outlet } from "react-router-dom";export default function Layout(){ return( layout )} App.tsximport { useState } from 'react'import { createBrowserRouter, RouterProvider} from 'react-router-dom';import Layout from './components/layout';import Home from './routes/home';import Profile from './routes/profile';import Login from './routes.. 01. Installation ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.devVite 툴은 다양한 프론트엔드 앱을 개발하는데 도움이 되는데 create-react-app을 사용해도 되고, Vite를 사용해도 결과는 같다. 1. CMD창에서 npm create vite@latest 명령어를 실행하면 vite 프로젝트가 생성된다. 2. vite의 최선 버전을 설치하겠냐고 묻는 프롬프트가 나올 수 있는데 yes라고 한다. (이미 설치했다면 해당 프롬프트가 나오지 않는다.) 3. Project name을 입력 후 엔터를 누른다. 4. 프레임워크를 선택해라고 나오는데 React를 선택한다. 5. TypeScript를 사용할 것인지 JavaScript를 사용할 것인지 물어볼텐데 Javasc.. 이전 1 다음
