웹 개발 종합_5주차

웹 개발 5주차에 배운 내용

스파르타플릭스

스파르타플릭스 프로젝트를 이용해서 데이터를 Firestore Database에 넣고 다시 가져오는 내용을 복습했다 🤨🤨 

Firebase 연동 기본 세팅

먼저 Firebase 연동을 위한 기본 세팅 코드를 입력해주었다!

// 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: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};

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

영화 데이터 넣기 - addDoc

그 다음 입력한 영화 데이터를 Firestore Database에 저장할 수 있는 기능을 추가해주었다!

$("#postingbtn").click(async function () {  //버튼의 id를 넣어서 버튼을 클릭하면 작동되는 함수 작성!
    let image = $('#image').val();
    let title = $('#title').val();
    let star = $('#star').val();  //select로 이루어진 부분에서는 value에 있는 값을 출력한다. 따라서 출력하고 싶은 값으로 value 값을 변경하면 된다!
    let comment = $('#comment').val();

    let doc = {  //데이터들을 변수에 하나씩 담아주기!
        'image': image,
        'title': title,
        'star': star,
        'comment': comment
    };
    
    await addDoc(collection(db, "movies"), doc);  //PostBox에 입력했던 값들을 Database에 추가하기!
    alert('저장 완료!');  //팝업 창을 표시하여 저장이 완료되었음을 표시!
    window.location.reload();  //현재 페이지 새로고침
})

