스파르타 코딩 클럽 사전 캠프 4주차 -3

잘 안들립니다 복명복창 더 크게

 

자, 파이어 베이스는 뭐라고요??

 

 

" 남이 만들어 놓은 데이터 베이스 " 다.

 

백엔드에 대해서 걍 잘 모르는 상태로 나는 간다 구글 크롬에서 제공되는 Firebase로.

---

 

이번 주차 부터는 백엔드를 활용을 해야 하는데

 

파이어베이스를 이용해서 조금 쉽게 접근을 하기로 했다.

 

파이어 베이스 활용법 강의라고 보면 된다.

 

3가지 예시가 나왔는데

 

1. 데이터가 있다던지

2. API 를 제공해서 데이터를 가져다가 준다던지 ,

3. 아니면 API를 이용해서 데이터를 가져갈 수 있게 해준다던지.

 

아 API 는 또 뭔가? chat GPT 한테 물어봤다.

 

프로그래밍을 입문하고 구글 파이어베이스를 사용하는 경우 API를 아주 간단하게 이해하면 다음과 같이 생각할 수 있습니다:

API는 "앱과 백엔드 서버 사이의 대화 규칙"이라고 생각할 수 있습니다. 쉽게 말하면, 앱(또는 프로그램)이 파이어베이스와 어떻게 대화해야 하는지 알려주는 일종의 사용설명서라고 볼 수 있습니다. 이 사용설명서(API)를 따라서 앱은 파이어베이스와 정보를 주고받고 원하는 작업을 수행할 수 있습니다.

예를 들어, 파이어베이스에는 데이터베이스에 정보를 저장하거나 가져오는 작업을 수행할 때 사용하는 API가 있습니다. 이 API를 사용하면 앱은 파이어베이스와 데이터를 주고받을 수 있게 됩니다. 또한 파이어베이스의 인증 서비스를 사용하려면 인증 API를 사용하여 사용자를 등록하고 로그인할 수 있습니다.

간단히 말하면, API는 앱과 백엔드 서비스 간의 소통을 가능하게 해주는 규칙과 도구입니다. 앱은 API를 사용하여 파이어베이스와 상호 작용하고 필요한 작업을 수행합니다.

 

= API는 앱과 백엔드 서비스 간의 소통을 가능하게 해주는 규칙과 도구 정도로 이해하면 될 것 같다.

 

그래서 백엔드는 파이어베이스를 이용해서 데이터 베이스를 간단하게 따로 서버 개발 없이 이용할 수 있다.

 

 

입문자에게는 사용량을 넘어 갈 정도로는

작업이 되지 않는다.

 

-> 그래서 그냥 무료다.

 

 

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

Firebase | Google’s Mobile and Web App Development Platform

 

로그인 -> 콘솔로 이동 -> 프로젝트 만들기

강의 자료에는 애널리틱스 사용 해제 라고 뜨는데, 영상에서는 애널리틱스 사용 하는 걸로 만들어져 있다...

 

크게 중요한 기능은 아닌 것 같다. 모든 기능  그냥 동의하고

 

새 프로젝트를 만든다.

웹에 앱 등록을 한다.

이름 설정하고 그냥 일단은

 

콘솔로 이동을 한다.

 

이제 그냥 간단히 보면 우측 메뉴들을 보면

 

굉장히 많은 기능이 있다. 이렇게 클라우드 환경에서 이제 개발자들을 돕는 서비스들이 있는데

 

아무래도 제공 되는 것이다 보니 자유도의 측면에서는 한계가 있다고는 한다.

 

---

데이터 베이스란?

 

• 데이터베이스란?방 정리는 왜 하는 걸까요? 잘 보관하려고 vs 잘 찾으려고
• 나중에 우리가 잘 찾으려고 미리 정리를 해두는 거예요 즉, 데이터베이스는 데이터를 잘 찾기 위해서 존재하는 것!!
• 😎 데이터베이스는 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음입니다.

잘 찾으려고, 잘 적재를 하는 것이다.

얼마나 효과적이고 좋은지. 간단하게 어떻게 하면 데이터를 잘 가져가게 할까가 중요하다.

 

 

각각의 데이터베이스 유형은
다른 용도와 장단점을 가지고 있다.

데이터의 구조와 요구 사항에 맞춰

적절한 데이터베이스 유형을 선택
하면 된다.

 

No SQL 은 낫 온리 라는 의미이다.

 

 

 

유저 정보가 있고,, 구매 정보가 있다면

유저 정보는 구매 정보에 연결이 되어져 있으면 구매 정보를 통해서도 유저 정보를 보게 되는.....

 

그니까 그냥 액셀 같은 것 ^^ = 관계형 데이터 베이스.

