본문 바로가기
Firebase

[Firebase] 프론트엔드만으로 웹서비스 만드는법 (서버와 파이어베이스소개, Baas 서비스, 서버리스 서비스 설명)

by 메이플 🍁 2022. 5. 13.

⚠️ 이 포스팅은 스파르타코딩클럽 리액트 기초반을 공부하고 정리한 블로그 포스팅입니다. ⚠️

 

포스팅에 해당하는 목차는 다음과 같습니다:

 

리액트 기초반

  • 4-5 Firebase란?
  • 4-6 Firebase 설정하기
  • 4-7 FireStore 설정하기

 


 

리액트로 웹서비스를 만들때의 문제점

리액트 프로젝트로 투두 리스트라는 웹 서비스를 만들었다고 가정하자. 투두 리스트에 새로운 리스트를 생성하고 웹브라우저를 새로고침하면 추가했던 리스트가 유지되지 않고 내가 변경해준 데이터가 사라진다. 새로고침했을때 데이터가 유지되지 않는 이유는 데이터가 프론트에만 저장이 되고 있기 때문이다. 즉 업데이트한 데이터가 영구적으로 저장되는 것이 아니라 자바스크립트 메모리와 브라우저 캐시에만 저장된다. 또한 내가 만든 투두 리스트는 로컬 컴퓨터에서만 접속이 가능하고 다른 컴퓨터에서는 접근이 불가하다. 

 

정리하자면 리액트로 웹서비스를 만들때의 문제점은 두가지다:

1. 업데이트한 데이터가 유지되지 않는다

2. 로컬 컴퓨터에서만 접속이 가능하다

 

같은 데이터를 다른 컴퓨터에서도 보기 위해서는 결국 DB에 데이터를 저장해야한다. 즉 백엔드(서버)가 필요하다.

 

파이어베이스(Firebase)란?

서버가 해주는 일을 대신해주는 서비스를 말한다. 프론트앤드 개발만으로 웹서비스를 만들고 싶다면 서버리스 서비스(Serverless Service) 중 하나인 파이어베이스를 사용하면 된다. 

 

파이어베이스란 서버가 해야하는 일을 미리 만들어 놓아 사용자가 서버 개발 없이 서버를 사용할 수 있게 해주는 플랫폼을 말한다. 파이어베이스는  BaaS 서비스(Backend as a Service), 서버리스 서비스(Serverless Service)의 한 종류인데 둘의 개념을 아래에서 살펴보자

 

Baas 서비스(Backend as a Service)란?

백엔드에서 해줘야하는 작업(DB에서 데이터 가져와서 클라이언트에게 전달하기, 소셜 서비스 연동 등)을 미리 만들어 놓고 API 형태로 제공해주는 것을 말한다. 파이어베이스도 BaaS 서비스의 한 종류로 백엔드에서 해줘야하는 작업들을 API 형태로 미리 만들어 놓고 사용자에게 서비스를 제공한다. 예를들어 DB에서 데이터 가져와서 클라이언트에게 전달하는 작업을 해주고 싶다면 파이어베이스에서 해당하는 API를 불러오면 간단히 백엔드 서비스를 제공받을 수 있다.

 

서버리스 서비스(Serverless Service)란?

서버리스는 서버가 없는 것이 아닌 사용자가 개발을 할때 서버를 신경쓸 필요가 없는 것을 말한다. 즉 미리 구축한 서버를 사용할 수 있는 서비스를 서버리스 서비스라고 한다.

 

파이어스토어(Firestore)

파이어베이스에 포함되어 있는 서비스 중 하나인 클라우드 데이터베이스다. 프론트앤드에서 쌓아갈 데이터를 클라우드에 있는 어떤 데이터베이스(저장소)에 저장 할 수 있게 해주는 서비스다. 데이터 저장뿐만 아니라 데이터 가져오기, 데이터 수정하기도 가능하다. 파이어스토어는 NoSQL 방식으로 데이터를 저장한다.


구조
1. Collection: 문서(다큐먼트)의 집합
2. Document: JSON 형식으로 데이터를 저장할 수 있음

댓글