React Twitter Clone (12) - Twitting

김민석·2020년 9월 21일
0

React_Twiiter_Clone

목록 보기
12/17

위의 Cloud FireStore의 database는 NoSQL database입니다.
SQL 데이터베이스에는 많은 규칙과 관습들이 있습니다.

Cloud FireStore는 많은 것들을 프로그램 하지 않아도 되며 유연함 까지 가지고 있습니다.

다만 몇가지 제한사항이 존재합니다.

NoSQL database의 한 가지 특징은 Collection을 가지고 있습니다.
Collection은 기본적으로 폴더와 같고 Document는 컴퓨터에 있는 문서와 같은 것입니다.

하나의 database는 collection들을 가지고 있고 각 collection은 document를 가지고 있습니다.

컬렉션 시작 버튼을 눌러보면

이렇게 이름을 입력하고 다음,

이렇게 입력해주고 저장을 누르면

colloction은 Twitter_Clone, document로는 자동으로 받은 ID가 있습니다. 그리고 test:test라는 필드를 가지고 있습니다

정리하면 collection은 documents의 그룹이고 Firestore의 경우에 우리는 Twitter_Clone이라는 collection을 가집니다.

사용자는 필요성에 따라 다양한 collection을 가질 수 있습니다.
비디오, 댓글, 메시지등 다양한 collectione이 될 수 있습니다.
결론은 필요한 것을 굉장히 유연하게 만들 수 있다는 말이고

새로운 document도 역시 유연하게 추가할 수 있습니다.

원하는 만큼 필드도 추가할 수 있고

형태 역시 다양하게 설정 가능 합니다.

컬렉션을 이렇게 관리자단에서 만들지 생성하지말고 코드에서 만들어 보겠습니다. 저번 게시물에서 firebase database를 가져왔습니다.


위처럼 firebase의 firestore를 가지는 dbService를 만들어줍니다.
그리고 위쪽에 import시킨 database도 firestore로 수정해줍니다.

이제 우리가 게시글을 만들때 마다 = submit 할 때마다 document를 생성해야 합니다.

Firebase 페이지로가서 javascript의 firebase.firestore 부분을 살펴보면

Firestore라는 인스턴스를 얻고 doc, collection이 있고

CollectionReference를 얻게 된다는 것을 알 수 있습니다.

Collection은 collectionPath를 가집니다.


Home.js로 와서 onSubmit 부분에 위에서 만든 firestore, dbService.collection을 입력하고 경로는 "Twitt"(본인 임의로) 한다음 점(.)을 찍어보면 많은 옵션들을 볼 수 있습니다.

add, doc, endAt, endBefore, get, limit, ...등 다양한게 있지만 여기서 사용할 것은 add 입니다.


공식문서에서 CollectionReference를 클릭해보면

add를 찾을 수 있습니다. 클릭해보면

여기에는 그냥 데이터가 들어가는 것이라고 안내하고 있습니다.
명시된 데이터를 담은 새로운 document을 collections에 추가하는 것 입니다. 여기서 document ID를 자동으로 부여합니다.

그리고 add에는 우리가 원하는 어떤 데이터든 넣을 수 있습니다.

앞의 twitt_clone은 document의 key가 됩니다.
(우리의 collection 인) twitt_clone은 이 twitt_clone이라는 걸 가질텐데 이것은 위쪽에 우리가 정의해둔

state에 있는 것이랑 같은 twitt_clone입니다. 같은 것이기 때문에 따로 쓸 필요없이

이런식으로 써두면 됩니다. 그리고

이런식으로도 사용할 수 있습니다. 그리고 잊으면 안되는 것이
submit하고 나면, setTwitt_clone()을 해서 빈 문자열("")로 해줍니다.

그리고 add는 Promise를 리턴하기 때문에 async, await를 사용합니다.

이런식으로 firebase를 사용하면 간단하게 구현할 수 있습니다.

이렇게 쓰고 클릭하면 내용은 비워지고

이렇게 돌아옵니다.

그리고 firestore를 보면

이렇게 나타나게 됩니다. 실시간이고 자동으로 나타납니다.

profile
web development 주니어

2개의 댓글

comment-user-thumbnail
2021년 4월 25일

왜 저장이 안될까요 ㅠ_ㅠ

1개의 답글