Firebase란?
Firebase는 Google이 운영하는 BaaS(Backend as a Service)로
백엔드를 직접 개발하지 않고 서버를 빌려서 사용할 수 있게 도와주는 서비스입니다.
데이터를 저장하고 로그인 인증을 하는 등의 서버 작업을 모두 직접 만들기에는 시간, 비용적으로 손해인 경우가 있겠죠?
벡엔드 작업을 Firebase를 통해 간단하게 처리함으로써 프론트엔드 개발에 더욱 집중할 수 있습니다.
Firebase 초기 세팅
웹 프로젝트에 Firebase를 적용하는 방법에 대해 알아보도록 하겠습니다.
Firebase 공식 홈페이지에 접속하여 Google로 로그인하면 위와 같이 나옵니다.
시작하기 를 클릭해줍시다.
위와 같은 화면에 진입할 수 있습니다.
프로젝트 만들기를 클릭하여 진행해주세요. 아주 간단하게 생성이 가능합니다.
메인 화면에서 프로젝트 설정으로 진입한 뒤 아래로 스크롤하면 ios+, android, </> 선택 버튼이 있습니다.
웹 프로젝트를 뜻하는 </>를 선택해주세요.
웹 프로젝트로 설정이 완료되면 위와 같이 npm 또는 cdn을 이용해 사용할 수 있도록 코드가 제공됩니다.
언제든 프로젝트 설정 메뉴에 들어가서 해당 코드를 확인할 수 있으니 프로젝트에 적용할 때 복사하여 사용해주세요.
화면 좌측의 빌드 메뉴를 선택하면 여러 기능들이 있습니다.
데이터베이스 기능을 사용하려면 Firestore Database를
사진 업로드 기능을 사용하려면 Storage를 클릭하여 설정해줍니다.
Firestore Database와 Storage 세팅하기
위의 빌드 메뉴에서 Firestore Database를 선택하여 간단한 설정을 완료하면 위와 같이 Firestore가 생성됩니다. (지역은 서울로)
Firestore는 collection에 여러 개의 document를 추가할 수 있고 각 document에는 key-value형태로 데이터가 저장됩니다.
쉽게 말해 폴더(collection)에 형식(key-value형태)에 맞는 여러 개의 데이터(document)를 저장하는 방식이라고 생각하면 됩니다.
같은 collection 내에서도 각 document안에 담긴 key-value의 종류는 달라도 상관없습니다.
Storage 역시 간단하게 생성이 가능하며 폴더 형태로 파일을 관리할 수 있습니다.
※ 권한 설정
상단의 규칙 메뉴에 보면 read, write가 if flase로 기본 설정 되어있습니다.
데이터를 읽고 가져오는 권한이 설정된 것으로 if true로 변경하면 자유롭게 사용이 가능합니다.
Firebase를 사용하기 위한 초기 설정을 해보았습니다.
위와 같이 사이트 설정을 마치면 프로젝트 내에서 코딩만 잘 해주면 사용이 가능합니다.
React 프로젝트에서 Firebase를 적용하는 예시를 확인하시려면 아래 링크를 참고해주세요.
