React, Firebase 및 Ant를 사용하여 웹 어플리케이션의 신속한 프로토타입 설계

이 안내서에서 Firebase, React, Ant Design, PostgreSQL을 구축 블록으로 사용하여 기능성 하이파이 웹 응용 프로그램을 구축하는 방법을 보여 드리겠습니다.이 점을 설명하기 위해서, 우리는 업무 목록 프로그램을 구축하는 예시를 통해
웹 개발에 사용할 수 있는 도구가 이렇게 많아 마비될 지경이다.어떤 서버를 사용해야 합니까?어떤 프런트엔드 프레임워크를 선택하시겠습니까?일반적으로 가장 익숙한 기술을 사용하는 것이 좋습니다.일반적으로, 이것은 전투 테스트를 거친 데이터베이스를 선택하는 것을 의미합니다. 예를 들어 MySQL 또는 Adonis, 웹 서버에 MVC 프레임워크를 선택하고, 이 프레임워크의 렌더링 엔진을 사용하거나 클라이언트javascript 라이브러리, 예를 들어 ReactJS 또는 AngularJS을 사용합니다.
상술한 방법을 사용하면 효과가 있다. 특히 좋은 샘플 파일이 있다면, 하지만 거의 0의 설정 시간으로 뭔가를 신속하게 구축하고 싶다면?때때로 모델은 고객에게 충분한 정보를 전달하지 못한다.때때로 너는 신제품을 위해 매우 빠른 MVP를 세우고 싶다.
이 예시의 원본 코드는 here에서 얻을 수 있다.이 안내서에서 좋은 IDE를 찾으려면

Create React App을 사용한 React 개발 환경

React은 사용자 인터페이스를 구축하는 데 사용되는javascript 라이브러리입니다.이 라이브러리는 구성 요소 기반입니다. 이것은 구성 요소를 만들고 다시 사용할 수 있는 구성 요소를 바탕으로 인터페이스를 조합할 수 있음을 의미합니다.한편 Create React App은 제로 구성 React 환경입니다.셸 명령을 통해 상자를 열면 사용할 수 있으며, 환경을 최신 상태로 유지합니다.
시작하려면 Node를 설치합니다.설명 here에 따라 시스템에 js를 설치하십시오.
그런 다음 새 Create React 응용 프로그램 프로젝트를 시작합니다.

npx create-react-app quick-todo && cd quick-todo

이제 다음 도구를 사용하여 개발 웹 서버를 실행할 수 있습니다.

npm start

브라우저에서 http://localhost:3000/에 액세스하면 다음을 볼 수 있습니다.

너무 좋아요.이제 기능적인 React 개발 환경이 생겼습니다.

Firebase와 애플리케이션 통합

이제 React 개발 환경이 생겼습니다. 다음 단계는 Firebase를 응용 프로그램에 통합하는 것입니다.Firebase의 핵심 제품은 실시간 데이터베이스 서비스입니다.이것은 사용자가 페이지를 새로 고치지 않아도 응용 프로그램 상태의 업데이트를 볼 수 있다는 것을 의미한다. 사용자가 별도의 노력을 기울이지 않아도 이 점을 실현할 수 있다.
https://firebase.google.com으로 가서 계정을 만드세요. 만약 당신이 아직 없다면.그리고 quick-todo이라는 새 Firebase 프로젝트를 만듭니다.
Firebase 프로젝트가 생기면 "클라우드 Firestore"데이터베이스를 제공합니다.



여기서 우리는 데이터베이스에서 비신분 검증을 사용한다. 왜냐하면 우리는 원형을 구축하고 있기 때문이다.진정한 응용 프로그램을 구축할 때, 적합한 security rules을 만들고 싶지만, 지금은 걱정할 필요가 없습니다.
알겠습니다. 현재 Firebase 데이터베이스가 설정되었습니다. 이 데이터베이스를 React 응용 프로그램에 통합하겠습니다.프로젝트 디렉터리에서 다음 명령을 실행하여 필요한 의존 항목을 설치합니다.

npm i --save firebase @firebase/app @firebase/firestore

그리고 프로젝트에 src 디렉터리에 firestore.js이라는 새 파일을 추가합니다. 그 내용은 다음과 같습니다.

firestore。회사 명

import firebase from "@firebase/app";
import "@firebase/firestore";

const config = {
  apiKey: "<apiKey>",
  authDomain: "<authDomain>",
  databaseURL: "<databaseURL>",
  projectId: "<projectId>",
  storageBucket: "",
  messagingSenderId: "<messageingSenderId>"
};

const app = firebase.initializeApp(config);
const firestore = firebase.firestore(app);

export default firestore;

자신의 프로젝트에 apiKey 및 기타 매개 변수를 삽입해야 합니다.항목 설정에서 다음 옵션을 찾을 수 있습니다.

