Firebase 쓰는 이유
Firebase는 서버를 대신 만들어주는 서비스로 개발 시간을 대폭 단축시킨다
정형화된 작업을 생략해 서버 코드 없이 풀스택 개발이 가능하다!
장점
- 프론트엔드 지식만 있어도 바로 서비스 제작 가능
- (AWS에 비해서) DB콘솔을 다루기 용이하다
- 프로젝트 규모에 따른 서버/DB 스케일업이 자동
- DB데이터가 기본적으로 리얼타임 싱크 (실시간 동기화)
단점
- 일정 사용량을 넘을 경우, 대충 AWS보다 20% 비쌈
Setting
1. Firebase Console에 구글 아이디로 로그인하고 프로젝트를 생성해준다
Firebase
Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.
firebase.google.com
2. 좌측 '빌드' 탭에서 사용할 서비스들을 활성화해준다
* Firestore를 활성화할 때, DB 위치는 'asia-northeast3' 선택
3. 터미널에 다음 명령어를 입력해 firebase-tools를설치해준다
npm install -g firebase-tools@9.23.14. 다음 명령어를 입력해 Firebase에 연동한 구글 계정으로 로그인
firebase login5. 다음 명령어를 입력하면 설정 후 해당 위치에 Firebase 프로젝트가 생성된다
firebase init
6. Firebase Console > 프로젝트 설정 > 내 앱
7. public 폴더의 기본 html 파일들을 삭제하고 index.html에 대충 이런 식으로 넣어준다
[public/index.html]
<!DOCTYPE html>
<html lang="ko">
<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>fb-market</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<!--Authentication-->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<!--Firestore DB-->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
<!--사진 Storage-->
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
<!--생성한 SDK 코드-->
<script type="module">
const firebaseConfig = {
apiKey: "AIzaSyCXhpvfSzg6HyVVYW_sGhusJAa6eEiFLNg",
authDomain: "fb-market-239a3.firebaseapp.com",
projectId: "fb-market-239a3",
storageBucket: "fb-market-239a3.appspot.com",
messagingSenderId: "836845070795",
appId: "1:836845070795:web:46ad2e06fea9b20523ee4e",
measurementId: "G-ZQEC6P42L1",
};
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>* 안정적인 8.6.5 버전을 사용 (9.X 이상 버전부터는 모듈식 개발이 가능하다)
8. 다음 명령어로 로컬에서 실행할 수 있다
firebase serve* localhost:5000에서 실행된다
본 내용은 코딩애플의 '당근마켓을 만들며 배워보는 Firebase'를 바탕으로 작성되었습니다.
'Back-end > Firebase' 카테고리의 다른 글
| [노마드코더] #5 Edit Profile (0) | 2022.04.08 |
|---|---|
| [노마드코더] #4 File Upload (0) | 2022.04.06 |
| [노마드코더] #3 CRUD (0) | 2022.03.28 |
| [노마드코더] #2 Authentication (0) | 2022.03.18 |
| [노마드코더] #1 Introduction (0) | 2022.03.11 |