사전캠프 | 웹개발 종합반 4-5주차 강의 기록

하영·2024년 7월 10일

사전캠프 파이어베이스

etc.

목록 보기

6/26

오늘은 4-5주차 강의를 정리하면서 완강을 자축하려한다ㅋㅋㅋ 강의가 짧아서 축하할 건 없지만 일단 다 들었다는것에 만족쓰^^

웹개발 종합반

3주차까지는 html, css, jquery를 다루었다면 4,5주차는 'firebase'를 통해 데이터를 저장하고 가져오는 것을 배웠다.

파이어베이스는 처음 사용해보았는데 localStorage 와는 다른 재미가 있었다.

Firebase란?

구글이 개발한 모바일/웹 애플리케이션 개발 플랫폼으로 백엔드 인프라를 구축 및 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와주는 서비스이다.

백엔드 코드 없이도 프론트엔드 지식만으로도 웹서비스를 출시할 수 있다.

Firestore Database 시작하기

https://firebase.google.com/?hl=ko

위 파이어베이스 링크에 들어가서 회원가입 후 상단에 '콘솔로 이동' 을 클릭한다.
'프로젝트 만들기'를 눌러 내 프로젝트를 생성하고 아이폰앱인지, 안드로이드앱인지, 웹인지를 선택한다.

파이어베이스 데이터베이스 > 규칙 으로 들어가서 위 사진처럼 write: if true; 로 변경한다.
작업할 파일에 가서 script에 파이어스토어 세팅 코드를 적용한다.

// 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 구성 정보 설정
const firebaseConfig = {
	본인 설정 내용 채우기 
};


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

Firebase 구성 정보 설정과 인스턴스 초기화는 '설정'에 들어가면 있다.

강의에서는 '구성' 목록에 있는 SDK 설정을 가져와서 작업했다.

코드 수정 및 추가 작업

<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";

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
	const firebaseConfig = {
			apiKey: "AIzaSyCz-aTF0iQvQilKJyrTHQxg1T2X_13trtw",
            authDomain: "sparta-49ce5.firebaseapp.com",
            projectId: "sparta-49ce5",
            storageBucket: "sparta-49ce5.appspot.com",
            messagingSenderId: "819019173056",
            appId: "1:819019173056:web:e47a0781c0b38268923125",
            measurementId: "G-0NFWX91DD1"
        };

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


	$(document).ready(function () {
		let url = "http://spartacodingclub.shop/sparta_api/seoulair";
	fetch(url).then(res => 
		let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
		$('#msg').text(mise)
		})
	})

function openclose() {
	$('#postingbox').toggle();
}

function makeCard() {
	let image = $('#image').val();
    let title = $('#title').val();
    let content = $('#content').val();
    let date = $('#date').val();

	let temp_html = `
	<div class="col">
		<div class="card h-100">
			<img src="${image}"class="card-img-top" alt="...">
            <div class="card-body">
                 <h5 class="card-title">${title}</h5>
                 <p class="card-text">${content}</p>
			</div>
			<div class="card-footer">
				<small class="text-muted">${date}</small>
			</div>
		</div>
</div>`;
  
	$('#card').append(temp_html);
}

</script>

지난 강의까지 작업한 코드이다.
파이어베이스를 적용했기 때문에 수정해야할 부분이 있어 그 부분을 수정해나가야한다!

[addDoc] Firestore Database에 데이터 넣기

$("#id").click(async function () {
    let doc = {};
    await addDoc(collection(db, "콜렉션이름"), doc);
})

이 코드는 데이터를 추가할 코드이다.
사용자가 입력한 데이터를 받아서 저장하고 이를 다시 내가 만든 파일로 불러와서 데이터를 추가해 줄 것이다.

❎ 파이어베이스를 연결하면서 <script type="module"> 로 타입을 바꿔주었다.
이렇게 타입을 'module'로 바꾸면 onclick()이벤트가 실행되지 않는다!!
따라서 onclick()이벤트를 사용한 코드를 .click()이벤트로 바꿔주어야한다.

⭐️<script type="module"> 은 onclick()이벤트가 실행되지 않는다!!

onclick() 수정하기

function openclose() {
	$('#postingbox').toggle();
}

가장 간단한 이 toggle() 사용 함수부터 수정해보자.
클릭 이벤트로 수정해주어야 하니까
onclick() 을 지우는 대신 id 를 지정해준 후 아래처럼 코드를 수정한다.

$("#savebtn").click(async function () {
	$('#postingbox').toggle();
})

간단함! 다음~!

기록하기 버튼에도 사용한 onclick()을 바꿔주기 위해 해당 코드로 가서 id를 지정해주었다.

네모박스처럼 id 명을 수정하고 아래 코드는 원래 작성했던 것과 동일하게 작성했다.
let doc = {} 에는 각각 변수로 담은 내용들이 보여질 수 있도록 지정하고 콜렉션 이름은 albums로 정하였다.
사용자가 각 정보 입력 칸에 데이터를 입력한 후 postingBtn(기록하기) 을 클릭하면 파이어베이스 데이터로 저장이 된다.
await addDoc(collection(db, "albums"), doc); 에서 변수로 담은doc 을 불러와줘도 되지만, 따로 지정하지 않고

