240718

내일배움캠프 JAVA Spring 과정 4일차

 

 

어제 작성한 firebase 연결단 코드가 영 지저분해서 찝찝했는데 오늘 해결했다!

처음 코드는 [왕초보] 웹개발 종합반 강의에서 실습한 예제를 사용했는데

우선 테이블 데이터를 모두 가져왔고 반복문을 돌려 필요한 row를 찾았다

but 테이블 전체를 모두 가져오는 코드가 너무 비효율적이다

 <script type="module">
    // Firebase SDK 라이브러리 가져오기
    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";


    // Firebase 구성 정보 설정
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
    	...
    };


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

    const receivedData = location.href.split('?')[1];

	// getDocs로 데이터를 모두 가져옴
	let docs = await getDocs(collection(db, "members"));
    
    // forEach문을 돌려서 id가 받아온parameter와 같은 row를 찾고 출력함
    docs.forEach((doc) => {
      let row = doc.data();

      if (row['id'] === receivedData) {
        ...
      }
    });

  </script>

 

 

원하는 row만 가져오고 싶어서 튜터님과 ChatGPT의 도움을 받아 수정했다

query와 where을 사용해 필요한 row를 선별해서 가져왔으나

getDocs를 여전히 사용하기 때문에 forEach문 사용이 불가피했다

(query와 where사용을 위해 import를 추가작성했다)

  <script type="module">
    // Firebase SDK 라이브러리 가져오기
    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 { query, where } 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";


    // Firebase 구성 정보 설정
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    const firebaseConfig = {
    	...
    };


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

    const receivedData = location.href.split('?')[1];

    let row;
    async function fetchData() {
      // 데이터를 선별해서 가져옴
      const docQuery = query(collection(db, "members"), where("id", "==", receivedData));
      const querySnapshot = await getDocs(docQuery);
	  
      // 선별한 데이터를 꺼냄
      querySnapshot.forEach((doc) => {
        console.log(doc.id, " => ", doc.data());
        row = doc.data();
      });

      let image = row.image;
      ...
    }

    fetchData();

  </script>

 

 

뭔가 이상한데?

🤔생각해보니 어제 사용못했던 getDoc함수도

query랑 똑같이 그냥 import해서 사용하면 되는거 아니야?

 

정답입니다...

doc()과 getDoc()을 사용해 필요한 row만 선별해서

반복문없이 출력에 성공했다!!

<script type="module">
        // Firebase SDK 라이브러리 가져오기
        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 { doc, getDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";

        // Firebase 구성 정보 설정
        const firebaseConfig = {
        	...
        };

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

        const receivedData = location.href.split('?')[1];

		// 데이터 선별
        const docRef = doc(db, "members", receivedData);
        // 필요한 row 하나만 가져옴!!
        const docSnap = await getDoc(docRef);

        let row = docSnap.data();

        let name = row.name;
        ...
        
    </script>

해결하고 나니 정말 간단한 코드인데

검색 키워드나 오류를 잡는과정에서 시간이 많이 소요됐다