개발 일지
9~11일 일지
rabbit97
2024. 8. 11. 20:45
사실 9일꺼따로 10~11일 주말동안 천천히 따로 해서 일요일에 몰아서 일지 올릴 예정이였는데 아니!! 9일 꺼 분명 다 작성 하고 10~11일 동안 문법 공부한거 올리려고 했는데...... 글 쓰기 누를때 뭔가 9일꺼가 없어서 당황.. 글쓰기 눌렀는데 임시작성으로 분명 끝까지 다 작성 했었는데 내용이 중간에 짤려있음.. 심지어 제출까지 안해서
공백 생긴게 너무 거슬린다... 그래서 출석도 안눌렀나 하고 출석은 확인해보니 다행이 출석은 찍고 마무리 했더라.. 아니 이게 무슨 일이야아
당황 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">
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:
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 { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
const firebaseConfig = {
apiKey: "AIzaSyD1So78REEFVV2h0s6vyoDLyQFwPefQt5s",
authDomain: "sparta-a8d79.firebaseapp.com",
projectId: "sparta-a8d79",
storageBucket: "sparta-a8d79.appspot.com",
messagingSenderId: "40126519475",
appId: "1:40126519475:web:b86500499f00990234b8c6",
measurementId: "G-5V3C8EN91M"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 데이터 추가
$("#addBtn").click(async function () {
let image = $("#floatingInput").val();
let title = $("#foodTitle").val();
let star = $("#inputGroupSelect03").val();
let comment = $("#floatingTextarea").val();
// title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.
try {
const docRef = await addDoc(collection(db, "foods"), {
image: image,
title: title,
star: star,
comment: comment,
// 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.
});
alert("음식이 추가 되었습니다!");
window.location.reload();
} catch (e) {
console.error("Error adding document: ", e);
}
});
// 데이터 읽기 및 카드 생성
const cardsContainer = document.querySelector('.row-cols-3');
async function fetchAndAppendData() {
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;
let temp_html = `
<div class="col">
<div class="card">
<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>
<button class="card-button">주문하기</button>
</div>
</div>
</div>`;
cardsContainer.insertAdjacentHTML('beforeend', temp_html);
});
}
fetchAndAppendData();
document.getElementById('addCardButton').addEventListener('click', () => {
fetchAndAppendData();
});
</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">
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>
확실히 빠른 시간에 많은 것을 배웠다. 이 캠프 교육 과정과 비슷하게 필요한 것만 빠르게 배우는 이 캠프 목표를 알 수 있는 1주차 였다.
앞으로도 많은 것을 배울 텐데 많이 기대가 된다.
사실 저번 주 금요일에 많이 작성 했는데 이제 와서 새롭게 작성하려니 기억이 가물가물 하다. 이래서 기록이 중요하다고 하나보다.
이렇게 1주차 html 교육 과정이 끝났고 바로 2주차 자바스크립트 기초 문법 과정!
메모장에 적다가 실습이 나와서 메모를 2곳에 하면 괜히 햇갈릴 것 같아 vs code에 옮겨적기...
강의에서는 터미널에 명령어를 적고 데이터를 불러냈지만 나는 파일을 수업과 관련된 코드를 모두 한 폴더에 넣고 분류 시켰는데 터미널에서 바탕화면 내가 정리한 그 폴더 까지만 계속 할당을 잡아서 명령어도 모르고 해서 그냥 vs code에서 실행을 시켰더니 그래도 결과 값은 잘 나와서 그냥 실행 시켰다!
이 내용들은 모두 사전 캠프때 모두 한 내용이지만 기본기 없이 그냥 넘어갔다가 나중에 가서 참사가 일어날까봐 다시 복습!!
사실 영상은 뒤에꺼까지 다 봤는데 생각해보니 아무것도 적은게 없어서 다시 돌려보고 적고..... 의미는 없지만 나중에 분명 덕을 보겠지 하는 마음으로 다시 정리!!
----------------------------------------------------------------------------------------------------------------------
오늘의 학습 요약
이렇게 11일까지 첫 주 다 끝났는데 9일 내용이 모두 날아간게 너무 아쉽다.... 일단 엄청 알찼다! 느낌이였는데 이 마음 가지고 끝까지 가서 수료만 잘 하고 개발자로서 1인분을 하고 싶다. 자바스크립트 문법 해서 이제 시작인데 html때는 본 캠프의 ot 느낌이 많이 나서 이제 재대로 시작이다! 하는 느낌이 있다. 잘 적응하고 많이 배우고 싶다.