[memo-app] Firebase 3.설정 스크립트
🧶 𝗪𝗲𝗯/Firebase

[memo-app] Firebase 3.설정 스크립트

 

 설정 스크립트 

SDK 추가하기

좌측 메뉴에서 톱니바퀴를 누릅니다.

 

[일반] 탭으로 이동하여 [SDK 설정 및 구성] 에서 CDN 을 선택하고 아래 코드를 복사합니다.

 

 

public/index.html

<!DOCTYPE html>
<html>
	<head>
		<!--Import Google Icon Font-->
		<link
			href="http://fonts.googleapis.com/icon?family=Material+Icons"
			rel="stylesheet"
		/>
		<!--Import materialize.css-->
		<!-- Compiled and minified CSS -->
		<link
			rel="stylesheet"
			href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css"
		/>

		<!--Let browser know website is optimized for mobile-->
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0"
		/>
		<style>
			::-webkit-scrollbar {
				display: none;
			}
			.collection {
				cursor: pointer;
			}
		</style>
	</head>

	<body>
		<div class="row">
			<div
				class="col s3"
				style="
					padding: 0;
					margin: 0;
					overflow-y: auto;
					overflow-x: hidden;
					height: 1080px;
					-ms-overflow-style: none;
				"
			>
				<!-- Grey navigation panel -->
				<ul
					class="collection"
					style="padding: 0; margin: 0"
				></ul>
			</div>

			<div
				class="col s9"
				style="padding: 0; margin: 0; max-height: 1080px"
			>
				<!-- Teal page content  -->
				<nav>
					<div class="nav-wrapper">
						<div class="col s12">
							<a href="#!" class="breadcrumb"
								><span id="modifyDate"></span
							></a>
						</div>
					</div>
				</nav>

				<textarea
					style="height: 1000px"
					class="textarea"
					width="100%"
					rows="1000"
					placeholder="새로운 메모를 입력해보세요^^"
				></textarea>
			</div>

			<div
				class="fixed-action-btn"
				style="bottom: 45px; right: 24px"
			>
				<a
					class="btn-floating btn-large waves-effect waves-light red"
					><i class="material-icons">add</i></a
				>
			</div>

			<div
				class="preloader-wrapper big active"
				style="
					position: absolute;
					z-index: 1000;
					left: 50%;
					top: 50%;
					display: none;
				"
			>
				<div class="spinner-layer spinner-blue-only">
					<div class="circle-clipper left">
						<div class="circle"></div>
					</div>
					<div class="gap-patch">
						<div class="circle"></div>
					</div>
					<div class="circle-clipper right">
						<div class="circle"></div>
					</div>
				</div>
			</div>
		</div>

		<!--Import jQuery before materialize.js-->
		<script
			type="text/javascript"
			src="https://code.jquery.com/jquery-2.1.1.min.js"
		></script>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

		<!-- 여기 -->
		<script type="module">
			// Import the functions you need from the SDKs you need
			import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-app.js";
			import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.6.7/firebase-analytics.js";
			// TODO: Add SDKs for Firebase products that you want to use
			// https://firebase.google.com/docs/web/setup#available-libraries

			// Your web app's Firebase configuration
			// For Firebase JS SDK v7.20.0 and later, measurementId is optional
			const firebaseConfig = {
				apiKey: "AIzaSyBc-Fk0pH3zdRJOBoQu-6oYqYu47J02ATc",
				authDomain: "fir-start-5566d.firebaseapp.com",
				databaseURL:
					"https://fir-start-5566d-default-rtdb.asia-southeast1.firebasedatabase.app",
				projectId: "fir-start-5566d",
				storageBucket: "fir-start-5566d.appspot.com",
				messagingSenderId: "654124086552",
				appId: "1:654124086552:web:8a55ccd1da2e128ea95a6d",
				measurementId: "G-GVRG34H6EL",
			};

			// Initialize Firebase
			const app = initializeApp(firebaseConfig);
			const analytics = getAnalytics(app);
		</script>
	</body>
</html>

제일 하단부에 복사 붙여넣기를 합니다.

 

 

 

 

 

 

firebase cdn

firebase sdk 설정

 

728x90
저작자표시 비영리 변경금지

'🧶 𝗪𝗲𝗯 > Firebase' 카테고리의 다른 글

[memo-app] Firebase 6.데이터 저장과 출력  (0) 2022.02.22
[memo-app] Firebase 5.데이터 출력  (0) 2022.02.22
[memo-app] Firebase 4.인증 기능 구현  (0) 2022.02.21
[memo-app] Firebase 2.로컬개발환경  (0) 2022.02.21
[memo-app] Firebase 1.환경설정  (0) 2022.02.21

    티스토리툴바