액셀 처럼 관리 되는 것이 편하게 관리 되는 거라 보면 됨.

 

단점 =

혹은 갑자기 고객의 데이터가 2개가 되었음, 그럼 칸이 없는데 어떻게 하지? 못 넣음....

 

만약에 풀 스캔 떴다 -> DB가 죽는다(멈춰 버림) 의 상황을 볼  수 있다... 전부 다 찾아야 하니까

 

 

비관계형 데이터 베이스는 그냥 다 따로따로 논다.

 

줄 마다 다 따로따로 논다. 어떤 사람은 휴대폰 번호 없고 누구는 뭐 있고 없고

유연하게 그냥 처리할 수 있는... 뭐 스타트업 그런거 무조건 NoSQL 써야 함

---

파이어스토어(Firestore)는 구글의 클라우드 기반 NoSQL 데이터베이스

 

파이어스토어 -> 데이터베이스 만들기 -> 프로덕션 모드에서 시작 다음 누르고

클라우드 위치 서울로 사용 지정.

 

 

규칙을 수정해줘야 하는데 false를 true 로 바꾼다.

 

이제 VSCode 를 켜서

 

 

캠프에서 제공되는 파이어스토어 세팅 코드를 넣었다.

 

스크립트에 타입 = 모듈도 추가.

 

 

가운데 값만 const firebaseConfig = 어쩌구

 

파이어베이스에서  SDK 설정 및 구성에서 복사 해서 붙여 넣기를 한다.

 

 

 

여기까지 간단한 파이어 베이스 설명, 그냥 잡 세팅까지.

 

 

---

칸이 네개다.

 

 

 

 

 

 

 

 

 

 

 

        // Firebase 인스턴스 초기화

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

        $("#id").click(async function () {

            let doc = {};

            await addDoc(collection(db, "콜렉션이름"), doc);

        })

    <script type="module">

타입 모듈을 해주면 -> 파이어 베이스 쓰려면 이런 걸 적어줘야 한다.

 

온클릭, 오픈클로우즈 같은 기능들이 이제 잘 되지가 않게 된다.

 

그래서 

 

$("#id").click(async function () {

            let doc = {};

            await addDoc(collection(db, "콜렉션이름"), doc);

를 넣어주는데, 이거는 복사해서 붙여넣은 곳 밑에 넣어줬다.

 

어떤 id에 click을 담아주는 것이다.

그랬더니

            let doc = {};

            await addDoc(collection(db, "콜렉션이름"), doc);

이것을 실행 해라 라는 명령문이라고 보면 된다. 이 두줄이 핵심이다.

 

        <div class="mybtn">

            <button id="postingbtn" type="button" class="btn btn-primary">기록하기</button>

            <button type="button" class="btn btn-outline-primary">닫기</button>

 

온 클릭 지워버리고 id 값을 postingbtn 이라고 했다.

 

btn= botton

        // Firebase 인스턴스 초기화

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

        $("#postingbtn").click(async function () {

            let doc = {};

            await addDoc(collection(db, "elbums"), doc);

#id 라고 되어있는 부분 포스팅버튼 넣음.

 

        $("#postingbtn").click(async function () {

            let doc = {'name':'bob','age':30};

네임이 밥이고 나이 30 넣었음.

 

 

따로 사이트에서 지정 안 했는데

앨범스에 그냥 알아서 추가 됨

(따로 albums 이렇게 해서 만들지 않아도 기록하기만 눌렀는데 그냥 데이터 값이 입력 됨)

 

 

 

 

전에 펑션 메이크카드라고 아무튼 쓰던게 있는데

 

거기서 그냥 빨간 저 큰 괄호 안에 값들을 복사하고

아래에 값을 입력 했다. '이미지' : 이미지 등등..

 

이렇게 해주면, 이미지,타이틀,컨텐트,데이트를

이미지 화 해줘서 아래에 저장을 해주는 것이라 했다.

 

<- 요기에 해준다는 의미 같다.

 

 

입력한 값대로 기록하기를 눌렀을 때 오른쪽 처럼 데이터가 입력이 되었다.

---

근데 데이터를 넣고 새로고침이 되거나, 뭔가 입력 되었다는 창이 뜨지를 않는다 그러면 어떻게 해야 하는가?

            await addDoc(collection(db, "albums"), doc);

            alert('저장 완료!');

            window.location.reload();

        })

 

저장 완료가 뜨고, 새로고침이 되었다.

 

근데 이제 상단 나만의 추억앨범 밑에 추억 저장하기 버튼이 되지를 않는다.

 

type에 모듈이 붙는 순간 이제 

<body>

    <div class="mytitle">

        <h1>나만의 추억앨범</h1>

        <p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>

        <button onclick="openclose()">추억 저장하기</button>

    </div>

요게 이제 안 된다... 즉 추억 저장하기 버튼이 먹통이 된다.

 

<body>

    <div class="mytitle">

        <h1>나만의 추억앨범</h1>

        <p>현재 서울의 미세먼지 : <span id="msg">나쁨</span></p>

        <button id="savebtn">추억 저장하기</button>

    </div>

온클릭 대신 id = savebtn 으로 바꿔준다.

        // 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();

        })

        $("#savebtn").click(async function () {

           

        })

 

$("#postingbtn").click(async function () {

이걸 그대로 복사해서 아래에 넣어주는데, 포스팅비티엔을 세이브비티엔으로 넣어준다.

        $(document).ready(function () {

            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)

            })

        })

-------------------------------------------------------------- 아래 삭제!

        function openclose() {

            $('#postingbox').toggle(); 

        }

--------------------------------------------------------------

요 아래의 코드를 삭제 해줄 건데

$('#postingbox').toggle();

이 것만 복사해서 savebtn 밑에 넣어준다.

        $("#savebtn").click(async function () {

            $('#postingbox').toggle();

그다음에  저장 나만의 추억앨범 새로고침 해보면

이제 추억 저장하기 기능이 다시 되는 것을 볼 수 있다.

---

저장 된 데이터를 읽어와서 카드를 붙여주는 역할을 이제 해본다.

데이터가 먼저 불러와 지고 그 다음에 카드가 붙으면 되는 건데

        })

        $(document).ready(function () {

            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 url 부터 드래그해서 다 끌어내려준다.

        })

        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)

        })

 

        })
        $(document).ready(function () {

그다음에 이거 그냥 지워버린다.

걍 이래도 똑같이 작동 해벌인다.

 

아모톤

아까 카드 기능 만들어 줄 때는

addDoc 을 사용 했는데

 

카드 붙일 때는

getDocs 를 사용한다.

어케 붙임?

그냥 한장씩 붙이면 된대 

            let image = $('#image').val();

            let title = $('#title').val();

            let content = $('#content').val();

            let date = $('#date').val();

       })

        let docs = await getDocs(collection(db, "콜렉션이름"));  -> 콜렉션 이름에 앨범스 입력.

        docs.forEach((doc) => {

            let row = doc.data();

            console.log(row);

        });