Firestore Database에서 데이터 가져오기 - getDocs

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 star = row['star'];  //select로 이루어진 부분에서는 value에 있는 값을 출력한다. 따라서 출력하고 싶은 값으로 value 값을 변경하면 된다!
    let comment = row['comment'];

    //console.log(image, title, comment);  //console 창에 값 띄우기!
    //console.log(star);  //console 창에 값 띄우기!

    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">${star}</p>
                <p class="card-text">${comment}</p>
            </div>
        </div>
    </div>`;

    $('#card').append(temp_html);  //카드 추가하기!

});

 

배포

소프트웨어 개발 과정에서 개발한 애플리케이션, 웹사이트, 서비스 등을 실제 사용자들에게 제공하는 과정을 말한다.
즉, 만든 작업물을 외부에 공개하는 일이다!! 링크가 생겨서 요청하면 결과를 볼 수 있는 서비스를 내놓는 일이다!

URL - Uniform Resource Locator

인터넷에서 특정 리소스의 위치를 나타내는 주소이다. 간단히 말해서, 웹 페이지나 파일의 고유한 주소이다!

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

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

ex) https://spartacodingclub.kr/catalog

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

 

Github Pages로 배포하기

Github Pages

Github에서 제공하는 다른 사람들에게 인터넷으로 공유할 수 있는 서비스이다.

✔️참고 - 정적 웹 페이지

실시간 변경되는 내용은 없고 HTML, CSS, JavaScript 등으로 이루어진 단순한 웹 페이지를 의미한다.
Girhub Pages를 이용하여 자신의 프로젝트를 온라인으로 호스팅하여 웹 브라우저에서 접속 가능하게 할 수 있다!

저장소 생성하기

create Repository를 선택하고 저장소 이름 입력 후, public을 선택하고 Create Repository를 클릭한다!

파일 업로드하기

Uploading Existing Files를 선택하고 choose your files를 누른 후 파일 선택해서 업로드한다!

배포하기

저장소에서 settings로 들어가고 화면 왼쪽에서 Pages를 찾아서 들어간다.
Branch Name을 main으로 설정하고 save 버튼을 누르면 조금의 기다림 후 새로고침 시 화면에 주소가 노출된다 😮😮😮

 

배포한 것 수정하기 & 주의 사항

수정하기

VS Code에서 작성해서 전체 코드를 교체하는 것이 좋다!
Github에서 수정할 경우 오류가 날 확률이 높기 때문이다!!

삭제 후 수정된 파일을 올릴 때는 삭제하고 싶은 프로젝트에 repository로 들어가서 삭제하고 싶은 파일 선택 후 Delete file을 클릭하면 삭제가 가능하다. 
삭제가 완료되면 Commit changes를 눌러주고 파일 삭제 확인한 다음 Add file을 선택 후 파일을 업로드하면 된다!

주의 사항🤨🤨

• 배포하기 전에 반드시 로컬에서 테스트를 수행해야 한다! 배포된 페이지에 오류가 발생하지 않도록 하는 데 도움이 된다!
• 원격 저장소에는 중요한 정보를 포함하지 않도록 주의하기!!
  비밀번호, API 키, 개인정보 등 민감한 정보는 소스 코드에서 제거해야 한다!!!

 

Firebase의 한계점

Firebase를 사용하여 웹 애플리케이션을 호스팅하면 편리함과 빠른 개발 속도를 얻을 수 있지만, 일부 제한 사항이 존재한다.

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

예시

• Firebase 붕어빵 가게 :
  파이어베이스를 사용하여 열린 붕어빵 가게는 매우 편리합니다. 파이어베이스는 이미 붕어빵을 만들어주는 기계를 갖추고 있으며, 손님들은 다양한 맛과 크기의 붕어빵을 선택할 수 있습니다. 그러나 붕어빵 가게 주인은 파이어베이스에서 제공하는 기능과 방식에 따라서만 붕어빵을 제조하고 판매할 수 있습니다.
• 다른 개발 플랫폼 붕어빵 가게 : 
  반면에 다른 백엔드 서버를 사용하여 열린 붕어빵 가게는 더 다양한 가능성을 가지고 있습니다. 주인은 자신만의 고유한 붕어빵 레시피를 개발하고, 붕어빵 뿐만 아니라 다른 요리도 제공할 수 있습니다. 다른 백엔드 서버를 사용하면 주인은 자유롭게 가게를 운영하고, 요리를 다양화하여 다른 맛과 제품을 손님들에게 제공할 수 있습니다.

파이썬의 사용

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

 

5주차 숙제 - Javascript를 활용하여 동적 데이터 생성하기

4주차, 5주차에서 배운 내용들을 활용하여 제공된 코드 중 빈 부분을 채우는 숙제였다.
막 강의를 들은 후라서 자신감 있게 숙제 파일을 다운받고 코드를 열었다. 하지만 새로운 코드를 마주하니까 점점 내 자신이 헤매고 있다는 것을 느끼고 차근차근 하나씩 해결해나갔다....

먼저 Firestore Database와 연동하기 위한 코드를 입력해주었다.

<script type="module">
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";

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

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

이 부분은 작성할 때마다 다른 코드에서 복사해서 사용하라고 하셨던 강사님의 말을 떠올려 바로 직전에 진행했던 스파르타플릭스 프로젝트의 코드에서 복사해서 가져왔다 😎😎
연동하는 코드를 입력 후 페이지에 입력한 내용을 Database에 저장할 수 있는 코드를 작성해야 했다. 기본 틀은 작성되어 있었고 안에 내용물만 입력하면 됐는데.. 필요한 변수를 코드에서 찾아서 전체 코드를 완성할 수 있었다.

 <div class="post" id="input-card">
    <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
        <label for="floatingInput">음식 이미지 주소</label>
    </div>
    <div class="form-floating mb-3">
        <input type="text" class="form-control" id="foodTitle" placeholder="영화 제목">
        <label for="foodTitle">음식명</label>
    </div>

    <div class="input-group mb-3">
        <button class="btn btn-outline-secondary" type="button">별점</button>
        <select class="form-select" id="inputGroupSelect03"
            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="floatingTextarea"></textarea>
        <label for="floatingTextarea">추천 이유</label>
    </div>
    <div class="button2">
        <button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
    </div>
</div>

위 코드에서 필요한 id들을 찾았고 id를 활용해서 코드를 완성할 수 있었다 😃😃
근데 여기서 하나의 문제점이 있었는데......
바로 강의에서 작성했던 코드와 숙제에서 작성해야 하는 코드의 구조가 달랐다 😮😮😮 처음에 보고 당황했지만 코드에 적혀있는 주석을 참고하고 try, catch(예외 처리) 내용을 chatgpt를 통해 해결한 후 하나하나 적고 나니 Firestore Database에 정상적으로 저장되는 것을 확인할 수 있었다.

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

    // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
    let image = $('#floatingInput').val();
    let title = $('#foodTitle').val();
    let comment = $('#floatingTextarea').val();
    let star = $('#inputGroupSelect03').val();

    try {
        const docRef = await addDoc(collection(db, "foods"), {

            // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
            'image': image,
            'title': title,
            'comment': comment,
            'star': star
        });

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

그 다음은 이제 저장된 데이터들을 우리 눈에 볼 수 있도록 Database에서 다시 데이터를 가져오는 코드를 작성할 차례였다. 이 부분 또한 기본 틀은 작성되어 있었고, 중요한 부분만 내가 채워나가면 되는 것이었다.
나는 강의에서 들었던 내용들을 기억해보면서 코드를 채워나갔고 무사히 페이지를 완성한 후 데이터가 잘 보여지는지 테스트까지 할 수 있었다 😎😎😎

$(".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, 자바 알고리즘 각각 2문제씩 풀이 😎
  
  • SQL 문제들은 모두 전에 풀어봤던 문제들이여서 쉽게 해결할 수 있었다.
  • 자바 문제들도 반복문을 사용하면 쉽게 해결되는 문제여서 어려움 없이 해결했다!
• Java 입문 강의_스코프, 형변환 강의 듣기 😎
  • 스코프라는 개념을 이번에 처음 알게 되었는데, 강의를 들으면서 블로그에 정리하다 보니 개념을 완벽하게 이해할 수 있었다. 쉽게 말하면 변수가 생존할 수 있는 영역을 의미했다!
• 웹 개발 종합 5주차 강의 듣기 😎
  • 웹 개발 후 Github를 통해 배포하는 과정까지 직접 진행하면서 내가 만든 페이지에 주소까지 붙는 걸 확인하니까 신기했다.... 내가 만든 페이지가 다른 사람들도 확인할 수 있다니 😮😮😮 강의는 전부 들었지만... 주말동안 안보면 까먹을 게 뻔하니 복습을 확실하게 해둬야겠다.......