웹 개발 종합_4주차

웹 개발 4주 차에 배운 내용

Firebase

4주차에는 Firebase라는 구글(Google)이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼에 대해서 배웠다!😃
Firebase는 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와준다.

우선 Firebase 사이트에 접속해서 로그인을 해주었다.
구글(Google) 로그인을 완료한 후 콘솔로 이동했고 프로젝트(Sparta)를 만들어주었다!!
프로젝트가 생성되고 나서는 웹으로 선택하여 진행하였고 앱 닉네임에 spartaProject를 적고 앱 등록을 실행했다.

데이터베이스

Firebase를 사용하기 전에 먼저 데이터베이스의 개념을 익히는 시간을 가졌다.

데이터베이스 : 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음

즉, 데이터베이스는 나중에 데이터를 잘 찾기 위해서 존재하는 것이다!!
데이터베이스를 사용하면 정보를 쉽게 찾고 업데이트할 수 있고, 많은 양의 정보를 효율적으로 관리할 수 있다.
이런 이유로 많은 조직과 기업들이 데이터베이스를 사용하고 있다!
또한 데이터를 분석하기 위해 SQL 언어를 배우고, SQL을 통해 데이터를 활용할 수 있게 된다.

데이터베이스는 크게 두 가지 종류로 나눠지는데,

관계형 데이터베이스(SQL) 과 비관계형 데이터베이스(NoSQL)이 있다.

관계형 데이터베이스는 정리된 정보를 다룰 때 사용하기 때문에 은행, 대기업 등에서 사용한다.
반면 비관계형 데이터베이스는 복잡하거나 유연한 정보를 다룰 때 사용해서 많은 변화가 예상되는 스타트업에서 사용한다.
각각의 데이터베이스 유형은 다른 용도와 장단점을 가지고 있다.
데이터의 구조와 요구 사항에 맞춰서 적절한 데이터베이스 유형을 선택하는 것이 중요하다⭐⭐

그렇다면 데이터베이스의 실체는 무엇일까? 특별한 컴퓨터일까??

그렇지 않다... 아주 간단하게 말한다면 우리가 사용하는 프로그램과 같은 것이다!
내 컴퓨터에 게임도 설치하고, PPT도 설치하고, DB도 설치할 수 있는 것이다.

하지만 요새는 Cloud 형태로 제공해주는 곳들이 많이 생겨났다!!
유저가 몰리거나, DB를 백업해야 하거나, 모니터킬 하기가 아주 용이하기 때문이다.
그래서 지금부터 최신 클라우드 서비스인 Firestore Database를 사용해서 전에 진행한 프로젝트를 업그레이드 시킬 것이다😎😎

Firestore Database

Firestore : 구글(Google)의 클라우드 기반 NoSQL 데이터베이스

간단히 말하자면, Firestore는 데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공한다.
Firestore는 커다란 창고이고, 창고 안에는 많은 서랍장들이 있고, 각각의 서랍장에는 다양한 종류의 문서들이 들어있다고 생각하면 된다!

• 컬렉션(Collection) : 서랍장 그룹이라고 생각하면 된다. 여러 개의 문서들이 특정한 주제 또는 유형으로 그룹화되어 있다. 예를 들어 "albums"라는 컬렉션 안에는 문서들이 저장될 수 있다.
• 문서(Document) : 서랍장 안에 들어있는 작은 종이라고 생각하면 된다. 하나의 종이는 여러 개의 필드(Field)로 구성되어 있다. 필드는 종이에 저장된 데이터를 나타낸다.
• 필드(Field) : 문서 안에 있는 데이터의 작은 부분이다. 각 필드는 값으로 구성된다. 예를 들어, 사용자 문서의 필드로는 "내용", "날짜", "이미지주소", "제목" 등이 있을 수 있다.

Firestore 규칙 수정하기

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

Firestore 세팅하기

// 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: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};


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

Firebase와 연동하기 위해 script 태그의 type="module"로 바꾸면서 전에 작성했던 onclick(), makeCard()와 같은 기능들이 작동되지 않아 모두 고쳐주어야 했다....🥲

 

Firestore Database에 데이터 넣기 - addDoc

$("#postingbtn").click(async function () {
    let image = $('#image').val();  //안에 있는 image value 값을 가져올 수 있다.
    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();
})

PostBox에 입력했던 값을 데이터베이스에 넣는 작업을 진행했다!

• alert() 코드를 통해 알림 내용을 추가했다.
• window.location.reload(); 코드를 통해 화면을 새로고침하는 기능을 추가했다.

 

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

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-body-secondary">${date}</small>
            </div>
        </div>
    </div>`;

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

Firestore Database에서 데이터를 가져와 변수에 각각 담아주고 makeCard() 함수에 있던 코드를 가져와서 쉽게 작성할 수 있었다.

Postbox 열고 닫는 기능, 미세먼저 농도 나타내는 기능 수정하기

작성했던 코드를 고친다고 해서 겁먹었지만 작성되어있던 코드에서 크게 바뀌는 점이 없어서 안심이 되었다.

$("#savebtn").click(async function () {
    $('#postingbox').toggle();  //display 값이 none으로 바뀌면서 안보이게 되는 원리이다. 
})

let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
    let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
    //console.log(mise);  //mise 출력하기! - 좋음만 출력된다.

    $('#msg').text(mise);  //span 태그 안의 '나쁨'이라는 단어를 mise 값으로 변경해준다. 필요한 곳에 텍스트를 갈아끼웠다.
})

 

웹 개발 종합 강의를 들으면서 느낀 점 🤨🤨

Firestore Database와 연동해서 직접 입력한 내용들이 새로고침에도 없어지지 않고 계속 유지되는 것을 보고, 프론트엔드와 백엔드의 합동으로 페이지가 더 완벽해짐을 느낄 수 있었다 😮😮 

 

+ 오늘 실행한 계획

• SQL, 자바 알고리즘 문제 각각 2문제씩 풀이!
  • 아직 프로그래머스가 익숙치 않아서 언어 선택이 있는 줄 모르고 C 언어 제출란에 Java 언어로 작성 후 계속 실패되는 것을 보며 절망하고 있었다... 코드에 오류도 없는데 계속 실패되는 것을 보면서 프로그래머 페이지를 살펴보다가 언어를 바꿀 수 있는 것을 확인하고 무사히 난관을 해결할 수 있었다........🥲🥲🥲🥲
  • 자바 두 번째 문제가 자바 배열을 이용한 문제였는데, 아직 자바 배열에 대한 강의를 듣지 못해서 당황했다. 하지만 구글링을 통해 자바 배열의 길이를 구하는 방법(length)을 알 수 있었고 방법을 통해 문제를 쉽게 해결할 수 있었다.

class Solution {
    public double solution(int[] arr) {
        double answer = 0;
        double sum = 0;
        
        for (int i = 0; i < arr.length; i++) {
            sum = sum + arr[i];
        }
        answer = sum / arr.length;
        
        return answer;
    }
}

• 웹 개발 종합 4주차 강의 수강
  • 대학교 졸업작품 만들 때 Firebase를 활용해서 페이지를 만들었던 경험이 있어서 강의 내용이 좀 더 쉽게 이해됐던 것 같다😎