커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
알림창 문제와 FireBase 문제 질문드립니다.
[왕초보] 코딩이 처음이어도 쉽게 배우는 웹개발 A to Z v0
5주차
북마크
이*연
댓글
1
・
추천
0
・
조회수
5
조회수
5
답변 완료

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

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



1.작성한 코드 어딘가에 문제가 있어서 음식카드가 추가가 안되고 알람창이 계속해서 뜨는 것 같은데,

1) 우선 알람창이 왜 지속적으로 뜨는지를 해결하지 못하겠습니다.

2) 알람창 문제가 해결이 안되서 음식카드 문제도 해결하는 방법을 모르겠습니다.


2.firebase문제

1) 강의를 다 들은 후에 강의를 들으며 만든 firebase를 추후 완전히 삭제하고 싶은데, 어떻게 하는 것인지 잘 모르겠습니다.

2) 또한 firebase에서 계속해서 아래 화면 캡쳐와 같은 보안문제 알람이 뜨는데, 이렇게 알람이 뜨는게 정상인건지, 이를 해결하려면 보안설정문제는 어떻게 하는 것인지 궁금합니다.


보고 계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해

스파르타 즉문즉답


스파르타 즉문즉답

할 수 있어요.




작성한 코드 및 에러 메세지

<!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: "AIzaSyDnF723m9tYAd4hlBWKCd6Ddf5mFAJaZ0k",
            authDomain: "sparta-ced62.firebaseapp.com",
            projectId: "sparta-ced62",
            storageBucket: "sparta-ced62.appspot.com",
            messagingSenderId: "726466728310",
            appId: "1:726466728310:web:923fdc9ca0c6e816ccaa57"
        };


        const app = initializeApp(firebaseConfig);
        const db = getFirestore(app);


        // 데이터 추가
        $("#addBtn").click(async function () {
            let image = $('#image').val();
            let title = $('#title').val();
            let content = $('#content').val();
            let date = $('#date').val();


            let doc = {
                'image': image,
                'title': title,
                'content': content,
                'date': date
            };
            await addDoc(collection(db, "foods"), doc);
        })



        // title_input, comment_input, image_input id를 가진 HTML 요소에서 값을 가져와서 title, comment, image 변수에 저장해 주세요.


        try {
            const docRef = await addDoc(collection(db, "foods"), {


                // 각각 담은 변수를 컬렉션 필드에 title, comment, image에 각각 넣어주세요.


            });


            alert("음식이 추가 되었습니다!");
            window.location.reload();
        } catch (e) {
            console.error("Error adding document: ", e);
        }



        // 데이터 읽기 및 카드 생성
        let docs = await getDocs(collection(db, "foods"));
        docs.forEach((doc) => {
            let row = doc.data();
            console.log(row);


            let image = row['#image'];
            let title = row['#title'];
            let content = row['#content'];
            let date = row['#date'];


            let temp_html = `
            <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">${content}/p>
                        <p>class="star">${star}</p>
                        <button class="card-button">주문하기</button>
                    </div>
                </div>
            </div>`;
            $('#card').append(temp_html);
        });



        $(".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 코드를 생성하세요.


            $(".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 type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
                        <label for="floatingInput">음식 이미지 주소</label>
                    </div>
                    <div class="form-floating mb-3">
                        <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="inputGroupSelect03"
                            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="floatingTextarea"></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>
취소
 공유
취소
댓글 0
댓글 알림
나의얼굴