먼저 Firebase에 들어가서 프로젝트 부터 만들자
프로젝트 추가 버튼 누른다. (계속 다음다음....누르면 된다)
새로 만든 test02에 들어가서
</>
이 아이콘을 클릭해서 들어간다
닉네임 정해주고 앱등록 눌러준다.
npm사용으로 체크하고 콘솔로 이동 버튼 눌러준다
프로젝트 생성하고나서 프로젝트 설정에 들어가준다.
밑으로 계속 내리다보면
이런게 나오는데 해당 프로젝트 파일가서
$ npm install firebase
설치해주고
_app.js
파일가서 내용 복붙해준다 initializeApp
은 따로 저렇게 써줘야함(변수 오른쪽 부분)
그리고나서 왼쪽 메뉴에 Firestore Database에 들어가서 데이터 베이스 만들기
버튼을 눌러주면
이런 화면이 나오는데 프로덕션 모드에서 시작
을 누르게 되면 수정이 안되니까
테스트 모드에서 시작
를 누르고 다음을 눌러주자
asia-northeast3을 선택하고 (참고로 asia-northeast3은 한국임) 사용 설정을 눌러준다
등록하기 버튼을 누르면 Firebase 데이터베이스에 데이터가 담겨야하고
불러오기 버튼을 누르면 콘솔로그로 데이터가 불러와지면 된다.
일단 getFirestore
, collection
, addDoc
,getDocs
이것들이 뭔지부터 알아야 한다.
getFirestore : firestore는 collection안에 document들을 저장하고
document 안에 데이터를 저장한다.
document는 데이터를 객체형식 즉, key:value
형태로 저장한다.
collection : const blog = collection(getFirestore(firebaseApp), "blog");
getFirestore 안에 있는 firebaseApp의 객체정보를 collection에 담겠다 라는 뜻인데,
blog라는 컬렉션으로 만든다는 뜻임
addDoc : document를 추가하는거고
getDocs : document들을 불러오는거
설명드간다
onclickSubmit
collection안에 firebaseApp이라는 객체 정보를 집어넣은걸 "blog"라는 컬렉션의 이름으로 컬렌션에 집어넣은걸
변수 blog에 할당했다.
그리고나서 addDoc
으로 데이터를 등록한다. 근데 데이터가 등록되기전에 끝나버리면 안되니까
async ... await
을 써줬다.
이로써 등록하기 버튼을 누르면 Firebase DB에 데이터가 저장된다.
onclickFetch
앞서 만든 변수 blog를 이용해 getDocs
으로 데이터를 불러오는데, 이것도 데이터를 불러오기전까지
기다렸다가 불러와지면 출력해야해서 async ... await
을 써줬다.
그리고 result.docs
가 배열형태로 안에 [{}, {} ,{} ....]
이런식으로 저장되어있기 때문에
맵핑을 돌려서 배열안에 있는 값들을 데이터로 만들고, 그걸 콘솔로 찍은것임.
데이터가 원래 2개가 있었는데 한번더 등록하기를 누르면 데이터가 하나 더 쌓이면서
Firebase에도 2개가 아닌 3개가 보일것이다.
확인해보자
데이터 3개 잘 불러와지고
Firebase에도 데이터 3개 잘 저장됐다.