미니 프로젝트 배포하기[파이어 베이스(Firebase)](1)

파이어 베이스

구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼입니다. 

개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중 할 수 있도록 도와주는 플랫폼입니다.

무료로 사용 가능한 사용량이 있는데 이 부분을 넘기지만 않으면 무료로 배포를 할 수가 있습니다.

즉, 서버개발 없이 제작이 가능하며, 백엔드 코드를 몰라도 웹 서비스를 출시 할수 있습니다.

 

클라이언트는 서버로 데이터를 전송하는코드(프론트엔드)만 작성하고

데이터 베이스에 저장하는 백엔드코드는 파이어베이스에서 작성을 합니다.

 

사용법

파이어베이스 접속 ( https://firebase.google.com/?hl=ko )

 

 

• 로그인을 합니다.

 

• 콘솔로 이동하기를 누릅니다.

 

• 프로젝트 만들기를 클합니다.

 

• 프로젝트 이름을 입력하고 계속을 누릅니다. 

 

• Google애널리틱스 사용 설정 해제 후 프로젝트 만들기 클릭합니다.

 

• 프로젝트를 만들면서 준비가 완료 되면 계속버튼을 클릭합니다.

 

• 웹 버튼을 선택후 진행합니다.

 

• 앱 닉네임을 적은뒤 앱 등록을 클릭합니다.

 

• <script>태그 사용을 누른 후 콘솔로 이동하기를 누릅니다.

저 안쪽의 내용으로 데이터를 전달 받을수 있는거라 그냥 모자이크 처리 했습니다. 안해도 되는건가..?

 

배포를 해서 사용하려면 우선 클라이언트가 원하는 데이터를 저장시켜주는 곳이 있어야 합니다.

예를 들어 일기를 기록하는 서비스를 제공하는 웹페이지가 있다면 기록하는 내용이 어떠한 공간에 저장이 되어야 다음에 같은 웹페이지를 들어가도 클라이언트가 저장한 일기가 있어야 합니다.

그런 정보들을 데이터 베이스에 저장을 해야하는데 구글의 클라우드 기반의 NoSQL데이터 베이스인 firestore Database를 사용할것입니다. 

 

파이어 스토어

데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공합니다.

• 컬렉션(Collection)

  - 여러개의 문서들이 특정한 주제 또는 유형으로 그룹화 되어 있습니다. 예) 하나의 데이터들의 집합

• 문서(Document)

  - 저장된 데이터입니다. 예)  ''내용", "날짜", "제목"이 모인 하나의 데이터

• 필드(Field)

  - 문서 안에 있는 데이터의 작은부분, 값으로 구성되어 있습니다. 예) ''내용", "날짜", "제목"

 

Firestore Database시작

 

• 빌드에서 Firestore Database를 선택합니다.

 

• 데이터 베이스 만들기 클릭을 누릅니다.

 

• Cloud Firestore위치는 Seoul로 설정하고 다음 버튼을 눌러줍니다.

 

• 프로덕션 모드에서 시작하기 눌러준뒤 사용 설정을 눌러주면

이렇게 사용할수 있는 데이터 베이스가 생성 됩니다.

 

• 여기서 규칙을 눌러줍니다.

 

•  false를  true로 적은다음 게시 버튼을 눌러줍니다.

여기서 false를 true로 바꿔줘야 하는 이유가 false는 읽기(read) 와 쓰기(write)권한을 거부하는 규칙이기 때문에 true로 바꿔서 허용하는 규칙으로 적용 시켜줘야합니다.

 

• 그 후 VS코드나 작업 했던곳에 스크립트 부분에 아래 코드를 넣습니다.

// Firebase SDK 라이브러리 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";


// Firebase 구성 정보 설정
const firebaseConfig = {
	본인 설정 내용 채우기 
};


// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

 

위 코드의 본인 설정 내용 채우기 쪽에 채울 내용은

firebase의 프로젝트 개요 부분의 톱니바퀴 → 프로젝트 설정 → 내 앱 부분의 SDK 설정및 구성 쪽에서 구성을 누른뒤 앱의 키 및 식별자가 포함된 Firebase 구성객체를 복사해서 넣으면 사용을 할수 있게 됩니다.

 

 

※ 파이어 스토어를 사용하기위해 script type = module을 해야 합니다.

    하지만 스크립트 타입을 모듈로 하면 모듈이 먼저 다 읽힌 다음에 스크립트가 나중에 읽히는 현상이 발생합니다.

    그렇기 때문에 자바스크립트의 $(document).ready(function(){})는 형식에 맞지 않으므로 없애줍니다.

    onclick()함수도 작동하지 않기 때문에 바꿔 주어야 합니다.

 

위 방법대로 한다면 간편하게 웹페이지 html, css, js만으로도 웹페이지를 배포하고 내용을 저장할수 있습니다.

처음 배포한 방법이기도 하고 나만의 url을 가질수 있어서 재미있었지만 부족하고 깊이있지가 않다는걸 알고있습니다.

공부를 좀더 한 뒤 더  좋은방법이나 응용할수 있는 방법도 같이 올리도록 하겠습니다.

 

 

 

 

배워나가는 코린이 입니다!!

부족한게 있다면 댓글로 지적해주세요!! 감사합니다!😊