Firebase, 트위터 클론코딩

21.09.09 ~

 

Firebase

 - 작은 프로젝트를 시험삼하 진행하고 싶을 때 사용하면 좋다. (아이디어 테스트용)

 - 이후 이 작은 프로젝트가 성공적으로 진행된다면 그때 큰 규모의 서버를 짜면 된다.

 - 즉, 비즈니스를 구상중인 단계에 사용하면 좋다.

 

React

 - 앞서 많이 공부했으니 패스

 

1 // Set Up!

트위터 클론코딩은 firebase + react의 형태로 진행한다.

npx create-react-app nwitter

그러니 일단 시작은 create-react-app!!

근데 이거 바뀌었단다..

 

npm install -g create-react-app

create-react-app app_name

 

Firebase같은 경우에는 공식 다큐먼트에 정리가 되어있다. 앱 생성하고 키 받으면 된다.

 

react_project/src 폴더에 firebase.js 파일을 작성해줘야한다. 일단 성공하긴 했는데 버전을 잘못 다운받은 기분?..

v8 받아야하는데 v9받은 듯 하다.. 

 

firebase.js 파일을 만들어서 firebase를 작동시키는 코드를 작성한다. 관련 코드는 firebase에서 어플리케이션을 생성하고 받으면 된다.

https://firebase.google.com/docs/web/setup?authuser=0 를 참고하면 좋다. 

자바스크립트 프로젝트에 Firebase 추가

 

- Git-hub에서 KEY 숨기기 (React 편)

1. .env 파일을 생성하고, 각각의 KEY를 REACT_APP_SOMETHING 형태로 이름붙인다.

2. 필요한 코드에서 process.env.REACT_APP_SOMETHING 형태로 호출하면 된다. (별도의 import 불필요)

3. 이후 .gitignore에 .env를 작성하면 끝!

+) 하지만 firebase를 실행하면 서버상에 등록이 되기때문에 보안이 강화되는 건 아님. 그저 github에 올리지 않을 뿐

 

- Arrow function 작성 팁

export default () => <span>Home</span>
//이렇게 작성하던 코드를

const Home = () => <span>Home</span>
export defualt Home
// 이렇게 작성해주면, 다른 파일에서 <Home/> 을 작성하는 동시에 자동으로 import코드가 작성된다. 개꿀

 

2 // Authentication

 document 만 읽어도 어느정도 작업이 가능해졌다. 이게 내 실력이 늘어서인지 firebase의 document가 우수해서인지는 잘 모르겠다. 아무튼 잘 됐어..  강의와는 다르게 firebase가 v9 beta로 업데이트가 되면서 작성방식이 변했다.

// Firebase App (the core Firebase SDK) is always required and must be listed first
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
	...
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

export const authService = getAuth();

이렇게 모듈을 import하는 directory가 더 단순해진 느낌이다. 개인적으로 이걸 더 선호.

 

- firebase Authentication 설정하기

 설정 창에 들어가면 sign-in method 부분이 있다. 사용하고 싶은 요소들만 선택해 설정해주면 된다. github같은 경우에는 github페이지에서 별도로 설정해 줄 필요도 있다. email, github, google 이 세가지만 진행했다.

 

- submit form & input 작성하기

 hook을 사용했다. useState. 각각의 input에 name값을 설정해주고 하나의 method를 만들어서 짧게 처리했다. <input>에서는 입력값을 value로 설정해주는 함수를 매칭하고, 상위태그인 form에는 제출하는 기능을 가진 함수를 매칭한다.

<input type='submit'/>

input태그 type='submit'기능을 사용하면 되는에 왜 굳이 함수를 또 만드냐고?

html에서 기본적으로 제공하는 기능을 사용할 경우에는 홈페이지가 refresh되기 때문이다.

<form onSubmit={functionForSubmit}></form>

 우리의 react는 그런 사소한 것들 까지도 깔끔하게 만들어준다. 상위 태그에 form을 만들어주고, onSubmit 속성을 사용해주면 submit-input이 동작할 때를 캐치할 수 있다.

 함수에 들어가는 기능은 firebase v8을 참고해서 작성하면 된다. 

 

아, 코드에 주목 할만한 부분이 있었는데

cosnt {target: { name, value } } = event;

이 부분이다. event 객체에서 target.name과 target.value로 설정된 값을 가져와서 name과 value라는 이름의 변수로 만든다. 즉, 객체의 파라미터와 변수명을 동일하게 설정 할 경우에 사용하는 코드. 자주 봤지만 언제나 인상깊다.

 

- setPersistence

 로그인을 할 때 persistence라는 값을 설정 해줄 수 있는데, 이 값은 데이터를 어떻게 유지할지에 대한 설정이라고 보면된다. local : 브라우저를 껐다 켜도 유지, none : 새로고침만 해도 사라짐, session : 탭이 닫히면 사라짐

 

 

 

이후 폭풍 코딩을 하던 중에 다음과 같은 코드 발견

{isLoggedIn && <Navigation />}

삼항연산자랑 비슷한 느낌으로 쓰는건데, 앞의 boolean 타입에 따라서 뒤에 나오는 태그의 유무를 결정하는 코드. 간결하고 아름답다.

 

- Route, Redirect

 Route는 알고 있겠지. 주소 받아서 해당 컴포넌트로 처리해주는 태그. 판단의 기본원리는 부분일치, exact 속성 넣어주면 완전일치로 바뀜

 Redirect는 조금 헷갈렸었는데 이제 완벽제어 가능

