들어가며
블로그 주인장은 firebase가 먼지 모른다!
예전에 만들었던 프로젝트에 mysql과 PHP를 사용했었고, 로컬 서버로 작업했었는데 이번엔 조금 간편하게 firebase를 사용하여 만드려고한다.
firebase web docs
https://firebase.google.com/docs/web/setup?hl=ko#available-libraries
Firebase...
Firebase는 Google에서 제공하는 종합 앱 개발 플랫폼으로 여러가지 도구와 서비스를 제공하는 클라우드 기반 플랫폼 인것이다.- 데이터베이스, 인증, 호스팅, 클라우드 함수, 분석 등 다양한 서비스가 존재한다.
Firebase의 주요 기능
실시간 데이터 베이스, 사용자 인증, 클라우드 함수, 호스팅, 푸시 알림, 분석 도구
Firestore란?
Firebase에서 제공하는 클라우드 호스팅 NoSQL 데이터 베이스다.
🤫 쉽게 비유하자면
Firebase는 큰 공구함이고 그 안에 도구가 들어있는데, 그 도구 중 하나가Firestore이다.
시작해보자.
매우 초급자의 입장에서,, 하나하나 해보겠습니다..!
1. firebase 회원가입
STEP 1. 먼저, Firebase에 가입해야 합니다.
https://console.firebase.google.com/
2. 프로젝트 만들기
새 프로젝트를 만들어봅시다.
-
Firebase 콘솔에서 "프로젝트 추가" 버튼 클릭하기
-
프로젝트 이름 입력하고, 약관 동의하기
-
Google애널리틱스 사용 여부 선택하기
(저는 일단 사용하도록 설정했습니다...) -
"프로젝트 만들기" 버튼 클릭하기
3. sdk 받아서 프로젝트에 세팅하기
프로젝트를 만들었으면 웹 앱에 FIrebase 연결해봅시다.
- 프로젝트 대시보드에서
"웹"(</> 아이콘)버튼을 클릭하기 - 앱 닉네임을 입력하고 "앱 등록" 버튼을 클릭하기
- SDK 설정 및 구성을 복사하기
복사한 sdk를firebasedb.ts파일을 만들어서 저장하러 가봅시다.
- npm이나 yarn을 이용하여 firebase 패키지 설치 !
npm i firebase # or yarn add firebase
4. .env.local 파일을 만듭시다 (git에 절대 올리면 안됩니다. key 관리 중요하다)
자 이제 보안을 위해 Firebase 구성 정보를 환경 변수로 관리를 해봅시다.. (.env.local)
다른 방법도 있지만 제일 간단한 방법을 소개하려 해요.ㅎ
- 프로젝트 루트에 .env.local을 만듭시다.
firebase구성 정보를 환경 변수로 추가합시당NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_auth_domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id # ... 나머지 구성 정보도 추가
5. config 파일 만들고 세팅
와우 .. 이제 firebaseConfig.ts파일을 만들어서 Firebase를 초기화 해봅시다.
// 저는 여기에다 만들었어요.
// app/_lib/firebaseConfig.ts
import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
// ... 나머지 구성 정보
};
const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);이렇게 하면 Firebase 초기화가 완료되고, Firestore 데이터베이스를 사용할 준비가 끝납니다.
6. Firestore 데이터베이스 만들기
이제 DB를 만들고 값을 좀 넣어볼까유? 🥱
-
Firebase 콘솔에 로그인한 후, 방금 만든 프로젝트를 선택하기
-
왼쪽 메뉴에서 Firestore Database를 클릭
-
Create Database 버튼을 클릭하여
Firestore 데이터베이스를 생성합니다. -
데이터베이스의 보안 규칙을 설정합니다. 개발 중에는 "Test mode"를 선택할 수 있지만, 실제로 사용할 때는 보안을 강화해야 합니다.
firebase에서 프로젝트 / 컬렉션 / 문서 아이디가 멀 뜻하는거죠..?
저는 처음에 firestore, collection, document가 헷갈려서 힘들었던 것 같아요!
💡 제가 찍먹해보았던 Mysql과 구조 비교를 해보자면!
MySQL과 Firestore 구조 비교
MySQL
- 데이터베이스 (Database): 프로젝트 또는 애플리케이션 단위로 데이터를 저장하는 공간
- 테이블 (Table): 데이터베이스 내에서 관련 데이터를 저장하는 구조.
Firestore
- 데이터베이스 (Database): Firestore에서는 모든 데이터가 저장되는 단위(MySQL의 db랑 같음)
- 컬렉션 (Collection): 데이터베이스 내에서 관련 문서를 저장하는 그룹입니다. (MySQL의 Table)
- 문서 (Document): 컬렉션 내의 개별 데이터 항목으로, (MySQL의 테이블에서 행(row))요약
- MySQL: 데이터베이스 → 테이블 → 행
- Firestore: 데이터베이스 → 컬렉션 → 문서
7. 서버 컴포넌트에서 Firestore 불러오기
// app/(pages)/api/route.ts
...import 생략;
export async function GET(req: NextRequest) {
try {
const querySnapshot = await getDocs(collection(db, 'menu_item'));
const data = querySnapshot.docs.map((doc) => ({
id: doc.id,
...doc.data(),
}));
return NextResponse.json({ data });
} catch (err) {
console.error('Error fetching documents:', err); // 에러 로그 추가
return NextResponse.json(
{ error: 'Failed to fetch data' },
{ status: 500 },
);
}
}이제 클라이언트 컴포넌트에서 데이터를 불러와보도록 할게유
// app/(pages)/menu/page.tsx
'use client';
import React, { useEffect, useState } from 'react';
/** @desc 메뉴 리스트 페이지 */
const MenuListPage = () => {
const [data, setData] = useState<any[]>([]); // any만 보면 화가 나지만 일단 해봅시다!
useEffect(() => {
const fetchData = async () => {
const response = await fetch('/app/menu/api');
const result = await response.json();
setData(result.data);
};
fetchData();
}, []);
return (...생략);
};
export default MenuListPage;이렇게 하면 Firebase에서 가져온 메뉴 데이터를 화면에 표시할 수 있습니다!
이 부분은 제가 작성하면서 학습한 부분을 추가로 적어보았어요.
💡 collection, getDocs ??
collection은 Firestore 데이터베이스에서 특정 컬렉션을 참조하는 함수getDocs는 주어진 컬렉션의 모든 문서를 가져오는 비동기 함수
💡 파일 명을 route.ts로 해야하는 이유 ??
route.ts라는 이름은 Next.js에서 API 라우트를 정의할 때 사용되는 특별한 파일 이름- 이 파일 내에서 정의된 함수(
GET,POST등)는 해당 경로로 들어오는 요청을 자동으로 처리해준다. - Next.js의 라우팅 시스템에서 이 파일의 역할이 요청을 특정 경로에 매핑하는 것이기 때문에
route라는 이름이 붙는다.(꼭..)
💡 querySnapshot.docs.map(...)
-docs 프로퍼티는 해당 쿼리 결과로 반환된 문서 배열
doc.data()를 호출하면 해당 문서의 데이터를 가져올 수 있고, doc.id는 문서의 고유 ID를 반환한다.- 따라서,
querySnapshot.docs.map은 각 문서의 ID와 데이터를 포함하는 새로운 객체를 배열로 만들어 반환합니다.
💡 NextRequest, NextResponse
NextRequest: Next.js의 API 라우트에서 요청을 처리할 때 사용하는 객체로, 클라이언트에서 보낸 HTTP 요청의 정보를 포함한다.- 요청의 URL, 헤더, 바디 등 다양한 정보를 얻을 수 있다.
NextResponse: API 라우트에서 응답을 생성할 때 사용하는 객체로, NextResponse.json()과 같은 메소드를 통해 JSON 형태의 응답을 쉽게 만들 수 있다.
다른 메소드도 사용할 일이 있다면 작성하러 오겠습니다!
수고하셨어요!
마무리
마무리는 처음 적는 것 같네요.
GET외에도 다른 것을 사용해보면 더 포스팅하러 오겠습니다.
Firebase 공식 문서
(https://firebase.google.com/docs)를 참고하면 더 자세한 정보를 얻을 수 있습니다.
사실 이 분 블로그가 더 잘되어있는것 같습니다..
