SETUP
Home(DashBoard)화면에 트윗을 입력할 수 있는 form 컴포넌트인 PostTweetForm.tsx을 추가했다.
label htmlFor="file"을 input id="file" type="file"과 연결하고 display=none해줬다.
트윗한 데이터가 Firebase의 데이터베이스에 저장되고 storage에 업로드가 되어야 데이터를 불러올 수 있기 때문에 Firebase의 콘솔에서 기능을 활성화 해야한다.
Cloud Firestore
Cloud Firestore는 NoSQL 데이터 베이스이다.
NoSQL
Not Only SQL 혹은 Non-Relational Operational DataBase의 약자로 관계형 DBMS에서 데이터를 조회, 수정, 삭제하거나, DBMS를 조작하는데 사용되는 언어인 SQL(Structured Query Language)과 달리 데이터 간의 관계 (Relation)를 정의하지 않는 비관계형 데이터베이스를 지칭.
데이터베이스(Cloud Firestore) 활성화하기
테스트 모드로 우선 생성할텐데 주의할 점은 테스트 모드는 단 30일동안만 사용할 수 있고, 기간이 지나면 보안상의 문제로 생성한 데이터베이스들을 사용할 수 없기 때문에 기간이 만료되기 전에 모드를 변경해야한다.
위치 설정은 자신이 있는 장소에 가장 근접한 곳으로 선택!
조금 기다리면 위화면이 출력된다.
프로젝트에 활성화하기
꾸준히 기재하고 있지만, Firebase에서 활성화 한 다음 프로젝트에서도 활성화를 해야 기능을 활용할 수 있다.
공식문서대로 FirebaseSDK인 firebase.ts에 코드를 추가한다.
데이터베이스 입력하기(수동)
Firestore Database는 Collection과 Document로 동작한다.
컬렉션 ID에 tweet을 입력하고 저장을 누르면 Document를 생성하는 Form이 보여진다.
Document는 기본적으로 임의의 ID가 배정되지만 지정 ID로 변경할 수 있다.
자동ID를 클릭해서 문서의 ID를 임의ID로 배정했고, Field필드와 Value값을 입력했다.
Add Field필드추가를 클릭해서 필드의 수를 늘릴 수 있다.
저장버튼을 클릭하면 데이터가 어떤 형태인지 볼 수 있다.
생성한 데이터는 더보기 버튼을 통해 삭제할 수 있다.
데이터베이스 만들기(VSCODE)
모든 내용을 지우고 비어있는 상태로 수정했다.
트윗을 입력할 수 있는 form 컴포넌트인 PostTweetForm.tsx에 onSubmit메소드를 추가하고 공식문서에서 안내하는 대로 addDoc()을 사용하여 데이터를 Firestore에 넣어보았다.
addDoc()은 전달인자 2개가 필요한데, db와 collection이다.
- db : Firestore에 추가했던 바로 그 db이다.
- collection : 데이터를 담고 있는 문서의 집합
//onSubmit함수
try {
setLoading(true);
//addDoc메소드 안의 데이터를 tweets 콜렉션에 추가
await addDoc(collection(db, 'tweets'), {
tweet,
creatAt: Date.now(),
userName: user.displayName || 'Anonymous',
userId: user.uid,
});
} catch (error) {
console.log('에러', error);
} finally {
setLoading(false);
}에러가 발생했다.
구글링해보니 firebase cloud firestore - 규칙 - 규칙수정을 하면 된다고 한다.
기본값false에서 true로 변경했다.
규칙을 변경하니 누구든 데이터를 수정, 삭제, 도용 등을 할 수 있다는 경고가 뜨기 때문에 정확한 해결방법은 아닌 것 같다. 어쨌든 수정 후 다시 submit해보니 전송한 데이터들이 잘 들어간 것을 볼 수 있었다.
Firestore 문서구조
Firestore도 문서구조가 있다.
/tweets/cCJuF3kRtTAF6sCs3C33
tweet콜렉션의 ID:cCJuF3kRtTAF6sCs3C33 의 게시물이다.
파일구조와 굉장히 비슷하다.
