Firebase로 간단하게 DB 저장해보기

Ahn·2021년 9월 27일

backend Take Notes

목록 보기

3/3

먼저 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개 잘 저장됐다.

Hello~~👋