커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
파이어스토어 사용시 <script type="module"> 질문입니다.
[왕초보] 웹개발 종합반 v0
4주차
박*은
댓글
3
・
추천
0
・
조회수
13
조회수
13
답변 완료
* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
강의에서는 js 파일을 따로 생성하지 않고 <script type="module"> 으로 작성하셨더라구요.
저는 index.js라는 파일을 따로 만들어서 사용하고 있는데, 이럴 때는 어떻게 해야하는지 궁금해서 질문 드립니다.
현재 제가 작성한 코드는 Firestore DB에 저장이 되지 않습니다.
작성한 코드 및 에러 메세지
<!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.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="mytitle">
<h1>나만의 추억 앨범</h1>
<p>현재 서울의 미세먼지 : <span id="msg"></span></p>
<button onclick="openClose()">추억 저장하기</button>
</div>
<div class="mypostingBox" id="postingBox">
<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="form-floating mb-3">
<input
type="email"
class="form-control"
id="content"
placeholder="앨범 내용"
/>
<label for="floatingInput">앨범 내용</label>
</div>
<div class="form-floating mb-3">
<input
type="email"
class="form-control"
id="date"
placeholder="앨범 날짜"
/>
<label for="floatingInput">앨범 날짜</label>
</div>
<div class="myBtn">
<button id="postingBtn" type="button" class="btn btn-primary">
기록하기
</button>
<button type="button" class="btn btn-outline-primary">닫기</button>
</div>
</div>
<div class="mycards">
<div id="card" class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<img
src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top"
alt="앨범"
/>
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top"
alt="앨범"
/>
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top"
alt="앨범"
/>
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img
src="https://images.unsplash.com/photo-1446768500601-ac47e5ec3719?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1446&q=80"
class="card-img-top"
alt="앨범"
/>
<div class="card-body">
<h5 class="card-title">앨범 제목</h5>
<p class="card-text">앨범 내용</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">앨범 날짜</small>
</div>
</div>
</div>
</div>
</div>
<script src="./index.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
</body>
</html>
// 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";
// Firebase 구성 정보 설정
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyDtbTUSAXiXsJv1bvxx4y909zisqSo5uuk",
authDomain: "happy-882bd.firebaseapp.com",
projectId: "happy-882bd",
storageBucket: "happy-882bd.appspot.com",
messagingSenderId: "915470516981",
appId: "1:915470516981:web:6249afe8f44cfe8213fbbc",
measurementId: "G-4C8TY07XXM",
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
$("#postingBtn").click(async function () {
let doc = { name: "sieun", age: 22 };
await addDoc(collection(db, "albums"), doc);
});
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url)
.then((res) => res.json())
.then((data) => {
let temp = data["temp"];
if (temp > 20) {
$("#seoulWeather").text("더워요");
} else {
$("#seoulWeather").text("추워요");
}
});
});
function openClose() {
$("#postingBox").toggle();
}
function makeCard() {
let image = $("#image").val();
let title = $("#title").val();
let comment = $("#comment").val();
let star = $("#star").val();
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>
</div>
</div>
</div>`;
$("#card").append(temp_html);
}
댓글 알림
