소개

전회의 기사에서는 「 계산기」의 실장을 했습니다.
그 후 이하의 재미있는 기사와 동영상을 발견했으므로, 조속히 참고로 해 LINE풍의 Chat 기능의 일부를 구현해 보았습니다!

React & Firebase로 간단한 Chat 앱을 만들어 보았습니다.

Firebase가 있다면 서버 측 엔지니어가 필요하지 않습니다.

단번에 전부 쓰면 굉장히 길어질 것 같기 때문에【준비편】,【Component편】,【상태 관리편】의 3부 구성으로 해 기사를 쓰고 싶습니다. 이번은 【준비편】입니다!

마지막 기사
『React』+『Redux』로 iPhone에 들어있는 것 같은 계산기를 만들어 보자!

다음 기사
『React』+『Redux』+『Firebase』로 LINE풍의 Chat 기능을 만들자! 【Component편】

완제품

준비편

연례 create-react-app

terminal에서 다음 명령을 입력합시다!

$ create-react-app chat
$ cd chat
$ yarn start

네! 이제 React를 사용하여 응용 프로그램을 만들 준비가되었습니다!


create-react-app 모르는 사람은 이 기사에

React로 HelloWorld를 해보자!

필요한 패키지 설치

이번에 필요한 패키지는

redux

react-redux

@material-ui/core

@material-ui/icons

firebase

입니다.

Material-UI는 머티리얼 디자인을 React 애플리케이션에 도입할 수 있는 UI 컴포넌트입니다. Material-UI를 사용하면 간편하게 Google의 머티리얼 디자인을 답습한 애플리케이션을 만들 수 있습니다.


즉시 설치합시다!

yarn add redux react-redux @material-ui/core @material-ui/icons firebase

Firebase

Firebase는 빠르고 고품질의 모바일 앱을 개발할 수 있는 플랫폼으로 개발에 도움이 되는 수많은 기능을 제공합니다. 이번에는 'Hosting'과 'Realtime Database'를 사용했습니다!

신경이 쓰이는 사용법

htps : // 푹 빠져라. 오, ぇ. 이 m/? hl = 그럼로 이동하여 Google 계정으로 로그인하여 콘솔 화면으로 이동합니다.

프로젝트 추가를 눌러 원하는 프로젝트 이름을 입력하세요!

이것으로 프로젝트가 완성되었습니다!

웹 앱을 추가하려면 앱에 원하는 닉네임을 입력합니다.


이제 SDK을 얻을 수 있습니다.

Firebase Realtime Database와의 연결

firebase/config.js를 만들고 Firebase와의 연결 정보를 제공합니다.

src/firebase/config.js

export const firebaseConfig = {
  apiKey: "****************",
  authDomain: "****************",
  databaseURL: "****************",
  projectId: "****************",
  appId: "****************",
  storageBucket: "****************",
  messagingSenderId: "****************"
};

firebase/index.js에서 데이터베이스 참조를 위한 인스턴스를 만듭니다.
이 파일을 가져오면 어디서나 데이터베이스에 액세스할 수 있습니다.

src/firebase/index.js

import firebase from 'firebase';
import {firebaseConfig} from './config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebaseApp.database();

이것으로 준비 완료입니다!

다음 번에

「Material-ui」를 사용해 Component를 작성해, 어플리케이션의 외형을 정돈해 갑니다!

참조

React & Firebase로 간단한 Chat 앱을 만들어 보았습니다.

Firebase가 있다면 서버 측 엔지니어가 필요하지 않습니다.

mBaaS의 대본명 구글의 Firebase를 시험해 보았다! 기본편

【React】Material-UI로 React 어플리케이션을 머티리얼 디자인화