[📗 왕초보 웹개발 종합반] 5주차: Firebase project 2, Github

📗 5주차에 배울 내용

1. [addDoc] 영화 데이터 넣기
2. [getDocs] Firestore Database에서 데이터 가져오기
3. 배포가 뭐예요?
4. Github 시작하기
5. Github Pages로 배포하기
6. 더 잘 만들고 싶다면?
7. 숙제

---

1. [addDoc] 영화 데이터 넣기

스파르타플릭스에 Firebase 적용하기 !

4주차 [addDoc] 복습이다. (참고: https://gajicoding.tistory.com/22#t4)

 

Firebase 세팅 - SDK 가져오기 및 인스턴스 초기화

// 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 = {
    ...
};

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

 

포스팅 버튼 동작 만들기

$("#postingbtn").click(async function () {
    let image = $('#image').val();
    let title = $('#title').val();
    let comment = $('#comment').val();
    let star = $('#star').val();

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

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

---

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

역시 4주차 [getDocs] 복습이다. (참고: https://gajicoding.tistory.com/22#t5)

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);
});

<div class="mycards">
    <div id="card" class="row row-cols-1 row-cols-md-4 g-4">
    </div>
</div>

---

3. 배포가 뭐예요?

배포란?

소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정

즉, 배포는 만든 작업물을 외부에 공개하는 일, 링크가 생겨서 요청하면 결과를 볼 수 있는 서비스를 세상에 내놓는 일

 

URL이란?

URL은 "Uniform Resource Locator"의 약자로, 인터넷에서 특정 리소스의 위치를 나타내는 주소이다.
웹페이지나 파일의 고유한 주소이다.

 

프로토콜://도메인/경로

• 프로토콜(protocol): 웹 브라우저와 웹 서버 간의 통신 방식을 지정합니다. 가장 일반적으로 사용되는 프로토콜은 "http://"와 "https://"이다.
• 도메인(domain): 인터넷 상에서 고유한 식별자로 사용되는 웹 사이트의 주소입니다. 도메인은 일반적으로 사이트의 이름과 최상위 도메인(Top-Level Domain, 예: .com, .org)으로 구성된다.
• 경로(path): 웹 사이트 내에서 특정 페이지나 파일의 위치를 지정합니다. 경로는 슬래시("/")로 구분된 디렉토리 경로와 파일명으로 구성된다.

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

 

URL을 사용하여 웹 브라우저에서 웹 페이지에 접속하거나, 웹 서버에서 파일을 다운로드하거나, 웹 사이트 간에 정보를 전달할 수 있다.

---

4. Github 시작하기

깃허브(GitHub)란?

인터넷에서 개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳

 

깃허브의 주요 기능

• 코드 관리: 깃허브는 코드의 버전 관리를 할 수 있다.
• 협업: 여러 개발자가 한 프로젝트에 참여할 수 있다.
• 웹 호스팅: 개발자가 작성한 코드를 인터넷에 공개적으로 호스팅하여 다른 사람들이 쉽게 접근하고 이용할 수 있다.
• 지식 공유: 깃허브는 개방된 플랫폼으로 다른 개발자들과 코드, 프로젝트, 라이브러리 등을 공유할 수 있다.

 

깃허브(GitHub) 가입하기

계정이 이미 있어서 이 과정은 생략하겠다.

(타 사이트 회원가입처럼 signup 버튼을 눌러 진행하면 된다.)

https://github.com/

GitHub · Build and ship software on a single, collaborative platform

---

5. Github Pages로 배포하기

Github Pages란?

GitHub에서 제공하는 다른 사람들에게 인터넷으로 공유할 수 있는 서비스 (=호스팅 서비스)

 

저장소 생성하기

• Repositories(저장소) 탭에서 New 버튼 클릭

• Repository 이름 입력하고, Public(공개) 설정 후 Create repository 버튼 클릭

• 생성된 화면에서 uploading an existing file 클릭

• 스파르타플릭스의 index.html 파일 업로드 후. commit changes 버튼 클릭

 

• Setting 탭의 Page 항목으로 이동
• Branch를 main으로 변경 후 Save 버튼 클릭

• 조금 기다린 뒤 새로고침하면, 새로운 항목이 추가된 것을 볼 수 있다. (몇분정도 소요된다.)

• Code 탭의 Deployments 항목에서도 확인 가능하다.

 

• 생성된 주소를 클릭해보면, 잘 배포된 것을 확인할 수 있다.
• https://gajicoding.github.io/web_basic_hosting/

스파르타플릭스

 

 

* 배포 시 주의할점

• 반드시 로컬에서 테스트를 수행해본 후 배포한다.
• 원격 저장소에는 중요한 정보를 포함하지 않도록 한다. 비밀번호, API 키, 개인정보 등 민감한 정보는 소스 코드에서 제거해야한다. !!!

---

6. 더 잘 만들고 싶다면?

파이어베이스 한계점

