[Firebase&Web연동 1] 기본 세팅 하기

[Firebase&Web연동] 기본 세팅 하기

● 파이어 베이스란?

파이어베이스는 구글사에서 운영하고 있는 데이터 베이스 서비스 입니다. 간단히 말하면  단 몇 줄의 소스 코드로 web, ios, android 어플리케이션에 실시간 데이터 베이스를 구축 할 수 있습니다.

더욱 놀라운 것은  web, ios, android 같이 서로 다른 플랫폼이 동일한 DB를 사용할 수 있다는 점입니다. 단 소스코드 몇 줄로요.

기존의 oracle이나 mysql과 같은 관계형 데이터 베이스와 다른 점은 데이터가 json 형식(key: value)으로 저장이 된다는 점입니다.

글로 설명하는 것 보다 직접 하나씩 만들어 보면서 익혀보도록 하죠. 앞에서 파이어베이스는 웹, ios, android와 연동이 된다고 했습니다. 먼저 웹과 연동하는 방법을 살펴보도록 하겠습니다.

● 프로젝트 개요  - 데모 프로젝트는 이곳에서 보실 수 있습니다.

함께 작업할 간단한 프로젝트 소개를 하겠습니다. 프로젝트이름은 감사일기입니다. 메인 뷰는 소셜네트워크 처럼 되어 있습니다. 로그인 로그아웃기능을 구현하여 로그인 한 사람만 글을 볼 수 있게 해 놓았습니다. 메인 화면에서 글을 쓸 수가 있습니다. 로그인을 하면 마이페이지로 이동이 가능합니다. 거기서 내가 쓴 글 목록을 볼 수가 있습니다. 그리고 내가 쓴 글은 수정 삭제를 할 수 가 있습니다. 이곳에서 파일 업로드도 한번 살펴보겠습니다. 또 다른 사람이 쓴 글을 클릭하면 다른 사람 프로필을 볼 수 있는 페이지로 이동해 보겠습니다. 기능을 요약하면 아래와 같습니다. 

1.로그인 로그아웃

2.글 작성

3.글 조회

4.글 수정 삭제

5.파일 업로드

6.각각의 페이지 꾸미기

등등..

데모 프로젝트는 이곳에서 보실 수 있습니다.

기본셋팅

1. 구글 계정이 없으신 분들은 구글 계정을 만들어 주시고, 

Firebaes 홈으로 가서 "콘솔로 이동" 버튼을 눌러주세요.

2. 다음과 같은 화면이 나오면 프로젝트 추가를 클릭합니다.

3. 프로젝트 이름을 적어주시고, 국가/지역을 대한민국으로 선택하신 다음 "프로젝트 만들기"를 클릭해 주세요.

4. 위와 같은 화면이 뜨면 제일 오른쪽에 "웹앱에 Firebase 추가"하기 버튼을 클릭합니다.

4.위와 같은 소스코드가 나올겁니다. 

이 코드를 나중에 프로젝트를 만들때 자바스크립트 부분에 붙여 넣기를 해주도록 하겠습니다.

●마치며

간단한 파이어베이스에 대해서 소개를 했고, 앞으로 만들어 볼 프로젝트에 대해서 소개를 드렸습니다. 그리고 간단한 셋팅(?)을 마쳤는데요. 다음 시간에는 본격적으로 html 레이아웃을 만들어가면서 소스코드 작업을 해보죠.

●블로그 설명이 조금 어려우시면 유튜브 영상보시면 더 이해가 잘 되실거에요~

https://youtu.be/q9xIx9c6Zlc

보다 자세한 설명은 유튜브에 영상으로 정리해 놓았으니 공부하시다가 참고하셔도 좋을것 같습니다