서버만들긴 애매하고 하드코딩은 하기싫고 json도 만들기 싫다면!? Firestore Database사용하기

기존 포트폴리오 사이트는 하드코딩으로 되어 있어 오타라도 있으면 무조건 배포를 다시해야했음

물론 배포자동화가 연결되어 있지만 그래도 귀찮은 건 귀찮은 것임

혹시라도 배포가 안된다면!!! 

 

기존에 사용하던 서버에 그냥 api 추가하면 되긴하지만,,,

뭔가 이것저것 믹스되는게 싫어서 방법을 찾아봄

 

번역파일 만들었던 것 처럼 json 파일을 만들까싶기도했지만

하드코딩만 안하는거지...빌드는 해야해서 패스 

ChatGpt에게 물어보니 명쾌한 답을 줌

 

크게 Headless CMS와 Firestore Database를 사용할 수 있는 것으로 보였다.

둘 중에서 뭘 쓸까 찾아보니 Headless CMS는 ui가 있어서 좀 더 손쉽게 추가 수정 삭제가 가능한 것으로 보였다.

이런게 있었다니..!

해당 부분은 나중에 기획자나 마케터팀과 협업할 때 사용하기 참 좋겠다싶었음

 

Firestore Database는 데이터베이스로만 알고 있었지 바로 호출이 가능하다는 사실은 몰랐음!!

한 번도 사용해본 적이 없어서 공부할 겸 써보는걸로!!

 

먼저 파이어베이스 프로젝트 만들어주기

굉장히 쉬움

 

이것만 클릭하면 거의 다 된것임
제일 오래걸리는 프로젝트 이름 짓고

다음 누르면 거의 뭐 끝임

ai는 쓸 일이 있을까 싶긴하지만 그냥 사용 설정 해봄ㅎ

 

내 사이트에 어떤 사람이 들어오면 알면 재밌으니까~ 추가!

참고로 돈 안들어요, 이름 대충 지은거 들켯넴

 

기본값으로 잡아주고 프로젝트만들기하면 완성

이제 어떤 앱에서 사용 할 건지 추가하면 됨!

여긴 이름 멀쩡하게 함

앱등록을 하게 되면 프로젝트에서 사용할 sdk를 알려줌

다시 확인 할 수 있으니 지나쳐도 괜찮다

 

이제 본 목적인 데이터베이스를 만들어 봅시다

오 실시간업데이트~

디비만들기도 짱 쉬움

 

위치는 서울 당연함~

 

테스트모드는 따로 구성안하고 바로 프로덕션으로 사용할거라 프로덕션모드로 시작

추후에 read 권한만 바꿔주자 

 

컬렉션이름 만들어주고

원하는 디비 테이블 만들면 디비만들기도 끝

id 자동 설정이 안되고 필드 unique 설정도 안되는게 좀 불편한 거 같음 

정말 단편적으로만 봤지만,,

규모가 큰 프로젝트에서는 쓰기 힘들겟다 싶었음

 

이제 코드만들면 끝!

firebase, firestore 설치하고 

yarn add firebase @firebase/firestore

 

document에서 코드 가져오기

    const fetchData = async () => {
      const docRef = doc(db, "portfolio", "experience");
      const docSnap = await getDoc(docRef);

      if (docSnap.exists()) {
        console.log("Document data:", docSnap.data());
      } else {
        // docSnap.data() will be undefined in this case
        console.log("No such document!");
      }
    };

 

 

호출하면 완료!!!!!

 

짠~한번에 안 끝나죵 에러등장! 

배포 모드에서 권한 수정 안하면 만날 수 있는 에러입니다 ㅎ

rules_version = '2';

service cloud.firestore {
	match /databases/{database}/documents {
		match /{document=**} {
			allow read: if true;
			allow write: if false;
		}
	}
}

 

읽기만 누구나 가능하도록 설정

이제 다시 호출하면!!!완성~~!

 

생각보다 너무 간편하고 쉽게 할 수 잇어서 1시간도 안걸린것 같다

이제 데이터 동적으로 관리 좀 해보자!!!