• 서버 제어 제한: 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤이 제한된다. 파이어베이스에서 제공하는 기능과 방식에 따라 작업을 수행해야 한다.
• 확장성 제약: 파이어베이스는 규모에 따른 가로 확장성 측면에서 제한이 있을 수 있다.
• 종속성: 파이어베이스를 사용하면 Google의 서비스에 의존하게 된다. 파이어베이스 외부의 다른 서비스나 기능을 활용하기 어렵거나 제한적일 수 있다.

마음껏 서버를 다루고 싶다면 다른 백엔드 서버를 사용해야 한다.

 

백엔드 서버의 이점

• 다양한 웹 애플리케이션 개발 가능성을 제공하며, 개발자가 원하는 방식으로 서버를 구축하고 관리할 수 있게 해준다.
• 서버에 대한 완전한 컨트롤을 갖게 된다. 자신만의 고유한 방식으로 서버를 구축하고 관리할 수 있다.
• 서버의 확장성을 조절할 수 있으며, 필요에 따라 리소스를 추가하거나 조정할 수 있다. 이는 대규모 기업이나 많은 트래픽을 처리해야 하는 프로젝트에서 중요한 요소이다.
• 다른 서비스와의 통합이나 원하는 기능을 더욱 유연하게 구현할 수 있다.

 

 

강의에서는 파이썬 맛보기를 보여주는데, 이는 정리에서 생략하겠다.

 

---

7. 숙제

5주차 마지막에도 숙제가 있었다.

 

firebase를 사용하기 위한 기본 세팅을 직접 해보세요.

전에 했던 작업물에서 config 부분을 그냥 복붙했다.

const firebaseConfig = {
    // https://firebase.google.com/?hl=ko
    // 파이어베이스에 접속한 후 프로젝트 설정에 들어갑니다.
    // 본인 firebaseConfig 내용으로 설정해 줍니다.
    
    apiKey: "...",
    authDomain: "...",
    projectId: "...",
    storageBucket: "...",
    messagingSenderId: "...",
    appId: "..."
};

 

이미 깃허브에 key를 올리긴 했는데....... 그래도 지우는게 맘이 편하다.

 

 

firebase 데이터 추가 코드를 완성해보세요.

• 문제에 star가 빠져있어 추가했다.
• html 부분 id 값이 이상하여 수정했다.

// 데이터 추가
$("#addBtn").click(async function () {
    // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
    let image = $('#image_input').val();
    let title = $('#title_input').val();
    let star = $('#star_input').val();
    let comment = $('#comment_input').val();

    try {
        const docRef = await addDoc(collection(db, "foods"), {
            // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
            'image': image,
            'title': title,
            'star': star,
            'comment': comment
        });

        alert("음식이 추가 되었습니다!");
        window.location.reload();
    } catch (e) {
        console.error("Error adding document: ", e);
    }
});

<!-- 부트스트랩 인풋 박스 적용-->
<div class="post" id="input-card">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="image_input" placeholder="name@example.com">
        <label for="image_input">음식 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="title_input" placeholder="영화 제목">
        <label for="title_input">음식명</label>
    </div>

    <div class="input-group mb-3">
        <button class="btn btn-outline-secondary" type="button">별점</button>
        <select class="form-select" id="star_input" aria-label="Example select with button addon">
            <option selected>별점 선택</option>
            <option value="1">⭐</option>
            <option value="2">⭐⭐</option>
            <option value="3">⭐⭐⭐</option>
            <option value="4">⭐⭐⭐⭐</option>
            <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
    </div>
    <div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="comment_input"></textarea>
        <label for="comment_input">추천 이유</label>
    </div>
    <div class="button2">
        <button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
    </div>
</div>

 

 

firebase 데이터 읽기 및 카드 생성 코드를 완성해보세요.

// 데이터 읽기 및 카드 생성
$(".row-cols-3").empty();
const querySnapshot = await getDocs(collection(db, "foods"));

querySnapshot.forEach((doc) => {

    let title = doc.data().title;
    let comment = doc.data().comment;
    let star = "⭐".repeat(doc.data().star);
    let image = doc.data().image;

    // 문서의 title, comment, image, star 필드에서 데이터를 추출한 변수명을 갖고,
    // tempHtml 문자열에 각 데이터를 포함한 카드의 HTML 코드를 생성하세요.
    let tempHtml = `           
    <div class="col">
        <div class="card h-100">
            <img src="${image}"
                class="card-img-top" alt="...">
            <div class="card-body">
                <h4 class="card-title">${title}</h4>
                <p class="card-text">${comment}</p>
                <p>${star}</p>
                <button class="card-button">주문하기</button>
            </div>
        </div>
    </div>`;

    $(".row-cols-3").append(tempHtml);
});

---

이렇게 사전캠프 첫 강의인 [왕초보] 웹개발 종합반 강의가 끝났다. 👏👏👏👏👏

이제 엑셀보다 쉽고 빠른 SQL 강의를 수강할 예정이다.

 

 

---

https://github.com/gajicoding/web_basic

GitHub - gajicoding/web_basic

---