게시판 만들기 __ 자바스크립트로 파이어베이스 연결하기

Firebase를 이용해서 데이터베이스 연결 해서 게시판 기능을 만들기로 했다. 

그런데 생각처럼 쉽지 않았다. 

 

firebase 로 데이터 저장한 기능을 분명 저번에 진행 했었고, 정말 문제없이 잘 진행 되었다. 

그리고 다시 반복했을 때에도 잘 진행이 되었었다.

 

그런데 이번 프로젝트에 적용해 보니 계속 작동이 안되었다. 

처음에는 버전 문제인줄 알고 import 뒤에 있는 주소 속 버전을 바꿔보기도 했고, 

npm을 통한  firebase 설치도 했었다. 

콘솔창에 메세지가 계속 나타남과 동시에 페이지 새로고침으로 인해 사라져버려서,

try_catch 구문도 써봤다. 

그런데 여전히 작동하지 않았다. 

사실 발견한 방법들은 보이는 대로 다 시도해봤던 것 같다. 😂

 

 

 

문제의 원인은 2가지 였다. 

 

1. 이벤트 리스너를 잘못 다뤘다. 😼

form 태그 안에 있는  input 태그에 type을 submit을 주고, value를 '저장하기'를 주었다. 

나는 이 input 태그에 달린 id 값을 가지고 click 혹은 submit 이벤트를 주었다. 

혹시나 싶어 form 태그 에 달린 id 값을 가지고도 이벤트를 주어봤지만, 여전히 작동하지 않았다. 

 

2. 이벤트 리스너 의 동작 순서를 무시했다. 😵

콘솔창에 메세지를 띄워가며 왜 안되는지 확인해 보려 했다. 

그런데 콘솔창에 메세지가 0.1초 만에 사라지며 페이지가 새로고침이 되었다. 

try _ catch구문 , async _ await 구문 전에 이벤트 리스너 안이라는 사실을 먼저 봤어야 했다. 

 

 

⭐️해결 방법 ⭐️

 1. form 태그에 id 값을 주어서, 그 id 값에 이벤트 리스너를 달아주었다. 

submit 이벤트 리스너로 달아줬다.

 

2. 이벤트 리스너 안에 e.preventDefault(); 를 넣어주었다. (당연히 이벤트 리스너 함수 괄호 안에 e를 넣어주었다. )

 

 

 

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import {
  collection,
  addDoc,
} from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
 //자신의 사이트 가서 복붙해 오기.
};

// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

$('#writeFrm').submit(async function(e){
  e.preventDefault();
  let doc = {'오' : 34443};
  
  await addDoc(collection(db, "ddd"), doc);
  alert("저장 완료!");

});

오늘의 교훈.

❗️콘솔이 안찍히면, 왜 안찍히는지 생각을 하고,

❗️그것이 특히나 이벤트 리스너 안이라면, 기본 동작을 막는 함수인 e.preventDefault(); 먼저 시도해 볼것.

❗️form 태그 안에  이벤트 리스너를 달려면, form 태그 자체에 아이디 값을 주어서 submit 이벤트 리스너를 달 것.