공부하는 비오

하지만 이름을 바꾸어도 위쪽 Nav의 이름은 변경되지 않는다. 그 이유는 user id를 가져오기 위해 모든 컴포넌트마다 firebase.auth().currentUser(이후 authService라 칭함)을 불러온 것이아니라, 최상위 컴포넌트에서 한번 불러온 다음 props로 전달해줬기 때문이다. 즉, 여기에 사용된 user id는 react 내부에서 연결되어있다. 그렇기 때문에 프로필 컴포넌트에서 id를 변경하더라도, Nav컴포넌트에서는 id변경을 감지하지 못한다. (서버의 store에 연결되어 있는것이 아니기 때문) 새로운 정보를 적용하거나 상태의 변화가 있을때, react는 새로운 정보를 인식한 후 모든 요소들을 다시 렌더링해준다. 그러므로 Profile에서 user id를 변경했을 때 Nav도 ..

Firebase 2020. 11. 27. 12:37

firebase.user에 있는 updateURL 메서드를 사용하여 프로필을 업데이트하려고 한다. 공식문서를 읽어보면 displyName과 phtoURL이라는 속성을 가지고 있다. user가 가지고 있는 이름과 사진을 state로 설정한다. 이전에 했던거 복습 겸 숙제였던 항목. text input 설정 및 file input 설정 file input API를 이용해서 url을 받아오고, 웹에서 받은 url을 newPhoto에 넣는다. 그리고 사진 변경 취소 버튼 설정. 업데이트 프로필 클릭 시 동작할 코드 newPhoto가 있다면, 즉 input을 통해 사진을 넣었다면, storage의 사용자id/profile/폴더에 phto라는 파일명으로 사진을 업로드한다. 그리고 photoURL은 store에 있는..

Firebase 2020. 11. 27. 11:46

firebase.firestore().collection()에는 where이라는 메서드가 있다. where는 filter같은 역할을 해 주는데, where을 사용하여 내가 원하는 정보만 새롭게 query로 만들어 가져올 수 있다. firebase.firestore.collection('컬렉션 이름').where(비교할 path, 비교연산자, 비교할 값); where의 조건에 해당하는 쿼리만 반환한다. nweets 컬렉션 안에있는 파일들의 creatorId와 userObj.uid(현재 사용자)가 같은 파일들만 반환. orderBy는 createAt순으로 정렬하기위해 사용했다. 하지만 콘솔에서 이런 에러를 확인 할 수 있다... 하지만 저기 링크를 따라가면 만들수 있어, 라고 친절하게 알려준다. 링크를 따라..

Firebase 2020. 11. 26. 16:56

firebase.storage에는 delete라는 메서드가 있다!!! 이걸이용하면 멘션을 지웠을 때, 관련 파일들도 삭제할 수 있음 :) 삭제하기위해서는 reference의 위치가 필요하다. reference의 위치는 이전 글에서 /사용자id/랜덤id(uuid)로 지정했었다. ^^ 랜덤 id를 모르지만... 이럴 경우를 대비한 API가 또 있다. refFromURL 메서드를 사용하면 URL의 reference로 반환된다. 즉 다음과 같이 사용가능. firebase.storage().refFromURL(storage 파일 url).delete(); 만약 사진을 첨부하지 않을 경우 오류가 발생하므로(작동에는 문제없으나 콘솔에서 오류발생) 예외처리를 해줌.

Firebase 2020. 11. 26. 15:35

웹에 사진 업로드하기 및 썸네일 image만 업로드가능한 input태그를 사용. 업로드한 사진 정보를 받아올 state인 sttachment 정의. web API를 사용하여 사진 정보(result)를 attachment에 저장. attachment를 사용하여 사진을 선택했을 때 썸네일이 화면에 나타나도록 한다. (아직 store에 저장되지 않았으므로, 이 url을 사용) Clear을 누를 경우, 파일업로드가 취소되도록 attachment를 초기화한다. storage에 사진 업로드 우선 storage를 import, export 해준다. 우선 Reference를 살펴보자. reference는 storage에 업로드다운로드등등 할 수 있다. 파일에 대한 reference를 만들고, 파일을 reference에..

Firebase 2020. 11. 26. 14:37

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