[새싹 프론트엔드] 네트워크 통신 및 Firebase

Ryu·2022년 12월 12일
0

새싹

목록 보기
29/36

네트워크 통신

동기 방식 vs 비동기 방식

동기 방식(Synchronous)

  • 요청을 보낸 후 응답을 받아야 다음 동작을 실행할 수 있는 방식
  • 서버의 응답이 올 때까지 기다려야 함
  • 특징
    • 설계가 간단하고 직관적
    • 요청에 대한 응답을 받을 때까지 대기해야 하는 단점

비동기 방식(Asynchonous)

  • 요청을 보낸 후 응답을 받기 전에 다음 작업을 먼저 실행하는 방식
  • 특징
    • 동기 방식보다 복잡함
    • 요청에 대한 응답을 받기까지의 대기 시간에 다른 작업을 할 수 있음

async와 await

async와 await

  • 자바스크립트의 비동기 처리 패턴
  • async
    • 함수 선언부에 async 키워드 작성
  • await
    • async 키워트가 붙어있는 함수 내부에서만 사용 가능
    • 결과를 얻을 때까지 대기
      • 동기방식처럼 처리 가능
  • 사용 방법

    • function 키워드

      **async** function 함수이름(){
	**await** 비동기_처리할_함수 또는 값
}

    • 화살표 함수

      const 함수이름 = **async**() => { 
	**await** 비동기_처리할_함수 또는 값
}
  • 예시
const AsyncAwait = () => { 

	async function getName(){
		let user = await fetch('mysite.com/users/1');
		
		// 리턴 받은 결과의 user.name 출력
		console.log(user.name); 
	}
	
	// 함수 호출 
	getName();
	
	return <div></div>;
};

export default AsyncAwait;

fetch() 함수로 데이터 가져오기

JSONPlaceholder

제공하는 데이터

Path데이터 수
posts100
comments500
albums100
photos5000
todos200
users10

https://jsonplaceholder.typicode.com/users 접속

[ 
	{
		"id": 1,
		"name": "Leanne Graham",
		"username": "Bret",
		"email": "Sincere@april.biz",
		"address": {
			"street": "Kulas Light", 
			"suite": "Apt. 556", 
			"city": "Gwenborough", 
			"zipcode": "92998-3874", 
			"geo": {
			        "lat": "-37.3159",
			        "lng": "81.1496"
				}
		}, 
},
// 생략

Firebase

Firebase란?

Firebase

  • 구글의 모바일 및 웹 어플리케이션 개발 플랫폼
  • 백엔드 서버 기능을 클라우드 서비스 형태로 제공
  • 인증(Authentication), 데이터베이스(Firestore), 분석(Analytics) 등의 기능 제공

https://firebase.google.com

프로젝트 생성

  • 프로젝트 만들기 클릭
  • 프로젝트 이름 지정
  • 구글 애널리틱스 설정
  • 프로젝트 생성 완료

Cloud Firestore

Firebase가 지원하는 데이터베이스 종류

  • Realtime Database
  • Cloud Firestore
    • Firebase에서 지원하는 NoSQL 데이터베이스 서비스
      • 별도의 SQL 언어를 몰라도 사용할 수 있음
    • 사용자와 기기간 데이터의 실시간 동기화 가능

데이터 추가하기

  • 왼쪽 메뉴 → 빌드 → Firestore Database 클릭
  • 데이터베이스 만들기
  • 데이터베이스 생성 완료
  • 컬렉션 생성
  • 데이터 추가
    • Collection → Document → Field 순
    • Document와 Field는 여러 개 가능

어플리케이션 등록하기

  • 프로젝트 개요 클릭
  • 앱 등록
  • 터미널에서 Firebase 설치 → Firebase SDK 추가

KEY 저장하기

  • .env.local 파일 생성 후, 개인 key 저장
  • src 폴더 → firebase.js
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET, 
messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID, 
appId: process.env.REACT_APP_FIREBASE_APP_ID,
measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,

};
// Firebase 초기화
const app = initializeApp(firebaseConfig);

// Firestore 객체 저장
export const db = getFirestore(app);

데이터베이스 연결 확인하기

  • App.js
import React, { useEffect } from "react";
import { db } from "./firebase";

const App = () => {

  useEffect(() => {
     console.log(db);
});

  return <div></div>;
};

export default App;
  • 개인 projectId 확인

전체 데이터 가져오기 - getDocs()

  • App.js
import { db } from "./firebase";
import { collection, getDocs} from "firebase/firestore";

