LocalStorage

LocalStorage는 웹 브라우저에 데이터를 저장하는 데 사용되는 웹 스토리지 기술이다.

데이터 저장하기:

localStorage.setItem(key, value);

데이터 가져오기:

const value = localStorage.getItem(key);

데이터 삭제하기:

localStorage.removeItem(key);

모든 데이터 삭제하기:

localStorage.clear();

주의사항:

LocalStorage에 저장되는 데이터는 문자열 형태로 저장된다. 객체나 배열과 같은 복잡한 데이터를 저장하기 전에 JSON.stringify() 를 사용하여 문자열로 변환해야 한다.
저장 가능한 데이터의 용량은 브라우저마다 다를 수 있으며, 일반적으로 5MB 정도이다.
LocalStorage는 클라이언트 측에서만 접근할 수 있으므로 보안에 민감한 데이터를 저장하는 데 부적합하다.

Firebase

Firebase는 Google에서 제공하는 클라우드 기반 플랫폼으로, 앱 및 웹 개발에 사용되는 다양한 서비스를 제공한다. Firebase를 사용하여 데이터베이스를 구축하고 관리할 수 있다.

프로젝트 설정:

Firebase 콘솔에 접속하여 새 프로젝트를 생성한다.
프로젝트 설정에서 필요한 서비스를 활성화한다(예: Firestore, Realtime Database 등).

Firebase SDK 추가:

웹 앱의 경우, Firebase SDK를 HTML 파일에 추가한다.

데이터 추가:

Firestore의 경우:

const db = firebase.firestore();
db.collection("collectionName").add({ field: "value" });

Realtime Database의 경우:

const db = firebase.database();
db.ref("path").set({ field: "value" });

데이터 조회:

Firestore의 경우:

const db = firebase.firestore();
db.collection("collectionName")
	.get()
	.then((querySnapshot) => {
		querySnapshot.forEach((doc) => {
			console.log(doc.data());
		});
	});

Realtime Database의 경우:

const db = firebase.database();
db.ref("path")
	.once("value")
	.then((snapshot) => {
		console.log(snapshot.val());
	});

데이터 삭제:

Firestore의 경우:

const db = firebase.firestore();
db.collection("collectionName").doc("docId").delete();

Realtime Database의 경우:

const db = firebase.database();
db.ref("path").remove();

주의사항:

Firebase를 사용하기 위해서는 Firebase 프로젝트를 설정하고 SDK를 추가해야 한다.
Firebase는 실시간 데이터베이스와 클라우드 Firestore 등 다양한 서비스를 제공하므로, 사용하려는 서비스에 맞는 문서와 가이드를 참조해야 한다.
Firebase는 클라우드 기반 서비스이기 때문에 인터넷 연결이 필요하다.