2022. 12. 21. 13:18ㆍ데이터베이스/Firebase
안녕하세요~ totally 개발자입니다.
Firebase Overview
Firebase(파이어베이스)는 2014년 구글이 인수한 후 구글이 운영하고 있는 웹 및 모바일 애플리케이션 개발 플랫폼입니다. 파이어베이스는 NoSQL 형태입니다. 자바스크립트를 이용해서 파이어베이스 데이터베이스를 이용하여 바로 시작해보도록 하겠습니다.
1) 아래 링크에 진입하여 프로젝트를 추가합니다.
https://firebase.corp.google.com/
firebase.corp.google.com - Google Single Sign On: Sign into corp
You've successfully signed in and will be redirected in 10 seconds You didn't use a Titan Security Key as required Visit go/fedramp-compliance to learn why you need to use a Titan Key
login.corp.google.com
2) Build -> Realtime Database -> Create Database를 클릭해줍니다.
3) Location은 아무 곳이나 하나 선택한 후 넘어갑니다.
4) 테스트 모드로 선택하고 넘어가시면 되며 잠금 모드로 시작하시면 지정한 대로만 Read, Write 권한이 생기기 때문에 일단은 테스트 모드로 넘어가시면 됩니다.
5) 이렇게 나오면 되며 설정 Project Overview 오른쪽에 있는 설정 버튼을 눌러서 Project Settings를 클릭합니다.
6) 스크롤을 내리면 아래에 Your apps 컨테이너 부분이 나오며 </> 아이콘을 클릭합니다.
7) 맞춤 이름을 입력해서 넘어가고 Register app를 누릅니다.
8) 원하는 방식을 클릭하면 가이드가 나옵니다. 저는 Use a <script> tag를 이용해보겠습니다. 다만 이것을 복사하시고 맨 아래에 전체 소스 코드를 첨부했으니 그것을 참고해서 변경해주시면 됩니다.
9) 연동이 되었는지 살펴보기 위해 데이터를 테스트로 하나 넣어보는 코드를 작성해보겠습니다. 아래처럼 작성해주시면 되며 전체 소스 코드는 맨 아래에 첨부했으니 참고해주시면 됩니다.
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// 데이터베이스 변수
const database = firebase.database();
// 데이터 저장
database.ref('students').set({
"full_name": "Andrew",
"age": 17,
"grade": "A"
});
10) 실행했을 때 다음처럼 나오면 성공입니다.
[전체 소스 코드]
api, id 등은 모두 ...으로 해놓았습니다. 이 부분은 조금 전에 본인 파이어베이스 데이터베이스 프로젝트의 정보들을 넣으시면 됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid;
}
</style>
</head>
<body>
<h1>Firebase EXAMPLE</h1><br />
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.8.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "...",
appId: "..."
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// 데이터베이스 변수
const database = firebase.database();
// 데이터 저장
database.ref('students').set({
"full_name": "Andrew",
"age": 17,
"grade": "A"
});
</script>
</body>
</html>오늘은 파이어베이스 프로젝트 생성, Realtime 데이터베이스 생성 및 데이터 저장 테스트를 진행해보았습니다. 다음 시간에는 데이터를 불러와서 웹사이트에 출력하는 방법에 대해 살펴보도록 하겠습니다. 감사합니다.
'데이터베이스 > Firebase' 카테고리의 다른 글
| [004] 파이어베이스 (Firebase) - Realtime Database delete (데이터 삭제) (0) | 2023.01.08 |
|---|---|
| [003] 파이어베이스 (Firebase) - Realtime Database update (데이터 업데이트) (0) | 2022.12.23 |
| [002] 파이어베이스 (Firebase) - Realtime Database Read (데이터 불러오기) (0) | 2022.12.22 |