[왕초보] 웹개발 종합반 4주차

데이터 베이스에 무언가를 저장하고, 불러오는 법을 배웠다. 

데이터베이스는 클라이언트에서 보낸 정보를 저장해놓는 일종의 저장소이다. 

서버, api, db와도 같은 이런 걸 백엔드라고 부른다. 

 

데이터베이스에는 두 종류가 있어서 SQL과 NoSQL가 있다.

NoSQL은 Not only SQL의 약자이다. 

 

SQL을 쓰려면 다음 코드가 필요하다. 

    <script type="module">

        // Import the functions you need from the SDKs you need

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

        // Your web app's Firebase configuration

        // For Firebase JS SDK v7.20.0 and later, measurementId is optional

        const firebaseConfig = {

            apiKey: "AIzaSyANfOa5DxeYY3wvB1gCLKPWVlqgE8pEDvg",

            authDomain: "sparta-45b78.firebaseapp.com",

            projectId: "sparta-45b78",

            storageBucket: "sparta-45b78.appspot.com",

            messagingSenderId: "1086011296968",

            appId: "1:1086011296968:web:341a092fecd8dec42ce9fd",

            measurementId: "G-F3QGKWWXCG"

        };

        // Firebase 인스턴스 초기화

        const app = initializeApp(firebaseConfig);

        const db = getFirestore(app);

 

* 주의) 위에 보면 스크립트 타입이 '모듈'로 바뀌어 있는데, 이 때문에 버튼 온클릭/문서가 시작하자마자~ 같은 코드를 쓰지 못 한다. 후자는 자동적으로 적용되는 듯.  

 

그래서 버튼에 아이디를 부여하고, 여기에 document.getElementById 이런 걸 사용하거나, 아니면 제이퀴리로 지정해줘야만 한다. 

$("#postingbtn").click(async function () { // postingbtn의 아이디를 가진 개체가 클릭되었을 때 작동.

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

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

        })

 

제이퀴리를 이용한 코드. 

document.getElementById("postingbtn").addEventListener("click", async function () {

            // 이미지, 타이틀, 콘텐트, 데이트에서 받아온 정보를 각각 저장

            let image = document.getElementById('image').value;

            let title = document.getElementById('title').value;

            let content = document.getElementById('content').value;

            let date = document.getElementById('date').value;

            // 데이터베이스에 키/밸류 식으로 저장

            let doc = {

                'image': image,

                'title': title,

                'content': content,

                'date': date

            };

            // 데이터베이스에 추가

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

            alert('저장 완료!');

            // 새로고침

            window.location.reload();

        });

        // savebtn 버튼이 클릭되었을 때

        document.getElementById("savebtn").addEventListener("click", function () {

            let postingBox = document.getElementById('postingbox');

            if (postingBox.style.display === "none" || postingBox.style.display === "") {

                postingBox.style.display = "block";  // 보이게 함

            } else {

                postingBox.style.display = "none";  // 숨김

            }

        });

 

제이퀴리 없이 순수 자바스크립트로 작성했을 때.

토글 하나면 끝나는 코드가 엄청나게 불었다... 이거만큼은 제이퀴리를 사용해야할 지도 모르겠다. 

 

따로 버튼 온클릭 함수를 만들었던 전의 때와는 달리 별도의 함수 만들기 없이 그냥 써도 적용이 된다.