숙제 질문 (Firebase에 저장 문제) | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

숙제 질문 (Firebase에 저장 문제)

[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0

5주차

서*원

・

추천

・

조회수

답변 완료

* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.

* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.

안녕하세요

제가 뭘 놓쳤는지 잘 모르겠어서 질문 드립니다.

Firebase에 저장도 안 되고

물론 웹에서도 안 뜨네요 ㅠ_ㅠ

뭐가 잘못된 건지 검토 부탁드립니다!

작성한 코드 및 에러 메세지

<!doctype html>

<head>

<title>푸드파이터</title>

integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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>

// 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: "AIzaSyARi855S_kvEFYnTCsxbO90j9b5rDujH1M",

authDomain: "sparta-e0855.firebaseapp.com",

projectId: "sparta-e0855",

storageBucket: "sparta-e0855.appspot.com",

messagingSenderId: "1028699333808",

appId: "1:1028699333808:web:7630a4ea609b5b26cc0775",

measurementId: "G-DQ4YS0DWQN"

};

// Firebase 인스턴스 초기화

const app = initializeApp(firebaseConfig);

const db = getFirestore(app);

// 데이터 추가

$("#savebtn").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, "foods"), doc);

alert('저장 완료!');

window.location.reload();

});

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

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

})

// 데이터 읽기 및 카드 생성

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

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 = `

<img src="${image}"

class="card-img-top" alt="...">

<h5 class="card-title">${title}</h5>

<p class="card-text">${comment}</p>

</div>

</div>`;

$('#card').append(temp_html);

});

</script>

</head>

<body>

</svg>

</a>

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

</ul>

<input type="search" class="form-control form-control-dark text-bg-dark" placeholder="Search..."

aria-label="Search">

</form>

<button type="button" class="btn btn-warning me-2">Login</button>

</div>

</header>

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

</div>

<select class="form-select" id="inputGroupSelect03"

aria-label="Example select with button addon">

</select>

</div>

</div>

</div>

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

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

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

</a>

</div>

</div>

<h5>Section</h5>

<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">About</a></li>

</ul>

</div>

<h5>Section</h5>

<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">About</a></li>

</ul>

</div>

<h5>Section</h5>

<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">About</a></li>

</ul>

</div>

</footer>

</div>

</body>

</html>

오류 발생 시, 작성한 코드 전체와 에러 메시지를 첨부해 주세요.

Tip 1) </> 아이콘을 눌러 코드박스를 만들어 보세요.

Tip 2) Ctrl+A(맥의 경우 Command+A) 단축키로 코드를 한 번에 선택할 수 있어요!

댓글 알림