TIL 2024-09-10 (Web - 5주차 Firebase)

1. 저번에 시간에 배운 내용을 복습 겸 실습 진행.

시작하기 앞서 먼저 기존에 했던 스파르타플릭스에서 진행할 것 이며,

파이어베이스 설정 방법은 저번 TIL를 확인하자.

 

영화 데이터 추가 뼈대 코드

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

  let doc = {

    };

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

• $("빈칸").click(async function () { 빈칸 }
  • 버튼의 아이디를 넣어서 버튼으 클릭하면 작동되는 함수 만들기.
• let doc = { 빈칸 };
  • 영화 카드에 넣어줄 데이터들 입력.
  • 이미지(image), 제목, 별점, 추천이유를 하나씩 변수에 담아 줍니다.
• await addDoc(collection(db, ""), doc)
  • postbox에 입력했던 값들을 데이터베이스에 넣어봅니다.
  • 영화 데이터베이스의 컬렉션을 넣어줍니다.

설명과 같이 내용을 추가해주면 아래와 같은 결과 코드가 나옵니다.

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

            let image = $('#image').val();
            let title = $('#title').val();
            let star = $('#star').val();
            let comment = $('#comment').val();

            let doc = {
                'image': image,
                'title': title,
                'star': star,
                'comment': comment
            };
            await addDoc(collection(db, "movies"), doc);
            alert('저장 완료!');
            window.location.reload();
        })

 

모든 코드를 기억할 필요 없이 내가 전에 사용했던 코드를 복사해서 내용만 수정해주는 것이 좋습니다.

 

그리고 또한 역시 firebase를 사용하여 script type="module"로 했을 땐

obnclick이 작동하지 않기에 onclick으로 해놓았던 것들을 수정해준다.

 

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

기존에 있던 openclose() 함수를 지우고 사용해준다.

 

여기까지 진행했다면 데이터를 넣고 기록하기 버튼을 누르면 데이터 베이스 새로운 컬렉션이 추가 되고 데이터가 생성된 것을 확인할 수 있다.

 

---

 

2. Firestore Database에서 데이터 가져오기

이제 기록하기 버튼을 누르면 카드가 생성되도록 만들어보자.

 

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

            let image = row['image'];
            let title = row['title'];
            let comment = row['comment'];
            let star = row['star'];

            let temp_html = `           
            <div class="col">
                <div class="card">
                    <img src="${image}"
                        class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${star}</p>
                        <p class="card-text">${comment}</p>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
            
        });

컬렉션 이름은 당연히 movies로 해주고 이전에 미리 만들었던 makeCard 함수 내용을 다 가져와 붙여준다.

 

그리고 우리는 row에서 데이터를 가져와 let 변수에 넣어주면 끝이다.

 

기본틀을 이해하고 어느부분을 어떤 식으로 수정해야하는지만 이해하자.

---

 

지금까진 저번 내용을 복습한 것 이고 이번에는 직접 배포를 해보자.

 

3. 배포가 무엇이냐?

• 배포란?
  • 배포는 소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정
  • 배포는 만든 작업물을 외부에 공개하는 일
  • 링크가 생겨서 요청하면 결과를 볼 수 있는 서비스를 세상에 내놓는 일
• URL?
  • 인터넷에서 특정 리소스의 위치를 나타내는 주소.
  • 웹페이지나 파일의 고유한 주소

ex) https://spartacodingclub.kr/catalog

예를 들어, https://spartacodingclub.kr/catalog 라는 URL은 HTTPS 프로토콜을 사용하며, 
spartacodingclub.kr 라는 도메인에 위치한 catalog라는 경로에 있는 페이지를 나타냅니다.

---

 

4. Github Pages로 배포하기

• Github pages
  • Github에서 제공하는 다른 사람들에게 인터넷으로 공유할 수 있는 서비스
• 정적 웹 페이지란?
  • 실시간 변경되는 내용은 없고 frontend(HTML, CSS, JavaScript) 등으로 이루어진 단순한 웹 페이지를 의미
  • Github Pages를 이용해서 자신의 프로젝트를 온라인으로 호스팅하여 웹 브라우저에서 접속 가능.

방법은 간단하다.

 

1. 먼저 당연히 Github에 가입해준다.
2. Create Repository를 선택한다.
3. 저장소에 이름을 적, pubilc을 선택하고 만들기 클릭.
4. Upload Exsiting Files를 선택.
5. choose your files 누른 후 파일 선택해 업로드.
6. 저장소에서 setting(설정)으로 들어가 pages를 클릭.
7. Branch Name을 main으로 설정하고 save 버튼을 누르고 기다리면 끝.( 조금 기다렸다가 새로고침하면 주소 나옵니다.)

 

배포를 한 후에도 파일 다시 배포하고 싶다면, Github안에서 수정하는 하는 방법도 있지만 그냥 기존에 파일을 삭제하고 수정한 파일을 새로 올리는 게 제일 좋은 방법같다.

 

여기서 배포할 때 주의해야할 점이 있는데 DB 설정에는 비밀번호, API 키, 개인정보 등 민감한 정보가 포함될 수도 있기에 소스코드에서 제거해 올리는 게 좋습니다.

 

 

Config 정보를 지우고 올리면 됩니다.

 

---

 

5. 더 잘 만들고 싶다면?

• 파이어베이스 한계점
  • 웹 애플리케이션을 호스팅하면 편라함과 빠른 개발 속도를 얻을 수 있지만, 일부 제한 사항이 존재.
    • 그 중 주요한 하나는 백엔드에 대한 컨트롤 일부를 잃게 된다는 점.
    • 이 밖에도 서버 제어 제한, 확장성 제약, 종속성 등등.