Firebase BAAS 서비스

huni_·2022년 7월 6일

Firebase란?

프론트엔드 개발자가 백엔드 없이 데이터를 Firebase에 직접 넣어줄 수 있게 해주는 것 입니다.

Firebase 사용해보기

FireBase 사용을 위해서 우선, 여기 를 눌러 FireBase 홈페이지로 이동하여 가입 및 설정을 해야합니다.

시작하기를 통해 새로운 프로젝트를 만들어 줍니다.

google 애널리틱스는 사용하지 않을거니 체크를 해주세요.

이곳에서 빌드 - Firestore Database 로 데이터 베이스를 만들어 줍니다.

Cloud Firestore의 위치는 northeast3 으로 설정합니다.

이제 FireBase를 우리의 웹에 추가해야합니다.

FireBase를 연결시킬 프로젝트에서 명령어를 통해 firebase를 추가합니다.

yarn add firebase

최상단 app.tsx에서 위와같이 Config를 넣어주고 export 시켜주어 필요한곳에서 import 시킬 수 있게 만들어 줍니다.

collection 을 통해 firebase 의 cloud storage에 해당하는 컬렉션을 지정해,

addDoc을 통해 해당 컬렉션에 내용을 넣어줍니다.

getDocs를 통해 저장된 내용들을 꺼내어 불러올 수 있습니다.

포트폴리오 리뷰

지난시간에 배운 파이어베이스를 우리 포트폴리오에 적용해 오는 것이 과제였습니다.

파이어베이스로 게시글 작성하기

백엔드가 있을때 게시글 작성은 Mutation을 사용했지만, 파이어베이스는 아래와 같은 방식으로 날려주었습니다.

// 게시글 작성 함수
const onClickSubmit = async ()=>{
	//firebase store의 board 컬렉션을 가지고오는 부분
	const board = collection(getFirestore(firebaseApp),"board")
	//게시글 작성하는 부분
	await addDoc(board,{
		writer : myWriter,
		title : myTitle,
		contents : myContents
	})
	alert("게시글 등록이 완료되었습니다.")
	router.push("/myfirebase")
}

등록이 된 것을 확인하시고 싶으시다면 firebase store에 들어가 board 컬렉션을 봐주시면 됩니다.

axios의 문제점

useQuery는 렌더링 과정에서 바로 요청을 하는 반면에, axios는 useEffect안에서 사용하기 때문에 렌더 이후 Mount될 때 요청을 하기때문에 느리다는 단점이 있습니다.

💡 잠시 복습!

→ axios를 useEffect에 사용하는 이유는 동기처리(await)를 하면 요청을 완료하기 전까지 아래코드로 내려가지 않아 그 시간동안 화면이 그려지지 않는 문제가 있었습니다.
이를 해결하기 위해 화면을 모두 렌더링 한 후 useEffect를 실행해 요청을 날리도록 했습니다.

보완방법 _ ReactQuery

그렇다면 rest-api는 계속 느린요청을 감수해야 할까요?

이를 해결하기 위해 위해선 axios대신에 ReactQuery를 사용해주시면 됩니다.

rest-api를 한두번 요청하거나 연습을 하는것이라면 axios를 이용해도 좋지만, rest-api로 프로젝트를 진행한다 하시면 ReactQuery를 사용해주시면 됩니다.

사용법은 Docs를 통해 알아보시길 바랍니다.

파이어베이스 게시글 불러오기

graphql을 사용 할 때는 useQuery를 사용했지만, 파이어베이스에서는 아래와 같은 방식으로 사용합니다.

아래에서 자세히 살펴보도록하겠습니다.

// 파이어베이스 게시글 불러오기
useEffect(()=>{
	const fetchFireBaseBoard = async()=>{
		//firebase store의 board 컬렉션을 가지고오는 부분
		const board = collection(getFirestore(firebaseApp), "board")
		//게시글 가지고 오기
		const result = await getDocs(board)
		//받아온 게시글 하나씩 뽑아오기
		const boardf = result.docs.map((item)=>item.data)
		//DataBoards의 state바꿔주기
		setDataBoards(boards)
	}
	fetchFireBaseBoard()
},[])