애드독 할 때 앨범스로 가져왔으니까, 붙일 때도 앨범스.

 

펑션 메이크카드 밑에 다 잘라내기.

 

        let docs = await getDocs(collection(db, "albums"));

        docs.forEach((doc) => {

            let row = doc.data();

            console.log(row);

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

                    </div>

                </div>

            </div>`;

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

콘솔 로그(로우) 밑에 다 붙여넣고

 

메이크카드 는 걍 지워버린다.

            let image = $('#image').val();

            let title = $('#title').val();

            let content = $('#content').val();

            let date = $('#date').val();

 

요것들을, 아래와 같이 바꿔준다.         

 

            let image = row['image'];

            let title = row['title'];

            let content = row['content'];

            let date = row['date'];

 

 

아래 코드들은 수정이 안 되었지만,

빨간 밑줄 코드는 지워줘야 한다.

 

그러면

카드 넣기 카드 가져오기 다 가능해졌다.

---

원래 프론트엔드 지난 주차에 했던 대로면

데이터가 저장이 안 되어서 그냥 새로고침하면 다 날라가버리는데,

 

애드닥 파이어베이스에서 미리 정해놓은 함수를 가지고 날려서 데이터를 보낸다.

 

처음에 파이어베이스 가입하고 ,세팅했다.

 

그럼 다음에 또 할 때는 어떻게 할까?

    <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: "AIzaSyDJXn_t_VBpio-PaJuhSCkc8RTId9GG01U",

            authDomain: "saprta-75140.firebaseapp.com",

            projectId: "saprta-75140",

            storageBucket: "saprta-75140.appspot.com",

            messagingSenderId: "322749072371",

            appId: "1:322749072371:web:f8182d0a83d3d479d34886",

            measurementId: "G-N04BM9D512"

        };

        // Firebase 인스턴스 초기화

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

이거 그냥 내 세팅이니까 이용하면 된다.

 

타입 모듈 해놓으면 뭐가 된다?

1.스크립트가 제일 마지막에 불러진다.

2.온 클릭 이런거 안됨 이제

 

클릭을 이제 '동적으로 만들어 준다.' -> 뭔소리냐면 그냥 코드로 클릭을 달아준다/ 코딩으로 해준다.

 

이제 전에 제목 테스트 4개 미리 띄워졌던 것을 없애보라는게 숙제다.

 

col 이라고 정해진 기둥 4개를 이전 주차에 설정 해놨는데 

그 4개를 지우면 된다.

 

4주차 끝.