[TIL] 20210627 - 항해 21일차

Jihyun·2021년 6월 27일

Firebase React TIL(Today I Learned)article 항해99

항해99

목록 보기

19/46

3주차 일요일 :)

오늘 공부한 것

react 기본 강의 - week5(firebase)

1. serverless & Firebase
서버리스는 서버가 없는 것이 아니라 "서버에 신경을 쓰지 않아도 된다"는 의미로 받아들이라고 배웠다:)

서버리스의 대표적 서비스인 firebase의 공식 사이트에 들어가보면, 수많은 서버의 기능들을 제공하고 있는 걸 볼 수 있다.
빌드, 테스트, 분석 등 정말 다양하다.

2. Firestore
Firebase의 Firestore 기능을 사용해봤다.

Firestore는 '유연하고 확장 가능한 NoSQL 클라우드 데이터베이스'다.

다행히 지난 미니프로젝트 때 사용한 MongoDB와 같은 형태라 사용하는데 어려움이 없었다.
collection과 document(JSON형식)만 기억하면 아주 사용하기 쉽다✨

3. react에서 firebase-firestore 사용하기
firebase를 사용하려면 firebase 패키지를 설치해야 한다.

yarn add firebase

// firebase.js
import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
	// 파이어베이스에서 앱 추가를 하면 나오는 config를 복사 붙여넣기 하면 된다.
};

firebase.initializeApp(firebaseConfig);

const firestore = firebase.firestore();

export {firestore};

// App.js
import {firestore} from "../../firebase";

const bucket = firebase.collection(//collection명);
  
// set
bucket.doc("bucket_item1").set({text: "---", completed: false});

// add
bucket.add({text: "---", completed: false});

// get(document 하나만)
const bucket_item = bucket.doc("bucket_item1").get();

// get(여러 document)
bucket.get().then((docs => {
  let bucket_list = [];
  docs.forEach((doc) => {
  if (doc.exists) {
    bucket_list = [...bucket_list, {id: doc.id, ...doc.data()}];
  }
}
               
// update
bucket.doc("bucket_item1").update({completed: true});

// delete
bucket.doc("bucket_item1").delete();

4. redux-thunk
redux-thunk는 리덕스를 사용하는 어플리케이션에서 비동기 작업을 할 때 쓰는 미들웨어다.

thunk는 특정 작업을 나중에 하기 위해 함수 형태로 감싼 것을 의미한다.

따라서 redux-thunk는 비동기 작업을 위해 함수를 생성하는 액션 생성함수를 작성할 수 있게 해 준다.

기존의 액션 생성함수는 다음과 같이 객체를 생성·반환한다.

const CREATE = "bucket/CREATE";

const createBucket = (bucket) => ({type: CREATE, bucket});

하지만 redux-thunk를 이용하면 함수를 생성·반환한다.

const createBucketFB = (bucket) => {
  return function (dispatch) {
    let bucket_item = { text: bucket, completed: false };
    bucket_db
      .add(bucket_item)
      .then((docRef) => {
        bucket_item = { ...bucket_item, id: docRef.id };
      })
      .then((res) => dispatch(createBucket(bucket_item)));
  };
}

article

React 18 변경점

벨로그 인기글에서 발견한 react 18 관련 글.

사실 전부 이해하지는 못했지만 흥미로운 점이 많았고, 새롭게 알게 된 개념들도 있었다.

1. HTML Streaming
서버에서 html을 보내 주는 것을 HTML Streaming이라고 한다.
전통적 SSR에서는 html을 하나의 파일로 받아야 했지만 React 18에서는 html 코드를 작은 조각으로 나누어 보내고 받을 수 있게 되었다고 한다.

따라서 렌더링이 오래 걸리는 컴포넌트만 제외하고 먼저 다른 부분을 보여줄 수 있어서 사용자 경험에 큰 도움이 될 것 같다.

2. selective hydrating
hydration: 이벤트핸들러 같은 JS코드들이 html에 동화되는 것

HTML Streaming에서 렌더링이 오래 걸리는 컴포넌트를 제외하고 보여줄 수 있는 것처럼 hydration도 다른 부분부터 적용할 수 있게 되었다고 한다.

3. state batch update
batching: 업데이트 대상이 되는 상태값들을 한 번의 리렌더링에 모두 업데이트가 진행되도록 해주는 것

기존에는 한 함수 안에서만 가능했다고 한다.
하지만 React 18에서는 기존에 불가능 했던 setTimeout, promise 등에서 모두 가능해졌다.

이 기능은 createRoot를 사용한 Concurrent 모드에서 가능한 것으로 보인다.

createRoot를 공식문서에서 보면 Concurrent 모드라는 것을 찾을 수 있는데, 아직은 실험적인 기능으로 아직 사용하기에는 불안정할 것 같다는 느낌을 준다.

그래도 향후 안정적인 기능으로 자리 잡는다면 성능 개선에 아주 도움이 되는 친구일 듯 하다.