5주차 웹개발

 

 

5-2 영화데이터넣기 addDoc

 

$("#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();

      });

      console.log("입력된데이터");

 

 

5-3 getDoc

firebase 모듈화를 쓰면 script가 다 준비된후 실행된다. 그렇기때문에 $(document).ready 가 의미가없다. 

$(document).ready(function () {

document.ready = 다로딩되고 실행해라 라는뜻. 모듈화설정하면 그게그거다. 굳이쓸필요없다

 

로딩이 다된후 실행된다. 이미그자체로 script 를 다읽고실행한다를 내포해서 의미가없다인지

스크립트를 다로딩해야해서 실행을 못한다인지

 

제이쿼리의 $(document).ready() 함수는dom 이 완전히 로드되었을때 실행된다. 동기적으로 처리되는 스크립트환경에 적합한 방식이다.

모듈 스크립트는 비동기적 로드되기에  html의 다른 요소와 병렬로 로드 되며 dom이 완전히 로드 되기 전에 실행될 수있다. 

그렇기 때문에 dom이 준비가 되면 실행하는 document.ready와 비동기적으로 실행되는 script = moduel은 함께 쓰지 않는것이 좋다. 

 

 

Firebase 스크립트를 모듈화(type="module")하면 실행 순서가 변경되는 이유는 ECMAScript 모듈의 동작 방식 때문입니다. 주요 이유는 다음과 같습니다:

1. 비동기 실행

• type="module"로 설정된 스크립트는 비동기적으로 로드됩니다. 즉, HTML 페이지가 로드되는 동안 다른 스크립트와 병렬로 로드되고 실행됩니다.
• 이는 페이지 로드 속도를 최적화하기 위한 설계입니다. 하지만 의존성이 있는 코드라면, 스크립트 실행 순서가 꼬일 수 있습니다.

2. 엄격한 종속성 관리

• 모듈은 기본적으로 파일 간의 명시적인 의존성(import, export)만 인식합니다.
• 따라서 모듈화된 스크립트가 다른 스크립트에 의존하는 경우, 의존성이 명확하게 정의되지 않았다면 실행 순서가 보장되지 않습니다.

3. HTML에 나오는 순서와 다를 수 있음

• 일반 <script> 태그는 HTML에 나오는 순서대로 실행됩니다.
• 하지만 type="module"로 정의된 스크립트는 비동기로 처리되기 때문에 HTML 순서와 다르게 실행될 수 있습니다.

비동기적이라는 것은 작업이 즉시 완료되지 않고, 다른 작업과 병렬로 실행되며 특정 작업이 끝날 때까지 기다릴 필요가 없는 실행 방식입니다. 쉽게 말해, 작업이 시작되면 완료를 기다리지 않고 다음 작업으로 넘어갈 수 있다는 뜻입니다.

 

JavaScript에서는 async와 await를 통해 비동기 작업을 구현할 수 있습니다.

 

async function fetchData() {
  console.log("데이터 가져오는 중...");
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  console.log("데이터 가져오기 완료:", data);
}

fetchData();

 

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 h-100">

                <img

                  src="${image}"

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

       

      });

영화카드 받아오기

 

 

 

 

 

 

 

 

5-4 배포하기 git

c user .. 에있는파일을 브라우저로 열어놓은것. https로 시작하면 어디서든볼수있다.

https = protocol 이라고 부른다 서버에 요청하는 형식. ex) http, https(security) tcp 여러가지

 

프로토콜://도메인(고유한식별자로사용되는 웹사이트의주소)/경로  (patch웹사이트내의 특정페이지나 파일의위치)

 

 

5-5 github 시작하기

 

5-6 github pages로 배포하기

 

파이어베이스한계점

서버제어제한 저장하고 받는것외에 할수가없다.. 

 

5-9 파이썬 맛보기

google colab 

크롤링 파이썬으로 자료스크래핑