[Today I Learned] 11월 3주차 day4

내일부터 기초프로젝트가 진행된다. 프로젝트 진행에 앞서 팀원들과 같이 깃브랜치를 만들어서 충돌방지를 위하여 몇가지 약속을 했다. 먼저 브랜치별로 나눌때 성함으로 나누는것이 아닌 각 구현 할 컴포넌트명으로 나누기로 했다.
예를들어 로그인페이지 구현이면 로그인 브랜치를 , 회원가입페이지 구현이면 회원가입 브랜치를.. 이런식으로 나눠서 최대한 코드가 엮이지 않게 구현해보기로 했다. 그리고 두번째로는 푸쉬하기전에 풀을 먼저 꼭 하는 것이다. 이런 약속을 지키면서 개발을 할 것이고 코드컨벤션을 지키면서 개발을 해보고 싶다.
그외에 자바스크립트 문법 강의를 들었고 lv1 프로그래머스 문제들을 풀어봤다.
오늘 중점적으로 배운것은 firebase 이다.

firebase

별도의 서버구축 없이 데이터베이스와 통신을 할 수 있게 해주며 serverless(서버 관리가 필요없는 백엔드) 라는 특징을 갖고있다.
앞으로 주로 사용 할 서비스는 3가지이다.

Authentication

회원가입 , 로그인 ,프로필 관리를 해준다.

• 구글 소셜로그인, 깃헙 소셜로그인 등등
• 아이디, 패스워드 유효성 검사 적용

Firestore

• CRUD API를 제공 및 NoSQL DB 제공
  걍 모든 crud를 제공해준다, mongoDB 역할 이라고 생각하자

Storage

파일 업로드 및 다운로드 URL

로컬에 firebase 연결하기

파이어베이스는 메뉴얼이 무척 잘 나와있어서 잘 읽어보고 작성하자!!
<cdn 방식인 경우 스크립트 파일에 파이어베이스 매뉴얼에 나온코드대로 복붙하기, script태그 작성시 꼭 “type=module”속성 꼭 붙이기!>
아래 코드는 cdn으로 불러오는 방식이고 앞으로는 npm으로 다운받아서 사용할 것이다, 그리고 항상 파일명은 firebase.js로 하자

예시
firebase.js 


import { initializeApp } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-app.js";
import { getAuth } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-auth.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-firestore.js";
import { getStorage } from "https://www.gstatic.com/firebasejs/9.14.0/firebase-storage.js";


const firebaseConfig = {
    apiKey: "AIzaSyDHnNAtDufd8Y-_X82U3ZC6lUWDgUYBJ5Q",
    authDomain: "test-teampj.firebaseapp.com",
    projectId: "test-teampj",
    storageBucket: "test-teampj.appspot.com",
    messagingSenderId: "60029495992",
    appId: "1:60029495992:web:5f87b801c4a63a7c5fa24d"
  };

// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const dbService = getFirestore(app);
export const authService = getAuth(app);
export const storageService = getStorage(app);

2. 파이어베이스 연동이 됐고, firebase사이트에 가서 Authentication ,Cloud Firestore ,Storage 서비스 셋업하기!
   

앞으로 자세한 내용 및 코드들은 밑에 api를 참고하면서 알아가자

[참고자료]
https://firebase.google.com/docs/web/setup