<Redirect from="*" to="/" />

특정 주소에서 refresh가 될 때 다른 주소로 옮겨주는 역할. 위 코드는 어떤 상황이던 홈으로 보내버리는 코드라고 할 수 있다. 근데 이걸 hook으로 처리할 수 있다고??

import {useHistory} from "react-router-dom";

const history = useHistory();
history.push("/");

이런 식으로 사용하는데, 위의 redirect코드와 동일한 역할을 수행한다고 할 수 있다.

 

3 // nweeting

- firestore & collection

 firestore는 firebase의 DB인데, NoSQL_database이다. NoSQL은 collection과 document라는 것들을 가지고 있다. 

"collection = 폴더, document = 그냥 서류파일"이라고 생각하면 좋다. collection은 document들의 그룹이다. 웹페이지 콘솔에서 유연하게 다룰 수 있지만 코드로도 진행할 수 있다.

 

+ 어제부터 자꾸 Promise타입을 리턴하면 async - await 기능을 추가하라고 하는데 왜 그러는지 잘 모르겠다.

 

- 다큐먼트 읽는법 (용례 & 참조)

 계속 참조만 보면서 왜 용례가 안나오지 하며 한탄했다. 하지만 다른 문서에 있었던것... 

용례 : (https://firebase.google.com/docs/build)

참조 : (https://firebase.google.com/docs/reference/js)

울고싶다... 내 시간아 ㅠㅠㅠㅠㅠ

 

- CRUD : Create Read Update Delete

 열심히 코드를 짰는데,, 다큐먼트 보면 다 나와서 딱히 필기할게 없다. 여튼 위 네가지 기능을 구현했다!

 

4 // File Upload

- 이미지 파일 읽어오기

 input tag로 읽어올 때 accept='image/*" 속성을 추가해주면 모든 형식의 이미지 파일을 읽어올 수 있다. 

 

- FileReader( )

 파일 업로드와 관련된 이벤트들을 처리할 수 있는 API이다. 이벤트 핸들러와 메서드 등이 있다.

 - [event] onloadend => 업로드가 완료되었을 때의 상황을 통제할 수 있다.

 - [method] readAsDataURL => filreader에 파일을 올린다. 

 

 솔직히 아직 이해가 잘 안된다. 그래도 쓰다 보면 알게되겠지 뭐,,

 

- Storage

firebase에 여러 미디어를 저장할 수 있는 구글 클라우드 기반 저장소가 있는데, 이를 bucket이라고 부른다.

    const fileRef = ref(storageService, `${userObj.uid}/${uuidv4()}`);
    const response = await uploadString(fileRef, attachment, "data_url");

구현 코드는 생각보다 간단하다. storage를 정의해준 뒤에 ref함수를 호출, storage와 url을 인자로 넣어주면 하나의 방? 저장소?를 생성한다. 그 뒤에 upload를 진행하면 되는데, 파일의 형식에 따라서 메서드가 다르다. ref, data, data_type 순으로 인자를 넣어주면 된다.

 

5 // Edit Profile

- firestore index

 firestore에서 데이터를 불러올 때 쿼리를 이용하는데

import { query, where, orderBy } from "firebase/firestore";  

const q = query(citiesRef, where("population", ">", 100000), orderBy("country"));

사용할 경우에 다음과 같은 에러를 마주하게 된다.

쿼리를 사용하기 위해서는 각 데이터에 index가 필요하다는 얘기인데, firestore의 db구조는 NoSQL형태이기 때문에 나오는 에러라고 한다. NoSQL는 SQL처럼 엑셀 시트같은 형태(인덱스 정렬)로 데이터를 저장하지 않기 때문에 쿼리를 정상적으로 이용할 수 없다. 그래서 인덱스를 만들어야 하는데, 에러 뒤쪽에 나오는 링크를 눌러주면 자동생성을 할 수 있다!!! (에러를 열심히 읽어봐야 하는 이유)

 결론은 위 코드에서 orderBy 부분을 변경하게 되면 무조건 인덱싱을 다시하게된다는 말씀이다.

 

- React rendering bug

 : 리액트는 데이터가 변경되었을 때 즉각 로드하는 기능이 우수한 프레임워크이다. 그런데 이게 잘 작동하지 않을 때가 있다. 지금 profile edit부분을 작성하는 부분에서 마주한 에러인데, re-rendering을 할 때 넘어오는 데이터 object의 크기가 너무 클 경우에 발생한다고 한다. 지금 상황에서는 FireStore에서 user object가 너무 거대해서 에러가 발생했다고 볼 수 있다.

 코드로 보면

setUserObj(user);

이랬던 코드를

setUserObj({
  displayName : user.displayName,
  uid:user.uid,
  updateProfile:(args) => updateProfile(authService.currentUser, args),
});

이렇게 바꿔주면, user object 전체를 보내는게 아니다 보니 훨씬 가볍게 진행할 수 있다는 거다. 근데 솔직히 마지막 줄에 왜 함수 들어가는지 이해못함. updateProfile은 firestore에 데이터를 업데이트 하는 함수인데 이걸 자동으로 실행하게 해주는건가??? 거기에 arguments가 들어가는거고 그 argument들이 위에 정의한 두가지 인... 머 그런..??? 맞겠지? 강사 선생님 말로는 function for get real function. 우리가 원하는 함수를 얻기 위한 중간단계의 함수라고! 암튼 그렇대!