[firebase] 백엔드없이 firebase로 리액트 프로젝트 만들기

매번 하드코딩으로 마크업하던 걸 좀 자동화하기 위해서 회사에서 간단한 어드민을 개발하려고 하는데, 백엔드까지 혼자서 손보기에는 시간과 힘이 너무 들기에,,,,😥 파이어베이스로 백엔드 프로세싱을 하고 프론트만으로 개발할 수 있다는 걸 알게 되서 시작한 프로젝트이다. 혼자서 깃허브에서 테스팅을 완료했고, 실제 사내에서 이용하기 위한 프로젝트를 개발하면서 블로깅할 예정이다. 매번 혼자서 공부하면서 하려니,,,, 좀 시간이 걸릴 것 같다 😂 아무튼 화이텡....!

 

최종코드 : github.com/jayounglee92/react-firebase

1. 목표설정

우선!

하고자하는 목표는 아래와 같다. (스타일은 나아중에 추가적인 부분....!)

- 소스 관리 : GitLab

- 호스팅 : Netlify

- 백엔드 : Firebase 

1) 구글연동 : Authentication

- 로그인 / 로그아웃

2) 폼 형식 만들기 데이터 업로드/불러오기 : Cloud Firestore

- 게시 / 수정 / 삭제

3) 이미지 저장 : Storage

- 업로드 

 

2. 파이어베이스 프로젝트 만들기

1. firebase 메인에서 시작하기 클릭!

 

2. 파이어베이스 프로젝트 만들기 클릭 후 프로젝트를 추가한다.

 

3. 이름은 마음대로~

 

4. 어드민을 만들 예정이기에 애널리틱스는 체크하지 않았다.

 

4. 프로젝트 생성중,,,,

 

 

5. 완료!

 

 

3. 프로젝트 설정

1. 앱추가(저는 웹 선택!)

2. 만들고나면 아래 CDN 코드가 뜨고 이것을  활용해 서비스를 사용할 예정!

 

이 정도 간단하게 하고! 다음에는 Authentication 설정을 통해 구글 로그인/로그아웃을 해보겠다. 😎