[스파르타코딩클럽 웹개발 기초] 4주차 / Firebase, Firestore

이제까진 Front 이제부턴 Back End

 

Firebase

• 구글이 개발한 모바일 및 웹 어플리케이션 개발 플랫폼
• 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌
• 웹 서버를 대신 만들어 주는 서비스
• 서버 개발 없이 제작 가능
• 백엔드 코드 한 줄 없이도 프론트 지식(HTML, CSS. JS)만 알아보 웹서비스 출시 가능

-개발코드1. 서버로 데이터를 전송하는 코드(프론트엔드에서 작성)

-개발코드2. 데이터를 받으면 데이터베이스에 저장하는 코드(파이어베이스에서 작성)

 

데이터베이스

• 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
• 쉽게 찾고 업데이트할 수 있고, 많은 양의 정보를 효율적으로 관리할 수 있음

데이터베이스의 종류

 

Firestore

• 구글의 클라우드 기반 NoSQL 데이터베이스
• 데이터베이스 서비스, 데이터를 저장하고 관리할 수 있는 기능 제공
• Firebase-빌드-Firestore Database-데이터베이스 만들기
• 규칙 수정 (false → true)

• 파이터스토어 세팅 코드 넣기

코드 복사 ↓ ↓ ↓

코드스니펫 복사 후 Firebase 구성 정보 설정 부분은 붙여넣기 (추억앨범 폴더), script에 type="module" 추가 (→이러면 onclick 작동X)

'기록하기' 버튼에 postingbtn id값 주기

코드스니펫(데이터 추가 스켈레톤) - 'postingbtn'을 click하면 실행됨 (addDoc-붙이기)

내용입력하고 '기록하기' 버튼 누르기

내용이 추가됨

'저장 완료!' 창 띄우기, 새로고침

*** window.location.reload() → 새로고침

저장 완료 창 → '확인' 누르면 새로고침 됨

onclick 대신→ '추억 저장하기' 누르면 postbox toggle

 

원래

script에 type="module"을 달면 로딩 후 url 가져오기 할 필요 업이 바로 가져오면 됨

getDocs - albums의 데이터 가져오기

아래 2개 = 가져온 데이터

새로운 카드 추가해보기 (이미지 주소는 이미지-마우스우클-이미지 주소 복사)

새로운 카드가 추가됨

 

앨범 데이터 카드 불러오기 기능 돌아보기

1. 파이어베이스 세팅
2. 파이어스토어에 데이터 놓기 - postbox에 들어온 값들을 변수에 담고, 변수값들을 컬렉션에 추가
3. 파이어스토어에 데이터 가져오기 - 가져온 데이터를 변수에 담고, 카드형식에 각각 값들을 넣어서 카드 생성

 

 

 

---

스파르타코딩클럽

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z

4주차 4-1 ~ 4-8