const App = () => {
const fruitCollection = collection(db, "fruits");

useEffect(() => {
async function getFruits() {
       const data = await getDocs(fruitCollection);
       console.log(data);
    };

getFruits(); 
}, []);

  return <div></div>;
};
export default App;
  • docs: Array() 클릭
  • Fields 확인

일부 데이터 가져오기 - doc(), getDoc()

  • App.js
import { db } from "./firebase";
import { collection, getDocs, getDoc, doc} from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	useEffect(() => {
		async function getFruits() {
			const docRef = doc(fruitCollection, "수박"); 
			const data = await getDoc(docRef);
			
			if (data.exists()) {
				console.log("결과 : ", data.data());
			} else {
				console.log("결과 없음");
			}
		};
		getFruits();
	}, []);
	return <div></div>;
};

export default App;
  • document가 ‘수박’인 경우만 검색

조건 검색하기(1) - query(), where()

  • App.js
import { db } from "./firebase";
import { 생략, query, where} from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	useEffect(() => {
		async function getFruits() {
			const data = query(fruitCollection, where("season", "==", "가을")); 
			const querySnapshot = await getDocs(data);
	
			querySnapshot.forEach((doc) => {
				console.log(doc.id, " : ", doc.data());
			});
		}
		getFruits();
	}, []);
	return <div></div>;
};

export default App;
  • season이 ‘가을’에 해당하는 과일만 검색

조건 검색하기(2)

  • App.js
import { db } from "./firebase";
import { 생략, query, where} from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	useEffect(() => {
		async function getFruits() {
			const data = query(fruitCollection, where("price", ">", 9000)); 
			const querySnapshot = await getDocs(data);
			
			querySnapshot.forEach((doc) => {
				console.log(doc.id, " : ", doc.data());
			});
		}
		getFruits();
	}, []);
	return <div></div>;
};
export default App;

데이터 추가하기 - serDoc()

  • App.js
import { db } from "./firebase";
import { 생략, setDoc } from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	async function setFruit() {
		await setDoc(doc(fruitCollection, "바나나"), {
			season: "봄", 
			color: "노랑", 
			taste: "달콤", 
			price: 3000,
		}); 
	}
	return <div><button onClick={setFruit}>과일 추가</button></div>; 
};
export default App;
  • 바나나 추가 완료

데이터 수정하기(1) - updateDoc()

  • App.js
import { db } from "./firebase";
import { 생략, setDoc} from "firebase/firestore";

const App = () => {
  const fruitCollection = collection(db, "fruits");

async function updateFruit() {
await updateDoc(doc(fruitCollection, "바나나"), {
season: "봄", 
color: "노랑", 
taste: "달콤", 
price: 5000,
}); 
}
return <div><button onClick={updateFruit}>과일 수정</button></div>; 
};
export default App;
  • 바나나 price 수정 완료

데이터 수정하기(2)

  • App.js
import { db } from "./firebase";
import { 생략, setDoc} from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	async function updateFruit() {
		await updateDoc(doc(fruitCollection, "바나나"), {
			season: "봄", 
			color: "노랑", 
			taste: "달콤", 
			price: 5000, 
			count: 10
		}); 
	}
	return <div><button onClick={updateFruit}>과일 수정</button></div>; 
};
export default App;
  • 바나나에 새로운 field ‘count: 10’ 추가 완료

데이터 삭제하기(1) - deleteDoc()

  • App.js
import { db } from "./firebase";
import { 생략, deleteDoc } from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	async function deleteFruit() {
		await deleteDoc(doc(fruitRef, "메론"));
	}
	
	return <div><button onClick={updateFruit}>과일 삭제</button></div>; 
};
export default App;
  • 메론 삭제 완료

데이터 삭제하기(1) - updateDoc(), deleteField()

  • App.js
import { db } from "./firebase";
import { 생략, deleteField } from "firebase/firestore";

const App = () => {
	const fruitCollection = collection(db, "fruits");
	
	async function deleteFieldFruit() {
		await updateDoc(doc(fruitRef, "바나나"), {
			count: deleteField(), 
		});
	}
	
	return 
	<div>
		<button onClick={deleteFieldFruit}>특정 필드 삭제</button> 
	</div>;
};
export default App;
  • 바나나의 ‘count’ field 삭제 완료

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 9주차 블로그 포스팅
profile
Ryu
이전 포스트

[새싹 프론트엔드] 리액트 라우터

다음 포스트

[새싹 프론트엔드] 타입스크립트와 함수

0개의 댓글