코딩이 처음이어도 쉽게 배우는 웹개발 A to Z - 4주차 + 5주차

본 과정은 내일배움캠프 웹개발 사전캠프로 지급받은 강의의 내용을 바탕으로 정리한 글입니다.

파이어베이스

파이어 베이스는 구글에서 제공하는 웹서버를 대신 해주는 데이터베이스 서비스입니다.

데이터베이스

데이터베이스는 데이터를 저장하는 곳, 데이터 모음입니다.

데이터 베이스가 필요한 이유는 필요한 정보를 잘 보관해서 잘 찾기 위해서입니다.

데이터베이스는 컴퓨터가 아니라 프로그램입니다.

1. 관계형 데이터베이스는 정리된 정보를 다룰 때 사용합니다. 주로 은행이나 대기업에서 사용하고
   양식이 정해져 있어서 사람의 실수가 있으면 안되는 곳에서 주로 사용합니다.

2. 비관계형 데이터베이스는 복잡하거나 유연한 정보를 다룰 때 사용합니다. 주로 스타트업에서 사용하고 자유도가 높아서 앞으로 바뀔 여지가 많은 곳에서 사용합니다.

.

인덱스는 데이터들을 바로 접근해서 가져올 수 있도록 찾아보기(색인)같은 것입니다.

파이어스토어

파이어스토어는 구글 클라우드 기반의 NoSQL데이터베이스(비관계형 데이터베이스)입니다.
데이터를 저장하고 관리할 수 있습니다.

파이어스토어 설정 하기

1) 파이어베이스 세팅용 스크립트를

        $("#savebtn").click(async function () {  // save 버튼을 클릭하면
            $('#postingbox').toggle(); //postingbox가 토글 기능이 됩니다. 
        })

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

***
       //데이터 저장
        $("#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 () {
            $('#postingbox').toggle();
        })




        //카드 붙이는 코드 (출력)
        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);
        });

배포 : 개발한 코드들을 웹사이트 혹은 어플에서 사용자가 사용할수 있도록 만드는 과정입니다.
URL : 웹사이트의 고유한 주소입니다. 이 주소를 입력하면 언제 어디서나 동일한 페이지를 보실 수 있습니다.

github : 개발자들의 코드 공유 폴더

오늘의 한줄평 : 재미있다. 배포하는 꿀재미.. 앞으로도 더 열심히 해야지!