오늘은 Firebase와 Html을 연결하여 Join하고싶은 사람의 정보를 넣으면 Firebase데이터베이스에 저장을 하는 기능을 구현했다.
가장 먼저 해야할 일은 바로 Firebase에 들어가서 프로젝트 생성하기이다.
프로젝트를 만들고 설정을 조금 만져주면 된다.
이러한 화면의 데이터베이스를 구경할 수 있다.
그렇다면 Html에서 Firebase를 사용하려면 어떻게 해야할까?
먼저 script태그의 속성으로 type="module"를 추가해준다 -> ex) <script type="module"> </script>
Firebased SDK를 불러오는데 module을 추가하지 않고도 할 수 있지만 이를 추가해주면 훨씬 가볍고 효율적이라고 한다.
import {
collection,
getDocs,
orderBy,
query,
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
script 태그 안에는 이런 코드들이 필요한데 비워놓은 칸들은 본인 프로젝트를 보고 알아서 채워넣어야 한다.
여기까지 하면 데이터를 넣고 꺼내볼 준비가 된 것이다.
데이터를 넣는 방식은 매우 간단하다.
let name = $("#inputname").val();
let mbti = $("#inputmbti").val();
let goal = $("#inputgoal").val();
let github = $("#inputgithuburl").val() || "사용하지않음";
let blog = $("#inputblogurl").val();
let image = $("#inputimageurl").val();
let date = new Date();
이런 방식으로 값이 저장될 변수들을 만들어준다.
let doc = {
name: name,
mbti: mbti,
goal: goal,
github: github,
blog: blog,
image: image,
time: date,
};
변수 값들을 모아서 저장할 객체도 하나 만들어준다.
await addDoc(collection(db, "teamIntroduce"), doc);
마지막으로 이렇게 저장까지 해주면 완료!!
teamIntroduce는 컬렉션의 이름이다. 내가 저장할 저장공간의 이름을 지정하는 것이다.
예를들어 "Hello"라고 적으면 Hello밑에 doc 객체가 저장되는 것이다.
자, 이제 값을 넣었다면 이를 가져와서 목표였던 멤버 카드를 만들어보자.
사실 이부분은 내가 작성한 것도 있었지만 팀원분이 작성한 것과 병합하다보니 내가 만든부분은 거의 날라갔다.
내것이 틀려서 그런건 아니고 응용방법이 달랐기 때문이다.
나는 JQuery를 통해서 만들었고 팀원분은 DOM을 이용해서 두개가 공존하다보니 코드가 복잡해 보였다.
결국사용한 것은 팀원분의 DOM 이걸로 설명하는 시간을 가져보겠다.
import {
collection,
getDocs,
orderBy,
query,
const firebaseConfig = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: "",
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
일단 앞서 설명했던 type=module과 이코드를 또 한번 붙여넣어야 한다. 두개는 서로다른 html파일이고 member.html파일에서 firebase에 연동을 하기위해서는 이 작업이 또 한번 필요하다.
document.addEventListener("DOMContentLoaded", async function () {
이 부분은 Html코드가 모두 로드되고 난 후에 실행된다. 아직 잘은 모르지만 async fucnion 저부분을 통해 비동기 함수가 선언되고, 내부에서 await을 사용할 수 있다고 한다.
async function loadMembers() {
let membersCollection = collection(db, "teamIntroduce");
// 타임스탬프 필드로 오름차순 정렬
let membersQuery = query(membersCollection, orderBy("time"));
let docs = await getDocs(membersQuery);
함수를 이렇게 하나 만들어주고 데이터베이스의 데이터를 가져올 수 있게 한다.
teamIntroduce라는 컬렉션에서 데이터를 가져오게 하는 코드이다.
두번째 줄은 가져온 데이터에 들어있는 time을 기준으로 정렬을 한다는 뜻이다. 기본적으로 오름차순으로 정렬된다.
세번째 줄이 membersQuery에 맞는 데이터들을 가져오는 코드이다.
docs.forEach((doc) => {
let row = doc.data();
let { image, name, mbti, goal, blog, github } = row;
// 카드 HTML 동적 생성
let cardHtml = `
<div class="col">
<div class="card bg-transparent text-dark">
<img src="https://github.com/herokim97/sparta_6group/blob/main/image/back.png?raw=true" class="card-img" alt="background">
<div class="card-img-overlay">
<img src="${image}" class="card-img" alt="${name}" />
</div>
<div class="card-footer">
<h5 class="card-title">${name}</h5>
<button class="btn btn-primary" onclick="showDetail('${image}', '${name}', '${mbti}', '${goal}', '${blog}', '${github}')">
More Info
</button>
</div>
</div>
</div>`;
// 카드를 .mycards .row 안에 삽입
document
.querySelector(".mycards .row")
.insertAdjacentHTML("beforeend", cardHtml);
});
이렇게 row로 불러오는 데이터들로 각각의 값을 저장하고 그러한 값들로 카드를 생성하게 된다.
이렇게 완성된 카드 More Info로 상세보기 페이지를 팀원분이 만들었는데
기존의 멤버카드에는 이름과 사진만 보이고 상세보기를 하면 아까 가져왔던 모든 정보들을 볼 수 있다.
프로젝트에서 내가 맡은 부분은 거의 다 한것같다
종합적으로 이런 화면에서 정보를 넣고 Join을 하게되면 Members화면에서 위와같은 멤버 카드를 만들게 되는것이다.
News파트는 또 다른 팀원분이 진행중이고 Team파트에는 어떤것을 넣을지 금요일에 다시 회의하기로 했다.
그럼 오늘은 여기까지