좋다현재 firestore.js 유틸리티를 가져오면 응용 프로그램의 모든 위치에 있는 실시간 Firebase 데이터베이스에 액세스할 수 있습니다.

import firestore from "./firestore";

Ant Design 설치

Ant Design은 전체 React 구성 요소를 포함하는 전면적인 설계 시스템이다.React는 구성 요소를 기반으로 하기 때문에 Ant Design의 React 구성 요소를 구축 블록으로 사용하여 원형을 신속하게 조립하는 것은 상당히 간단하다.
Ant Design용 React 구성 요소 시스템을 시작하려면 antd을 설치합니다.

npm i --save antd

이 모든 것을 한데 모으다

우리는 현재 원형을 구축하는 데 필요한 모든 도구를 가지고 있다.우리 환경을 이용하여 todo 응용 프로그램의 고화질 원형을 구축합시다.
우선 역사를 씻자.App.js 및 App.css을 수정하여 다음과 같이 보십시오.

응용 프로그램.회사 명

import React, { Component } from "react";

import "./App.css";

class App extends Component {
  render() {
    return <div className="App" />;
  }
}

export default App;

응용 프로그램.반테러 정예

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

antd에 css를 가져오는 방법을 주의하십시오.
이제 todo 응용 프로그램에 기본 구조를 설정합시다.이를 위해 antd Layout 구성 요소를 사용할 수 있습니다.

응용 프로그램.회사 명

import React, { Component } from "react";
import { Layout } from "antd";

import "./App.css";

const { Header, Footer, Content } = Layout;

class App extends Component {
  render() {
    return (
      <Layout className="App">
        <Header className="App-header">
          <h1>Quick Todo</h1>
        </Header>
        <Content className="App-content">Content</Content>
        <Footer className="App-footer">&copy; My Company</Footer>
      </Layout>
    );
  }
}

export default App;

응용 프로그램.css

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

.App-header h1 {
  color: whitesmoke;
}

.App-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

이러한 변경을 통해 우리는 개발 서버를 실행할 수 있다.너는 반드시 이런 씨앗을 파종해야 한다.

현재 우리는 우리가 이전에 만든 firestore.js 모듈을 이용하여 실시간 Firebase 데이터베이스에 TODO를 추가할 수 있다.Firebase Cloud Firestore here을 사용하는 방법에 대한 자세한 내용을 볼 수 있습니다.
소스 코드에 대한 다음 변경 사항을 살펴보겠습니다.

응용 프로그램.회사 명

import React, { Component } from "react";
import { Layout, Input, Button } from "antd";

// We import our firestore module
import firestore from "./firestore";

import "./App.css";

const { Header, Footer, Content } = Layout;

class App extends Component {
  constructor(props) {
    super(props);
    // Set the default state of our application
    this.state = { addingTodo: false, pendingTodo: "" };
    // We want event handlers to share this context
    this.addTodo = this.addTodo.bind(this);
  }

  async addTodo(evt) {
    // Set a flag to indicate loading
    this.setState({ addingTodo: true });
    // Add a new todo from the value of the input
    await firestore.collection("todos").add({
      content: this.state.pendingTodo,
      completed: false
    });
    // Remove the loading flag and clear the input
    this.setState({ addingTodo: false, pendingTodo: "" });
  }

  render() {
    return (
      <Layout className="App">
        <Header className="App-header">
          <h1>Quick Todo</h1>
        </Header>
        <Content className="App-content">
          <Input
            ref="add-todo-input"
            className="App-add-todo-input"
            size="large"
            placeholder="What needs to be done?"
            disabled={this.state.addingTodo}
            onChange={evt => this.setState({ pendingTodo: evt.target.value })}
            value={this.state.pendingTodo}
            onPressEnter={this.addTodo}
          />
          <Button
            className="App-add-todo-button"
            size="large"
            type="primary"
            onClick={this.addTodo}
            loading={this.state.addingTodo}
          >
            Add Todo
          </Button>
        </Content>
        <Footer className="App-footer">&copy; My Company</Footer>
      </Layout>
    );
  }
}

export default App;

응용 프로그램.css

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

.App-header h1 {
  color: whitesmoke;
}

.App-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

.App-add-todo-input {
  max-width: 300px;
  margin-right: 5px;
}

.App-add-todo-button {
}

이러한 변경을 통해 현재 응용 프로그램에 새 TODO를 추가할 수 있는 입력이 있음을 알 수 있습니다.

추가 TODO는 UI에 표시되지 않지만 Firebase 데이터베이스를 탐색하여 추가 TODO를 볼 수 있습니다!

기능이 완비된 업무 응용 프로그램의 마지막 단계는 업무 목록을 표시하고 사용자가 그것을 완성할 수 있도록 하는 것이다.이를 위해 Ant 설계의 List 구성 요소를 사용하여 불완전한 TODO를 표시할 수 있습니다.다음 소스 코드를 예로 들 수 있습니다.