사진처럼 적어줘도 된다. (스파르타플릭스에서는 따로 적어서 불러오는 방식으로 작성함)

document.ready() 수정하기

기존 코드를 보면

$(document).ready(function () {
		let url = "http://spartacodingclub.shop/sparta_api/seoulair";
	fetch(url).then(res => 
		let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
		$('#msg').text(mise)
		})
	})

이렇게 코드를 썼었는데 파이어베이스를 사용하면 임포트하는 순간 다 준비가 된 후 실행이 된다.
따라서 굳이 document가 준비되면 실행되어라~! 라는 코드를 적을 필요가 없음!!

//실시간 온도 불러오는 코드(api)
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url).then(res => res.json()).then(data => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
            $('#msg').text(mise);
        })

해당 코드를 지워주면 이렇게 깔끔하게 정리 완료!

[addDoc] 데이터 넣고, 화면 새로고침 하기

사진처럼 데이터를 넣고 기록하기를 누르면 alert() 을 통해 저장되었다는 경고창을 추가할 것이다.

await addDoc(collection(db, "albums"), doc);
			alert('저장완료');
            window.location.reload();

addDoc에 저장이 다 되면,
'저장완료' 라는 경고창이 뜨고, 확인을 누르면 화면이 새로고침 된다.

[getDocs] Firestore Database에서 데이터 가져오기

데이터를 입력하고 파이어베이스로 가보면 위 사진처럼 뜬다.
내가 지정한 컬렉션이름 (여기서는 album)이 생성되고 그 안에 image, title, content, date 까지 모두 저장된 걸 확인할 수 있다.

이제 이 데이터를 불러와서 cards div에 추가하게 만들어보자.

let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();
        });

일단 여기까지 작성한 후 콘솔로 row 를 확인해보자

그럼 이렇게 row안에 content, image 등이 저장되었다!! 👏
저장된 데이터를 불러오는 코드도 추가해보자
방식은 저번 3주차까지의 강의 내용과 동일!

let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();
          
          	let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let temp = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-body-secondary">${date}</small>
                    </div>
                </div>
            </div>

	$('#card').append(temp);
        });

temp 변수에 불러온 데이터를 활용해서 만든 카드html 을 저장하고 버튼을 눌러서 추가 될 때마다 뒤에 붙도록 append() 시켜주었다.

완성된 코드 확인

    <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";

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyCz-aTF0iQvQilKJyrTHQxg1T2X_13trtw",
            authDomain: "sparta-49ce5.firebaseapp.com",
            projectId: "sparta-49ce5",
            storageBucket: "sparta-49ce5.appspot.com",
            messagingSenderId: "819019173056",
            appId: "1:819019173056:web:e47a0781c0b38268923125",
            measurementId: "G-0NFWX91DD1"
        };

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

		//기록하기 버튼 누르면 데이터 저장하기
        $("#postingbtn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();

            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            };
            await addDoc(collection(db, "albums"), doc);
          // 데이터 저장 후 '저장완료' 경고창 띄운 후 새로고침
            alert('저장완료!');
            window.location.reload();
        })

		// '추억저장하기' 버튼 클릭 시 input 창 사라짐(toggle)
        $("#savebtn").click(async function () {
            $('#postingbox').toggle();
        })

		//실시간 온도 불러오는 코드 (api)
        let url = "http://spartacodingclub.shop/sparta_api/seoulair";
        fetch(url).then(res => res.json()).then(data => {
            let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
            $('#msg').text(mise)
        })


		// 저장한 데이터 불러오기
        let docs = await getDocs(collection(db, "albums"));
        docs.forEach((doc) => {
            let row = doc.data();

            let image = row['image'];
            let title = row['title'];
            let content = row['content'];
            let date = row['date'];

            let temp_html = `
            <div class="col">
                <div class="card h-100">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${content}</p>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">${date}</small>
                    </div>
                </div>
            </div>`;
          
            $('#card').append(temp_html);
        });

    </script>

전체 코드를 보니까 되게 짧고 간단하네...ㅎ
완성코드는 강의자료에서 정리된 코드를 복붙한거여서 temp 라든가 하는 변수가 다를 수 있음..!

사전캠프 강의 느낀점

본캠프 들어가기 전 맛보기로 알려주시는 강의여서 그런지 자세하고 꼼꼼하게 배우고 있다는 느낌이 없어서 너무 아쉬웠다. 강의가 10분 내외여서 집중이 흐트러지는 단점은 없었지만 짧은 강의여서 진득하게 배우지 못하는 느낌... 본캠프 강의도 이런 방식이라면 큰일이다..ㅋㅋㅋ

그리고 자바스크립트는 전혀 사용하지 않고 제이쿼리로만 써봐서 지금 코드를 자바스크립트로 적용해서 해보라고 하면 또 버벅거릴 것 같다.

걱정이 되어서 강의를 들어본건데 더 걱정이 많아져버렸다..ㅠ
내가 하기 나름이니까 이것저것 수정해보고 에러창도 만들어보고 문서나 예시도 찾아보면서 디벨롭해야지