스파르타 코딩클럽(부트캠프) 웹개발 입문 5장

깃 허브(Github)

개발자분들이 쓰는 코드 저장소

출처 : 스파르타코딩클럽

---

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

        })

<div class="form-floating mb-3">

            <input type="email" class="form-control" id="comment" placeholder="추천 이유">

            <label for="floatingInput">추천 이유</label>

        </div>

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

    </div>

---

onclick="openclose()'를 삭제하고 id="savebtn"을 추가하여 실행

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

        $('#postingbox').toggle();

    })

<div class="container-fluid py-5">

                <h1 class="display-5 fw-bold">킹덤</h1>

                <p class="col-md-8 fs-4">병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직

                    세자뿐이다.</p>

                <button id="savebtn" type="button" class="btn btn-outline-light">영화 기록하기</button>

                <button type="button" class="btn btn-outline-light">상세정보</button>

            </div>

---

 let docs = await getDocs(collection(db, "movies"));

        docs.forEach((doc) => {

            let row = doc.data();

            console.log(row);

           

        });

---

파이어베이스에 저장된 값이 나오는 코드

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

        })

        let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";

        fetch(url).then(res => res.json()).then(data => {

            let temp = data['temp']

            $('#msg').text(temp);

            let temp_html = ``;

            if (temp > 20) {

                temp_html = "추워요"

            } else {

                temp_html = "더워요"

            }

            $('#msg').append(temp_html)

        })

        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}"

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

        });

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

            $('#postingbox').toggle();

        })

---

async와 await은

JavaScript에서 비동기 작업을 처리하기 위한 키워드

동기 (Synchronous)

• 동기적인 작업은 순서대로 진행되며, 이전 직업이 완료되어야 다음 작업이 실행된다.

비동기(Asynchronous)

• 비동기적인 작업은 작업들이 동시에 실행될 수 있으며 한 작업의 완료를 기다리지 않고 다음 작업을 시작할 수 있다.

출처 : 스파르타 코딩클

---

배포란?

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

 

URL(Uniform Resource Locator)
인터넷에서 특정 리소스의 위치를 나타내는 주소.
프로토콜://도메인/경로

프로토콜(Protocol)

• 웹 브라우저와 웹 서버간의 통신 방식을 지정한다.
• 일반적으로 사용되는 프로토콜 : "http://", "http://"

도메인(Domain)

• 인터넷 상에서 고유한 식별자로 사용되는 웹사이트의 주소.
• 일반적으로 사이트의 이름과 최상위 도메인(Top-level Domain) -.com , -org 등으로 구성된다.

경로(Path)

• 웹 사이트 내에서 특정페이지나 파일의 위치를 지정한다.
• 경로는 슬래시 "/"로 구분된 디렉토리 경로와 파일명으로 구성된다.

Ex) http:// spartacodingclub.kr/catalog

http:// spartacodingclub.kr/catalog라는 URL은 HTTPS프로토콜을 사용
spartacodingclub.kr 라는 도메인에 위치한 catalog라는 경로에 있는 페이지를 나타낸다.

---

---

파이어베이스의 한계점

백엔드에 대한 컨트롤을 일부 잃는다.

서버 제어 제한

• 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤이 제한된다.
• 파이어베이스에서 제공하는 기능과 방식에 따라 작업을 수행해야한다.

확장성 제약 

• 파이어베이스는 규모에 따른 가로 확장성 측면에서 제한이 있을 수 있다.

종속성

• 파이어베이스를 사용하면 Google의 서비스에 의존하게 된다.
• 파이어베이스 외부의 다른 서비스나 기능을 활용하기 어렵거나 제한적일 수 있다.

---

파이썬

파이썬을 사용하는 이유

파이어베이스의 제한 사항을 넘어선 다양성과 유연성을 가지고 더 많을 일을 할 수 있다.

1. 파이썬은 다양한 웹 애플리케이션 개발 가능성을 제공한다.
2. 개발자가 원하는 방식으로 서버를 구축하고 관리할 수 있다.
3. 파이썬은 서버에 대한 완전한 컨트롤을 갖게 된다.
4. 서버의 확장성을 조절할 수 있다.
5. 다른 서비스와의 통합이나 원하는 기능을 더욱 유연하게 구현할 수 있다.

https://colab.research.google.com

Google Colaboratory

---

import requests

from bs4 import BeautifulSoup

URL = "https://movie.daum.net/ranking/reservation"

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}

data = requests.get(URL, headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

print(soup)