(왕초보)웹개발 종합반 5주차
1) 깃허브 배포
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은 웹의 기본적인 동작과 정보의 위치를 식별하는 데 중요한 역할을 함
깃허브에 대해 알고 있었고, 계정도 있었지만, 사이트 배포까지 가능한 줄을 몰랐다.
깃허브 코드 수정이 많은 경우는 VScode에서 작성해서 코드 전체를 교체하는 것이 좋습니다.
깃 허브 안에서 수정할 경우 오류 날 확률이 높기 때문
2) 파이썬 맛보기(스크래핑)
https://colab.research.google.com
Google Colab
colab.research.google.com
import requests
from bs4 import BeautifulSoup
URL = "https://bit.ly/web-movie"
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.content, 'html.parser')
title = soup.select_one('#boxoffice_list_content > ul > li:nth-child(1) > a > div.mov_name')
print(title.text)
사실 2020년에 국비지원 학원에서 빅데이터 분석 전문가 과정을 수강했어서 어렴풋이 기억은 난다. 반갑다.
3) 숙제
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>푸드파이터</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
body {
background-color: white;
color: black;
}
.header {
background-size: cover;
background-image:
url('https://images.unsplash.com/photo-1531697218799-ed0ae884c6c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80');
background-position: right;
height: 650px;
display: flex;
flex-direction: column;
}
.header>h1 {
margin: 0;
font-size: 40px;
}
.header>div {
font-size: 18px;
margin-top: 10px;
}
.form-button {
width: 150px;
height: 40px;
background-color: transparent;
border: 1px solid tr;
color: black;
font-size: 15px;
margin: 20px 10px 0px 0px;
}
.form-button:hover {
border: 2px solid black;
}
.info-button {
margin: 20px 0 0 15px;
height: 40px;
font-size: 14px;
}
.post {
width: 500px;
margin: 20px 0px 1px 20px;
padding: 20px;
box-shadow: 0px 0px 3px 0px transparent;
background-color: wheat;
}
.form-floating input,
.form-floating textarea {
color: black;
background-color: white;
}
.button2 {
display: flex;
justify-content: flex-end;
margin-top: 15px;
}
.button2>button {
margin-right: 10px;
}
.mycards {
width: 1600px;
margin: 30px auto;
flex-direction: row;
align-items: center;
}
.card {
border-radius: 30px;
background-color: white;
border: none;
color: black;
margin-left: 50px;
}
.card-img-top {
object-fit: cover;
height: 250px;
border-radius: 20px;
}
.card-title {
margin-top: 10px;
font-size: 18px;
}
.card-body {
border: blanchedalmond 2px solid;
border-radius: 20px;
}
.card-text {
color: black;
}
.comment {
color: black;
}
.play-button {
display: flex;
justify-content: flex-start;
margin-top: 15px;
}
a.nav-link {
color: #F17228;
font-size: large;
}
.icon {
height: 50px;
}
.card-button {
background-color: orange;
color: white;
text-align: center;
padding: 10px 15px;
border: none;
border-radius: 6px;
cursor: pointer;
}
.card-title {
font-weight: bold;
}
.card-button> :hover {
background-color: darkorange;
}
#input-card {
width: 500px;
margin: 0px 0px 0px 135px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
float: left;
}
.form-floating input,
.form-floating textarea {
color: black;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
.form-floating label {
color: #333;
}
.input-group button,
.input-group select {
background-color: rgb(168, 161, 161);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 10px;
}
.input-group button:hover,
.input-group select:hover {
background-color: gray;
}
.button2 {
text-align: right;
}
.button2 button {
background-color: #F17228;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.button2 button:hover {
background-color: #f3620f;
}
.jumbotron-message {
margin-left: 150px;
font-size: 1500px;
}
</style>
<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: 'AIzaSyBeg9OK9ZQsp6JbyFW6Wpz4Bb4McEIOXnQ',
authDomain: 'sparta-29759.firebaseapp.com',
projectId: 'sparta-29759',
storageBucket: 'sparta-29759.firebasestorage.app',
messagingSenderId: '1056677438143',
appId: '1:1056677438143:web:a32a302ec3191ef94b9c0a',
measurementId: 'G-6YP985W1YC',
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 데이터 추가
$("#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);
}
});
// 데이터 읽기 및 카드 생성
$(".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);
});
</script>
</head>
<body>
<!-- Navbar -->
<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">
<img src="https://s3.ap-northeast-2.amazonaws.com/materials.spartacodingclub.kr/food.png"
class="icon"></li>
<li><a href="#" class="nav-link px-2 text-danger">Foodcourt</a></li>
<li><a href="#" class="nav-link px-2 ">홈</a></li>
<li><a href="#" class="nav-link px-2 ">한식</a></li>
<li><a href="#" class="nav-link px-2 ">일식</a></li>
<li><a href="#" class="nav-link px-2 ">중식</a></li>
<li><a href="#" class="nav-link px-2 ">양식</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-warning me-2">Login</button>
<button type="button" class="btn btn-warning">Sign-up</button>
</div>
</div>
</div>
</header>
<!-- 점보 트론 적용 jumbotron -->
<div class="header">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<div class="container-fluid py-5">
<div class="jumbotron-message">
<h1 class="display-5 fw-bold" style="font-family: 'Black Han Sans', sans-serif; ">스파르타 푸드파이터
</h1>
<p class="col-md-8 fs-4"> 본인만의 맛집을 소개하는 사이트입니다.
<br>맛집을 소개해 주세요!
</p>
</div>
<!-- 부트스트랩 인풋 박스 적용-->
<div class="post" id="input-card">
<div class="form-floating mb-3">
<input id="image_input" type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">음식 이미지 주소</label>
</div>
<div class="form-floating mb-3">
<input id="title_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="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="floatingTextarea">추천 이유</label>
</div>
<div class="button2">
<button type="button" class="btn btn-danger" id="addBtn"> 기록하기 </button>
</div>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 카드 적용-->
<div class="mycards">
<div class="row row-cols-3 row-cols-md-3">
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2162&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">하와이안 피자</h4>
<p class="card-text">이건 꼭 먹어봐야 해요</p>
<p>⭐⭐⭐⭐</p>
<button class="card-button">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1481070555726-e2fe8357725c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2235&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">크리스피 버거</h4>
<p class="card-text">너무 달콤해요!</p>
<p>⭐⭐⭐</p>
<button class="card-button">주문하기</button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://images.unsplash.com/photo-1569718212165-3a8278d5f624?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2080&q=80"
class="card-img-top" alt="...">
<div class="card-body">
<h4 class="card-title">해물 라면</h4>
<p class="card-text">국물이 끝내줘요!</p>
<p>⭐⭐⭐⭐⭐</p>
<button class="card-button">주문하기</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container2">
<footer class="row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 my-5 border-top">
<div class="col mb-3">
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
</a>
<p class="text-body-secondary">©Teamsparta 2024</p>
</div>
<div class="col mb-3">
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>Spring 사전캠프 퀘스트 모음집
🧑🏻💻Java 응용하기
Lv1. 랜덤 닉네임 생성기
import java.util.*;
public class RandomNicknameCreator {
private String[] firstList = {"기철초풍", "멋있는", "재미있는"};
private String[] secondList = {"도전적인", "노란색의", "바보같은"};
private String[] thirdList = {"돌고래", "개발자", "오랑우탄"};
public String createRandomNickname() {
// 여기에 랜덤으로 닉네임을 만드는 코드를 적어주세요
double random = Math.random();
int firstNum = (int) Math.round(random * (firstList.length - 1));
int secondNum = (int) Math.round(random * (secondList.length - 1));
int thirdNum = (int) Math.round(random * (thirdList.length - 1));
return firstList[firstNum]+" "+secondList[secondNum]+" "+thirdList[thirdNum];
}
public static void main(String[] args) {
RandomNicknameCreator randomNicknameCreator = new RandomNicknameCreator();
String myNickname = randomNicknameCreator.createRandomNickname();
System.out.println(myNickname);
}
}
Lv2. 스파르타 자판기
import java.util.*;
public class BeverageMachine {
public static void main(String[] args) {
Map<String, Integer> beverages = Map.of(
"사이다", 1700,
"콜라", 1900,
"식혜", 2500,
"솔의눈", 3000
);
for (Map.Entry<String, Integer> beverage : beverages.entrySet()) {
String key = beverage.getKey();
int value = beverage.getValue();
// 여기에 System.out.println 문을 적어주세요
System.out.println(key + ":" + value);
}
System.out.println("음료를 선택하세요.");
System.out.println(beverages.keySet());
Scanner scanner = new Scanner(System.in);
String userChoice = scanner.nextLine();
if (beverages.containsKey(userChoice)) {
System.out.println("지불할 금액을 입력하세요.");
int coin = scanner.nextInt();
System.out.println(beverages.get(userChoice));
if (coin < beverages.get(userChoice)) {
// 실행 종료하기
System.out.println("돈이 부족합니다");
} else {
// 돈이 충분할 경우
int remain = coin - beverages.get(userChoice);
System.out.println("잔액은 "+remain+"원 입니다.");
}
} else {
System.out.println("목록에 없는 음료이므로 실행이 종료됩니다.");
return;
}
}
}
사실 3번째 퀘스트는 나에게 매우 어려웠다.
그래서 내일 다시 하기로 했다.
내일 어느 정도 붙잡다가 안되면 튜터님께 문의드려야 되겠다.
'CODING > 스파르타 내일배움캠프 TIL' 카테고리의 다른 글
| TIL 9일차(본 캠프 시작일)_2024.12.23(월) (0) | 2024.12.23 |
|---|---|
| TIL 8일차_2024.12.20(금) (1) | 2024.12.20 |
| TIL 6일차_2024.12.18(수) (2) | 2024.12.18 |
| TIL 5일차_2024.12.16(월) (1) | 2024.12.16 |
| TIL 4일차_2024.12.13(금) (2) | 2024.12.13 |