오늘은 과외가기 전 미드 쉐도잉을하느라 코딩을 별루 못했다.
집도착 후 운동 후 1시가 되서야 시작한다. 대신 기능 구현 끝까지 완성하고 잘꺼다 그리고 내일 css를 손보고 추가 기능을 넣을것이다. Let's go!!
먼저 firebase DB를 생성한다.
cf) asia-northeast3(서울)
출처 : https://firebase.google.com/docs/functions/locations?hl=ko
firebase DB는 NoSQL기반의 DB이고 웹에서 CRUD(Create, Read, Update Delete)를 사용할 수 있도록 만들어져있다.
완성된DB에 컬렉션을 추가하면 Table이 생성된다.
그리고 문서에 자동ID를 눌러서 ID를 생성해 준 뒤 문서를 추가한다 (SQL의 row개념)
잘 추가되고 각 항목을 수정/삭제 모두 가능하다.
이제 react에서 db를 설정하려면 fbase.js에서 firebase.firestore()를 export해준다.
-
create
먼저 생성기능을 만들기위해 home.js에서 deservice.collection([컬랙션이름]).add(필드에 넣을 객체)를 이용한다. 이렇게 컬랙션 내의 새로운 문서를 추가할 수 있다.
-
Read
get을 사용하는 방법도 있지만 이것은 실시간 반영이 되지않아 새로고침해야지 새 정보가 뜬다.
firebase에서 제공하는 함수인 onSnapshot을 이용하여 정보를 받아오고 그 안에 docs로 들어가 컬랙션-문서에 대한 정보만 뽑아서 map으로 모든 정보를 한 배열에 넣어 반환한다.
이렇게 하면 새로고침없이도 수정/삭제/작성 글들이 실시간으로 반영된다
- Update
수정을해줄때 원래의 내용을 먼저 띄워주고 새로운 input값을 추가할 수 있도록 새로운 UI를 띄워줘야한다. 수정을 취소할 수 있도록 토글도 필요하다.
또한 수정을 하기 위해서는 내가쓴 글인지 확인이 필요하므로 트윗의 firebase id값과 로그인 유저의firbase id값을 비교해야 한다. 로그인 유저의 id(userObj.uid)를 받아오기 위해서 App.js에서 유저정보를 받아오고
cf)완성 후 context API로변경할 것임
트윗을 생성할때 로그인 유저의id도 추가하여
트윗의 id와 로그인 유저의 id를 비교하여 boolean값으로 반환해준다.
여기서 넘겨 받은
이러한 값들고 dbService.doc([문서경로])를 사용해서 문서정보를 받아고 update함수를 사용하여 추가 정보를 넣어준다.
cf) 문서경로는 firebase 상단에서 확인가능
- Delete
update와 마찬가지로 dbService.doc([문서경로])에 delete()를 사용하여 삭제해준다.
이렇게 firebase를 이용하여CRUD를 구현하였다.
firebase개꿀이네...
앞으로 백엔드 공부하기 전까지 정말 유용하게 쓸 것 같다!
현재 firebase storage를 사용하여 사진 업로드하는것까지 구현이 되었지만 넘 피곤하다...
계획한대로 기능구현을 모두 끝내지는 못했지만
조금 자고 일어나서 프로필 페이지와 필터링 기능 추가 한 후 스타일링 시작해야겠다..!
금요일 잠들기 전까지는 모두 끝낸다는 마인드!!
내일 빡시게 코딩만 해야겠다ㅎㅎ
ps. 팀플하는것처럼 생각하고 deadline잡고 하니 능률이 훨씬 좋은것 같다... 이번학기.. 정말 힘들었지만 값진 경험... 빠른 채찍질 성장... 오히려 좋아
토요일 친구들 만나기 전까지 완성시켜놀 것이다 그리고 놀고와서 리액트JS공부를 시작할 것이다. 코드잇 강의도 객체, 배열 부분 들어가니 처음 알게된 내용들도 있었다 듣길 잘한 것 같다ㅎㅎ 왔다갔다 하면서 강의듣다보니 시간도 순삭이다. 배울게 참 많다. 하고싶은것도 참 많다. 하지만 우선순위대로 행동하자!
no pain no gain
