addDoc, getDoc 스파르타플릭스에 적용하기
스파르타플릭스 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스파르타플릭스</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
* {
font-family: 'Black Han Sans', sans-serif;
}
.main {
color: white;
background-image: url('https://occ-0-1123-1217.1.nflxso.net/dnm/api/v6/6AYY37jfdO6hpXcMjf9Yu5cnmO0/AAAABeIfo7VL_VDyKnljV66IkR-4XLb6xpZqhpLSo3JUtbivnEW4s60PD27muH1mdaANM_8rGpgbm6L2oDgA_iELHZLZ2IQjG5lvp5d2.jpg?r=e6e.jpg');
background-position: center;
background-size: cover;
}
body {
background-color: black;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypostingbox {
width: 500px;
margin: 20px auto 20px auto;
border: 1px solid white;
padding: 20px;
border-radius: 5px;
}
.form-floating > input {
background-color: transparent;
color: white;
}
.form-floating > label {
color: white;
}
.input-group > label {
background-color: transparent;
color: white;
}
.mypostingbox > button {
width: 100%;
}
</style>
<script type="module">
// 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: "AIzaSyAiwjuCwvcMIg048tUT6uIc2tUkgrZ5eBw",
authDomain: "sparta-4f371.firebaseapp.com",
projectId: "sparta-4f371",
storageBucket: "sparta-4f371.appspot.com",
messagingSenderId: "658526607457",
appId: "1:658526607457:web:bc2987060dd883dd80b220",
measurementId: "G-ETL2BKFFQ7"
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 데이터가 없으면 빈화면으로 시작
$('#card').empty();
//'기록하기' click 달기
$("#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'];
if(temp > 20) {
$('#temperature').text('더워요');
} else {
$('#temperature').text('추워요');
}
})
//openClose 역할
$("#savebtn").click(async function () {
$('#postingBox').toggle();
})
//한장씩 돌아가면서 하나씩 카드 붙이기
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);
});
</script>
</head>
<body>
<header class="p-3 text-bg-dark">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
<svg class="bi me-2" width="40" height="32" role="img" aria-label="Bootstrap"><use xlink:href="#bootstrap"></use></svg>
</a>
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li><a href="#" class="nav-link px-2 text-danger">spartaflix</a></li>
<li><a href="#" class="nav-link px-2 text-white">홈</a></li>
<li><a href="#" class="nav-link px-2 text-white">시리즈</a></li>
<li><a href="#" class="nav-link px-2 text-white">영화</a></li>
<li><a href="#" class="nav-link px-2 text-white">내가 찜한 콘텐츠</a></li>
<li><a href="#" class="nav-link px-2 text-white">현재 기온: <span id="temperature"></span></a></li>
</ul>
<form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..." aria-label="Search">
</form>
<div class="text-end">
<button type="button" class="btn btn-outline-light me-2">Login</button>
<button type="button" class="btn btn-danger">Sign-up</button>
</div>
</div>
</div>
</header>
<div class="main">
<div class="h-100 p-5 text-bg-dark rounded-3">
<h2>킹덤</h2>
<p>병든 왕을 둘러싸고 흉흉한 소문이 떠돈다. 어둠에 뒤덮인 조선, 기이한 역병에 신음하는 산하. 정체 모를 악에 맞서 백성을 구원할 희망은 오직 세자뿐이다.</p>
<button type="button" class="btn btn-outline-light" id="savebtn">영화 기록하기</button>
<button type="button" class="btn btn-outline-light">상세정보</button>
</div>
</div>
<div id="postingBox" class="mypostingbox">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="image" placeholder="영화 이미지 주소">
<label for="floatingInput">영화 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="title" placeholder="영화 제목">
<label for="floatingInput">영화 제목</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="star">
<option selected>별점 선택</option>
<option value="⭐">⭐</option>
<option value="⭐⭐">⭐⭐</option>
<option value="⭐⭐⭐">⭐⭐⭐</option>
<option value="⭐⭐⭐⭐">⭐⭐⭐⭐</option>
<option value="⭐⭐⭐⭐⭐">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating mb-3">
<input type="email" class="form-control" id="comment" placeholder="추천 이유">
<label for="floatingInput">추천 이유</label>
</div>
<button type="button" class="btn btn-danger" id="postingbtn">기록하기</button>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
</div>
</div>
</body>
</html>
Github 배포
배포란?
: 배포는 코드 작성부터 테스트, 실행 파일로 변환하여 인터넷에 공개하고 업데이트하는 과정. 배포는 소프트웨어 개발 과정에서 중요한 단계로, 사용자들이 개발한 소프트웨어를 이용할 수 있도록 만들어줌.
URL 이란?
: Uniform Resource Locator"의 약자로, 인터넷에서 특정 리소스의 위치를 나타내는 주소. 간단히 말해서, 웹 페이지나 파일의 고유한 주소.
URL의 형식
프로토콜://도메인/경로- 프로토콜(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을 사용하여 웹 브라우저에서 웹 페이지에 접속하거나, 웹 서버에서 파일을 다운로드하거나, 웹 사이트 간에 정보를 전달할 수 있습니다. URL은 웹의 기본적인 동작과 정보의 위치를 식별하는 데 중요한 역할을 합니다.
Github
: 인터넷에서 개발자들이 자신의 코드를 저장하고 다른 사람들과 공유하는 곳
깃허브의 주요 4가지 기능
- 코드 관리: 깃허브는 코드의 버전 관리를 할 수 있습니다.
- 협업: 여러 개발자가 한 프로젝트에 참여할 수 있습니다.
- 웹 호스팅: 개발자가 작성한 코드를 인터넷에 공개적으로 호스팅하여 다른 사람들이 쉽게 접근하고 이용할 수 있습니다.
- 지식 공유: 깃허브는 개방된 플랫폼으로 다른 개발자들과 코드, 프로젝트, 라이브러리 등을 공유할 수 있습니다. ——————————————————————————————————————
깃허브는 도서관과 비슷합니다. 여러 개발자들이 책을 작성하고 저장할 수 있는 도서관.
코드 관리 기능은 마치 작성한 책의 버전을 관리하는 것과 비슷합니다. 여러 번 수정하며 책의 내용을 변경할 수 있고, 깃허브를 통해 변경 사항을 추적하고 저장할 수 있습니다. 또한, 이전 버전과의 차이점을 비교해보며 필요한 경우 이전 버전으로 돌아갈 수도 있답니다.
협업 기능은 여러 작가들이 함께 책을 쓰는 것과 비슷합니다. 여러 개발자가 한 프로젝트에 참여하여 코드를 공유하고 함께 작업할 수 있습니다. 작성한 내용을 서로 리뷰하고 피드백을 주고받을 수 있는 거죠.
웹 호스팅 기능은 작성한 책을 인터넷에 공개하는 것과 비슷합니다. 깃허브를 통해 작성한 코드를 웹 호스팅 서비스에 업로드하면, 해당 코드와 관련된 웹 페이지가 웹 서버에 저장되고 인터넷 상에서 접근 가능해집니다. 이렇게 함으로써 프로젝트의 문서나 데모 페이지 등을 온라인에서 공유하고 다른 사람들이 쉽게 접근하고 필요한 파일을 다운로드할 수 있습니다.
지식 공유 기능은 다른 작가들과 책을 공유하고 읽는 것과 비슷합니다. 깃허브는 개방된 플랫폼으로 다른 개발자들과 코드, 프로젝트, 라이브러리 등을 공유할 수 있습니다. 다른 사람들의 오픈 소스 프로젝트를 참고하거나 기여할 수 있습니다. 이는 마치 여러 작가들이 서로의 책을 읽고 참고하며 함께 책을 발전시키는 것과 비슷합니다.
배포하기
https://dancinncoder.github.io/sparta/
유의사항
: firebase의 한계점
- 커스터마이징 불가
서버 제어 제한: 파이어베이스는 서버 인프라에 대한 직접적인 컨트롤이 제한됩니다. 파이어베이스에서 제공하는 기능과 방식에 따라 작업을 수행해야 합니다.
확장성 제약: 파이어베이스는 규모에 따른 가로 확장성 측면에서 제한이 있을 수 있습니다.
종속성: 파이어베이스를 사용하면 Google의 서비스에 의존하게 됩니다. 파이어베이스 외부의 다른 서비스나 기능을 활용하기 어렵거나 제한적일 수 있습니다.
파이썬
파이썬을 사용하는 이유는 파이어베이스의 제한 사항을 넘어선 다양성과 유연성을 가지고 더 많은 컨트롤을 할 수 있다는 점
- 파이썬은 다양한 웹 애플리케이션 개발 가능성을 제공하며, 개발자가 원하는 방식으로 서버를 구축하고 관리할 수 있게 해준다.
- 파이썬은 서버에 대한 완전한 컨트롤을 갖게 된다. 주인은 자신만의 고유한 방식으로 서버를 구축하고 관리할 수 있다.
- 파이썬을 사용하는 경우, 서버의 확장성을 조절할 수 있으며, 필요에 따라 리소스를 추가하거나 조정할 수 있다. 이는 대규모 기업이나 많은 트래픽을 처리해야 하는 프로젝트에서 중요한 요소
- 파이썬을 사용하는 경우, 다른 서비스와의 통합이나 원하는 기능을 더욱 유연하게 구현할 수 있다
: 구글에서 제공하는 클라우드 기반 무료 Python 실행 환경
1. 파일 - 새노트
2. 컨트롤 + 엔터 는 실행하기
3. 스크랩핑 기본 세팅
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')
4. 다음 영화 페이지에서 가져오고 싶은 영화 제목 위에 inspect - 코드 위에 오른쪽 마우스 - copy - copy selector
5. 그 링크를 title = soup.select_one('') 안에 넣기
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')
title = soup.select_one('#mainContent > div > div.box_ranking > ol > li:nth-child(1) > div > div.thumb_cont > strong > a')
print(title)
//<a class="link_txt" data-tiara-layer="moviename" href="/moviedb/main?movieId=165591">30일</a>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')
title = soup.select_one('#mainContent > div > div.box_ranking > ol > li:nth-child(1) > div > div.thumb_cont > strong > a')
print(title.text)
//30일- 가져온 데이터는 html의 뼈대이기 때문에 .text()를 사용해서 문자 값만 꺼내줍니다.
태그 안의 텍스트를 찍고 싶을 땐 → 태그.text
태그 안의 속성을 찍고 싶을 땐 → 태그['속성']
# 선택자를 사용하는 방법 (copy selector)
soup.select('태그명')
soup.select('.클래스명')
soup.select('#아이디명')
soup.select('상위태그명 > 하위태그명 > 하위태그명')
soup.select('상위태그명.클래스명 > 하위태그명.클래스명')
# 태그와 속성값으로 찾는 방법
soup.select('태그명[속성="값"]')
# 한 개만 가져오고 싶은 경우
soup.select_one('위와 동일')'부트캠프 개발일지 2023-2024 > Pre-course 사전학습' 카테고리의 다른 글
| [Pre-course] 웹 퍼블리싱 : html, css, JavaScript, jQuery, CSS 트랜지션(애니메이션), 미디어 쿼리 (1) | 2023.10.03 |
|---|---|
| [Pre-course] 웹 퍼블리싱 : 퍼블리싱, Figma (1) | 2023.10.03 |
| [Pre-course] 웹개발 기초 : Firebase, Database, Firestore Database (데이터 넣기, 데이터 가져오기) (0) | 2023.10.03 |
| [Pre-course] 웹개발 기초 : Client-Server, Fetch (1) | 2023.10.02 |
| [Pre-course] 웹기발 기초 : JQuery 2 (1) | 2023.10.01 |