공부하는 비오

firestore().collection에는 삭제와 수정기능이 없었다. 하지만 firestore().doc 에는 delete와 update 메서드가 있다. 이 두 메서드를 사용해 삭제하고 수정해보자. 삭제하기 delete도 promise다. 그러므로 async를 사용해주자. 하지만 snapshot이 실시간으로 데이터를 보여주기때문에 굳이 사용하지 않아도 괜찮다. 매우 쉽게하려고 firebase를 사용하는거긴한데, 메서드들이 다 있어서 수정삭제조차 이렇게 쉬울줄 몰랐다. 허허 firestore().doc('컬렉션이름/문서id').delete(); 문서id를 알아야 사용할 수 있기 때문에 꼭 snapshot메서드를 사용할때 id를 넣어주어야한다. (어차피 key문제 때문에 id를 사용하긴 했었다.) 수정하기..

Firebase 2020. 11. 25. 16:57

firestore().collection('콜렉션이름')에는 onSnapshopt이라는 메서드가 있다. 이 메서드를 사용하면 실시간으로 정보를 가져올 수 있다. get대신 snapshot을 사용하여 실시간으로 DB를 받아와보자. onsnapshot 안에는 docs라는 객체가 있다. docs를 위와같은 객체로 정렬 후 콘솔에 찍어보면, 데이터를 다루기에 익숙한 모양이 나온다. (콘솔에서 docs만 살펴보면 읽을 수 없는 모양이 나온다.) setNwwets 해줌. +++ 이렇게만 하면 id순서대로 불러오기때문에, 작성 순서대로 정리가 안되어있을 수도 있다. 순서대로 화면에 나타나게 하기 위해서는 orderBy( ) 메서드를 사용한다.

Firebase 2020. 11. 25. 13:50

멘션을 만든 사용자 이름 저장하기. userObj라는 state를 만들어, 거기에 사용자 이름을 저장한다. userObj는 props로 Home에 넘겨줌. userObj를 콘솔에 찍어보면 uid라는 id를 가지고 있는 것을 확인 할 수 있다. nweets colletion에서 creatorId 추가. :) userObj는 firebase.auth().currentUser 값과 동일하다.

Firebase 2020. 11. 25. 13:38

firebase의 Cloud Firestore를 DB로 사용. firebase/firesotre을 import. firebase.firestore()을 export. firestore.collection의 add메서드를 사용하여 사용자가 입력하여 제출한 값을 firestore에 더해준다. dbservice.collection('콜렉션이름').add({ nweet: nweet(state의 값으로 사용자가 입력한 값을 받아옴)} get메서드를 사용하여 firestore에서 정보를 가져온다. get은 promise API이므로 비동기처리를 해주어야한다. firebase.firestore( ).collection('콜렉션이름').get( ); 을 콘솔에 찍어보면 이상한 모습의 객체를 반환하는 것을 확인할 수 있..

Firebase 2020. 11. 24. 21:48

새로고침 시 첫 화면으로 라우팅하는 방법은 두가지가 있다. 1. Redirect 2. useHistory Redirect Redirect의 경우, 새로고침시 *(모든페이지)에서 '/'로 라우팅해준다. 2. useHistory router에서 제공하는 HOOK이다. useHistory().push('/') 이렇게 사용할 경우, '/'로 주소를 이동해준다.

React 2020. 11. 24. 16:27

signInWihtPopup 이라는 API를 사용하면 쉽게 이용할 수 있다. sdk를 보면 모든걸 알 수 있다() 예시로 사용하는 방법. let provider = new firebase.auth.원하는sns의AuthProvider(); firebase.auth().signInWithPopup(provider); 이 함수를 적용하면, 버튼 클릭시 google 계정으로 로그인창이 뜨거나, github계정으로 로그인창이 뜬다. log out 방법은 signOut API를 이용하면 된다. firebase.auth().signOut();

Firebase 2020. 11. 24. 16:09

노마드코드 복습 겸 오늘 공부 정리 authService = firebase.auth() 를 import. Auth.js 참고문서를 찾아보면 firebase.auth에는 EmailAuthProvider라는 기능이 있는 것을 볼 수있다. EmailAuthProvider는 두가지 API를 제공한다. createUserWithEmailAndPassword와 signInWithEmailAndPassword. 둘다 promise이므로 비동기적으로 처리. (async와 await 사용할거임) input창에 email과 password를 입력하고 버튼클릭 혹은 enter입력 시, newAccount가 true일경우 입력받은 정보로 회원가입을 하고, false일경우 입력받은 정보로 로그인을 실행하는 함수. 만약 정보가..

Firebase 2020. 11. 24. 00:23

h1요소를 클릭시, 콘솔에 say hello 뜨게 만들기. componentDidMount 역할 (렌더링된 직후 호출) component가 mount 되었을 때, onClick 이벤트 추가. componentDidUpdate 역할 (props나 state가 변했을때 새롭게 갱신되면서 렌더링 후 호출) useEffect(effect, deps); 두번째 요소가 [] 빈칸, 즉 없으므로 변화가 일어나도 다시 실행되지 않음. componentWillUnmount 역할 (컴포넌트가 DOM 상에서 제거될때 호출) return 을 사용. useEffect는 onClick 이베트 제거를 반환함. 이렇게 사용하면 useEffect로 정리할 수 있음.

React 2020. 11. 22. 20:54