기초다지기/react14 firestore? Cloud Firestore 시작하기 | Firebase의견 보내기 Cloud Firestore 시작하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 빠른 시작에서는 Cloud Firestore를 설정하고 데이터를 추가한 후 Firebase Consolefirebase.google.comFirestoreFirebase에서 제공하는 NoSQL 형식의 클라우드 데이터베이스로 실시간 데이터 베이스와 클라우드 데이터 베이스의 기능을 통합한 서비스실시간 동기화 클라이언트 SDK를 통해 실시간으로 데이터 동기화 가능. 데이터 베이스에 변경 사항이 발생하면, 그 변경 사항이 즉시 모든 연결된 클라이언트에 전파. 채팅 애플리케이션이나 협업 도구와 같은 실시간 애플리케이션 쉽게 구축.. 2024. 7. 1. react useNavigate useNavigate 페이지를 이동할 때 사용, API 응답 후 등 특정 이벤트에 따라 사용자를 다른 경로로 이동특히 SPA (Single Page Application)에서 경로 전환 관리할 때 유용하다npm install react-router-domimport { useNavigate } from "react-router-dom";function useLogoutTimer() { const userIsInactive = useFakeInactiveUser(); const navigate = useNavigate(); useEffect(() => { if (userIsInactive) { fake.logout(); navigate("/session-timed-out"); .. 2024. 7. 1. react context 1. context 전역적으로 데이터를 공유할 수 있도록 도와주는 기능컴포넌트 트리 안에서 전역적으로 사용할 수 있는 값 관리Props Drilling을 피하고, 컴포넌트 간 상태를 쉽게 공유 가능 데이터를 공유하기 위한 방법로그인한 사용자의 정보, 다크모드 UI 테마, 언어 설정 등 useContext – ReactThe library for web and native user interfacesreact.dev 2. 장점prop drilling 방지중간 컴포넌트들을 거치지 않고 필요한 데이터를 직접 전달할 수 있어 문제 방지전역 상태 관리 간단 API (createContext, Provider, Consumer, useContext)외부라이브러리 설치 불필요3. 단점성능 이슈 : Context .. 2024. 7. 1. Firebase에서 onAuthStateChanged 메서드를 사용해 사용자 인증상태 변화 감지 1. 인증상태변화감지import { getAuth, onAuthStateChanged } from "firebase/auth";const auth = getAuth();onAuthStateChanged(auth, (user) => { if (user) { // User is signed in, see docs for a list of available properties // https://firebase.google.com/docs/reference/js/auth.user const uid = user.uid; // ... } else { // User is signed out // ... }});firebase.auth().onAuthStateChanged((us.. 2024. 6. 28. firebase 사용자 생성 후 비밀번호 인증 Firebase Authentication은 사용자를 인증하고 관리하는 기능을 제공 자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기의견 보내기 자바스크립트를 사용하여 비밀번호 기반 계정으로 Firebase에 인증하기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Firebase 인증을 사용해서firebase.google.com 1. Firebase 프로젝트 설정Firebase 콘솔에서 새 프로젝트를 만들고, 프로젝트 설정에서 웹 애플리케이션을 추가하여 Firebase SDK를 가져옴2. 이메일 및 비밀번호를 사용한 사용자 생성2-1 사용사 생성 함수// 사용자 생성 함수function signUpWithEmailPassword(email, pass.. 2024. 6. 28. firebase onAuthStateChanged 1.onAuthStateChangedFirebase Authentication 서비스에서 제공하는 메서드사용자 인증 상태의 변경을 실시간으로 감지하고 처리할 수 있음.로그인 / 로그아웃2. 사용법import { getAuth, onAuthStateChanged } from "firebase/auth";const auth = getAuth();onAuthStateChanged(auth, (user) => { if (user) { // 사용자가 로그인한 경우 console.log('User is signed in:', user); } else { // 사용자가 로그아웃한 경우 console.log('No user is signed in'); }});getAuth()firebase .. 2024. 6. 25. 이전 1 2 3 다음