응용 프로그램.회사 명

import React, { Component } from "react";
import { Layout, Input, Button, List, Icon } from "antd";

// We import our firestore module
import firestore from "./firestore";

import "./App.css";

const { Header, Footer, Content } = Layout;

class App extends Component {
  constructor(props) {
    super(props);
    // Set the default state of our application
    this.state = { addingTodo: false, pendingTodo: "", todos: [] };
    // We want event handlers to share this context
    this.addTodo = this.addTodo.bind(this);
    this.completeTodo = this.completeTodo.bind(this);
    // We listen for live changes to our todos collection in Firebase
    firestore.collection("todos").onSnapshot(snapshot => {
      let todos = [];
      snapshot.forEach(doc => {
        const todo = doc.data();
        todo.id = doc.id;
        if (!todo.completed) todos.push(todo);
      });
      // Sort our todos based on time added
      todos.sort(function(a, b) {
        return (
          new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
        );
      });
      // Anytime the state of our database changes, we update state
      this.setState({ todos });
    });
  }

  async completeTodo(id) {
    // Mark the todo as completed
    await firestore
      .collection("todos")
      .doc(id)
      .set({
        completed: true
      });
  }

  async addTodo() {
    if (!this.state.pendingTodo) return;
    // Set a flag to indicate loading
    this.setState({ addingTodo: true });
    // Add a new todo from the value of the input
    await firestore.collection("todos").add({
      content: this.state.pendingTodo,
      completed: false,
      createdAt: new Date().toISOString()
    });
    // Remove the loading flag and clear the input
    this.setState({ addingTodo: false, pendingTodo: "" });
  }

  render() {
    return (
      <Layout className="App">
        <Header className="App-header">
          <h1>Quick Todo</h1>
        </Header>
        <Content className="App-content">
          <Input
            ref="add-todo-input"
            className="App-add-todo-input"
            size="large"
            placeholder="What needs to be done?"
            disabled={this.state.addingTodo}
            onChange={evt => this.setState({ pendingTodo: evt.target.value })}
            value={this.state.pendingTodo}
            onPressEnter={this.addTodo}
            required
          />
          <Button
            className="App-add-todo-button"
            size="large"
            type="primary"
            onClick={this.addTodo}
            loading={this.state.addingTodo}
          >
            Add Todo
          </Button>
          <List
            className="App-todos"
            size="large"
            bordered
            dataSource={this.state.todos}
            renderItem={todo => (
              <List.Item>
                {todo.content}
                <Icon
                  onClick={evt => this.completeTodo(todo.id)}
                  className="App-todo-complete"
                  type="check"
                />
              </List.Item>
            )}
          />
        </Content>
        <Footer className="App-footer">&copy; My Company</Footer>
      </Layout>
    );
  }
}

export default App;

응용 프로그램.css

@import "~antd/dist/antd.css";

.App {
  text-align: center;
}

.App-header h1 {
  color: whitesmoke;
}

.App-content {
  padding-top: 100px;
  padding-bottom: 100px;
}

.App-add-todo-input {
  max-width: 300px;
  margin-right: 5px;
}

.App-add-todo-button {
}

.App-todos {
  background-color: white;
  max-width: 400px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}

.App-todo {
  /* position: relative; */
}

.App-todo-complete {
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  right: 24px;
}

이러한 마지막 변경 사항은 응용 프로그램에 추가된 TODO 목록을 볼 수 있습니다.

우리 드디어 찾았어!React, Firebase, Ant 디자인을 사용하면 고화질 웹 응용 프로그램을 신속하게 만들 수 있습니다.이 도구들을 사용하면 짧은 시간 안에 기능성, 미관을 창조하는 데 도움을 줄 수 있다.
응용 프로그램을 구축하는 데 너무 많은 시간을 들이지 않고 다른 사람에게 응용 프로그램의 기능을 보여 주어야 할 때, 이것은 매우 가치가 있을 수 있다.
이 안내서는 도구를 사용하여 원형을 신속하게 구축하는 데 중심을 두었지만, 이러한 방법은 생산이 완료된 웹 응용 프로그램을 만드는 데도 사용할 수 있다고 생각합니다.Ant Design can be themed 및 Firebase는 확장성이 뛰어납니다.
기존 웹 서버에서 Firebase를 사용하는 유일한 문제는 비용입니다.사용자가 많은 응용 프로그램에 대해 Firebase는 곧 비싸질 수 있다.그러나 전통적인 웹 서버와 데이터베이스 방법을 사용하면 숙주 비용이 비싸질 수 있다.또한 웹 서버와 데이터베이스를 구축, 구성 및 관리하는 시간과 비용도 고려해야 합니다!
최초로 nrempel.com에 출판되었다