240418 TIL 넷째날; 부족한 부분 보강2-파이어 스토어 데이터 베이스(4강~)

공부이유 : 미니 프로젝트 때 파이어스토어 데이터베이스 이후에 어떻게 구현해야할 지 모르겠어서

 

전에 만든건 새로고침 하면 없어짐. 그치만 어딘가에 보관되어 있다면..? = 이걸 서버라고 함

; 데이터 베이스 판매사들의 경우 - 우리 데이터를 가져가는게 얼마나 효과적이고 좋은지 가 포인트

눈에 보이는 부분 프론트엔드 : html, css, javascript 

                요청⬆️      ⬇️응답

눈에 보이지 않는 부분 백엔드 : server, db, api

일단은 누군가가 만든 백엔드인 파이어베이스를 가져와서 저장하고 받는 걸 사용할 것 

 

파이어베이스 :

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

웹서버를 대신 만들어 주는 서비스

 

데이터베이스가 있으면 저장 후 가져와서 쓸 수 있음 ; 데이터 가져와서 붙이는 것

파이어베이스(많이 사용하면 유료 ; https://firebase.google.com/?hl=ko )설치 후 사용

구글 로그인 - 콘솔로 이동 - 프로젝트 만들기 - 넘기다가 애널리틱스 위치 : 대한민국 - 완료

-> 메인페이지 에 </> 모양 :웹 누르기 - 앱등록-(파이어베이스를 쓰기위한 이니셜라이저 작업) script 태그 사용으로 누르기 

- 콘솔로 이동 - 

 

요즘은 클라우드 환경에서 개발자를 도와주는 게 잘 되어있음 ; 남이 만들어 준 것이므로 자유도는 떨어짐

 

배우기 전에 ; 데이터 베이스란 데이터를 저장하고 여러사람들이 관리하는 데이터 모음 : 도서관의 책꽂이 느낌 => 잘 찾기 위해, 잘 적재

SQL : 관계형 데이터베이스 - 정리된 정보를 다룰 때 사용. 은행이나 대기업 등 ;장단점 : 틀이 있고, 사람의 실수가 있음 안됨

; 유저정보가 있을 때 유저마다 금액과 구매한 이력, 구매번호 등 엑셀화된 정보 ; 안맞는 건 넣을 수 없음

N(ot)o(nly)SQL : 비관계형 데이터베이스 - 복잡하거나 유연한 정보를 다룰 때 사용. 스타트업 ;장단점 : 앞으로 바뀔 여지가 많은 곳

;유연하게 넣을 수 있음

 

DB는 프로그램. 포토샵 킴과 동시에 한글키는 등 엑셀처럼 생겼으며, 정보 가져오는 게 빠름

; 수많은 데이터도 가져올 수 있음 여기에서 데이터는 인덱스. 회원 번호 주문번호 등

 

파이어스토어 : 구글이 개발한 클라우드 기반의 NoSQL ; 커다란 창고처럼

 

왼쪽에서 파이어스토어 베이스데이터-> 데이터베이스 -> 프로덕션모드에서 시작 - 서울선택 - 사용설정

-> 규칙에 들어가서 맨 마지막을 true로 바꿔주고 게시 누르기(이 데이터베이스에서 뭔가를 쓰거나 읽어가겠다)

-> 왼쪽바 상단: 프로젝트 개요 -> 프로젝트 설정 -> SDK 설정 및 구성 에서 구성 클릭(나오는 코드는 다 다름)

-> vs code -> 폴더 - 해당파일 열기 -> <script> 가서 <script type="module">로 입력 -> 파이어 베이스 기본코드 입력

(프로젝트 설정에 들어가볼 것) ; 파이어스토어 세팅코드 : 

// 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); 

 

; <script type="module"> 아래에 붙이기 ->  본인 설정 내용 채우기 여기 문단 지우고 구성 (;파이어베이스) 아래에 있는 복사 버튼

-> 본인 설정 내용 여기에 붙이기 => 설정 끝 ^^

 

* 참고

<script type="module">모듈 붙으면(firebase 쓰기 시작하면) 스크립트가 다 로딩이 된 다음에 시작 됨

( ; 그전에 작성했던 document.ready 가 필요가 없어짐 ) => 

알게된 것 : 파이어베이스의 모습, vs code 왼쪽 바 3번째 아이콘 누르면 git commit -m 안쓰고 바고 "메세지"만 쓸 수 있음

 

회고 : 미니 프로젝트를 진행하며 그래도 할 수 있는 부분인 배경등 이미지를 구현해보았다. 구현해보며 검사를 눌러 왼쪽 상단에 

요 모양을 누르면 내가 원하는 범위 먼저 지정하고 해당 코드를 볼 수 있어서 이름 찾는데 수월했으며, 나아가서 버튼등이 잘 바뀌지않았는데 이름을 쉽게 찾으니 원하는 버튼으로 구현할 수 있었다.

: 파이어 베이스는 날 도와주는 것...🤣 아직 낯설지만... 잘 해봐야디