728x90
사실 학기 시작하고 공모전 상받고 끝나면서 좀더 하고싶은사람이 알아서 하자 ~ 는 느낌으로 뿔뿔이 흩어졌던 프로젝트인데,
학기가 바빠서 다시 손 못보고있다가 firebase 연결을 안하고 끝난게 계속 마음에 걸렸어서 뒤늦게 연결시켰다.
firebase 연결하고 데이터 가져오는 거는 정말 쉽다.
To-do
1. 엑셀 파일을 json으로 변환
2. firebase에 프로젝트 / 앱 추가 후 json 데이터를 firebase에 import
3. DB를 가져와서 알맞게 렌더링~
1. excel to json
파일 변환 사이트는 많이 나와있다. 나는 위 사이트에서 변환함.
2. import
다음의 블로그를 참고했다.
https://copycoding.tistory.com/315
3. 데이터 가져오기
https://firebase.google.com/docs/firestore/
firebase 문서를 참고하면 된다.
우선 2번의 과정에서 firebase에서 프로젝트를 생성하고 js에 firebaseConfig를 복사해왔을 것이다.
import * as firebase from "./node_modules/firebase/app";
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
...
}
firebase.initializeApp(firebaseConfig);
const db = getFirestore();
export { db };
나는 위처럼 작성했다.
initializeApp을 가져오려고 똑같이 import { initializeApp } from "firebase/app"; 하면 모듈을 찾을 수 없다고 떠서 위와같은... 모양이 나왔다. 🤔
그리고 데이터를 렌더링할 파일에 와서
import { db } from "../config";
import { collection, getDocs } from "../node_modules/firebase/firestore";
db와 콜렉션, getDocs를 가져오고
let contestList = [];
async function dbContest(contestList) {
const querySnapshot = await getDocs(collection(db, "contest"));
querySnapshot.forEach((doc) => {
contestList.push({
id : doc.data().id,
date : doc.data().date,
title: doc.data().title,
sport : doc.data().kinds,
});
});
}
dbContest(contestList);
데이터 객체를 리스트에 추가했다.
잘 가져와진 걸 볼 수 있다. 길이가 늘어난 김에 scrollView로 바꿔주었다.
++))
체육관 검색 결과 페이지도 바꿔주었다.
'project' 카테고리의 다른 글
유니티 WebGL 배포 (0) | 2022.04.24 |
---|---|
[Knock/Knock] 검색 성능 개선 (0) | 2022.04.04 |
[패션정보 웹] php로 대분류에 따른 소분류 만들기 (쿠키 사용) (0) | 2021.12.06 |
[감정인식 챗봇 스피커 '버디' 프로젝트] 데이터 전처리와 KoBert (0) | 2021.11.14 |
[패션 정보 웹] 쇼핑몰 크롤링 (0) | 2021.11.11 |