Fetch & Firestore 개념 및 연동

클라이언트 → 서버

클라이언트가 서버에 요청을 할 때 타입이라는 것이 중요

• GET → 일반적으로 데이터 조회(Read)를 요청
  예) 영화 목록 조회
• POST → 일반적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)를 요청
  예) 회원 가입, 회원 탈퇴, 비밀번호 수정

fetch는 위와 같은 클라이언트의 요청을 서버로 보내고 서버로부터 응답을 받기 위한 기능

fetch(targetURL)
// targetURL로 웹 통신을 요청
// 요청 타입을 지정하지 않는다면 default값은 GET
	.then(res => res.json()) 
// 요청에 대해 응답으로 받은 데이터를 res라는 이름으로 JSON화
	.then(data => { 
		// 데이터 처리 로직
	}) // JSON 형태로 바뀐 데이터를 
       // data라는 이름으로 변경 후 데이터 처리 로직에 따라 가공

파이어베이스(Firebase)란?

구글이 개발한 모바일 및 웹 어플리케이션 개발 플랫폼

👍 서버 개발 없이 제작 가능(웹 서버를 대신 만들어 주는 서비스이기 때문에)>
👍 프론트 지식(HTML, CSS, JS)만으로도 웹 서비스 출시 가능

👎 서버 인프라에 대한 직접적인 컨트롤 제한
👎 규모에 따른 확장성 측면에서 제한 가능성 존재
👎 구글 서비스에 의존하게 되며, 외부 서비스 및 기능에 대한 제한 가능성 존재

데이터베이스란?

• 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음
• 데이터를 잘 찾기 위함이 목적
• 크게 두 종류로 나뉨
  • 관계형 데이터베이스(Structured Query Language) : 정리된 정보를 다룰 때 사용
    ex) 은행, 대기업
  • 비관계형 데이터베이스(Not only SQL) : 복잡하거나 유연한 정보를 다룰 때 사용
    ex) 스타트업

파이어스토어(Firestore)란?

파이어베이스(Firebase)에서 제공하는 구글의 클라우드 기반 NoSQL 데이터베이스

파이어스토어 사용을 위한 설정

<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";

  const firebaseConfig = {
    // Firebase 구성 정보 설정 (앱 등록 후 나오는 코드)
  };

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