분류 전체보기73 [React+Vite/TS] firebase 실시간으로 데이터 업데이트 하기(onSnapshot) https://jee0.tistory.com/35 [React+Vite/TS] Firebase 쿼리와 패치1. 인터페이스 작성사진은 없을 수 있음2. useEffect를 사용하여 fetch 함수(쿼리)를 불러 올 것이다.firebase의 query 함수를 사용query(대상 컬렉션, 쿼리 조건 지정)대상 컬렉션 지정 시 firebase의 collectionjee0.tistory.com위에서는 onDocs 를 사용하여 데이터를 불러왔지만, 실시간으로 데이터를 화면에 반영시키고 싶다. 이럴 때 firebase의 onSnapshot 함수를 사용한다. 1. 한 번만 가져오는 onDocs와 달리, 쿼리에 리스너를 추가하는 onSnapshot 사용즉, 지정한 쿼리(여기에서는 jweetsQuery 라는 쿼리)에 대한.. 2024. 5. 31. [React+Vite/TS] Firebase 쿼리와 패치 1. 인터페이스 작성사진은 없을 수 있음2. useEffect를 사용하여 fetch 함수(쿼리)를 불러 올 것이다.firebase의 query 함수를 사용query(대상 컬렉션, 쿼리 조건 지정)대상 컬렉션 지정 시 firebase의 collection 함수 사용collection(firestore 인스턴스, 컬렉션 이름)생성 순으로 내림차순 하기 위해 firebase의 orederBy 함수를 사용3. 쿼리가 생성되었고, 이 쿼리를 사용하여 불러온 데이터를 저장하는 document를 가져올 것이다.firebase의 getDocs 함수를 사용getDocs(작성한 쿼리)이 함수는 쿼리의 결과인 QuerySnapshot를 반환한다.이 결과값으로 사진과 같이 여러 기능을 사용할 수 있다.이 결과값의 docs와 .. 2024. 5. 30. [React+Vite/TS] Firebase로 쉽게 Github 로그인 구현하기 1.Firebase - Authentication 에 들어온 뒤 다음과 같이 진행 2. https://github.com/settings/developers 접속하여, New OAuth App 생성해주기Authorization callback URL 만 Firebase의 콜백 URL로 작성해주면 된다.생성된 클라이언트 ID와 Secrets 를 Firebase에 작성해주자주의! Secrets는 절대 공개되어서는 안됨! 3. 코드 작성해주기 (팝업 or 리다이렉트)export default function GithubButton() { const navigate = useNavigate(); const onClick = async () => { try { const provider = .. 2024. 5. 27. [React+Vite/TS] 에러핸들링과 로그인, 공통 컴포넌트 분리하기 1. 회원가입 시 catch 문에 에러핸들링 작성catch (e) { // 에러 핸들링 // FirebaseError 클래스의 에러인 경우 (e.g. 이메일 중복 등..) if (e instanceof FirebaseError) { setError(e.message); } 이미 가입된 이메일로 가입 시도를 하는 경우, 에러를 콘솔에 찍어보면 아래와 같이 나온다. 위의 FirebaseError 를 살펴보면 code와 name, Error가 extends 됐기 때문에 message가 있는 것을 확인할 수 있다. 따라서 에러가 catch될 때, 설정해두었던 Error 상태에 이 FirebaseError의 message를 코드와 같이 set 해준 후,중복 이메일.. 2024. 5. 27. 이전 1 ··· 9 10 11 12 13 14 15 ··· 19 다음
