1. 트윗 날리는 form 만들기

1. 트윗을 작성하는 form을 만들어 보자.
   트위터에서 트윗을 작성하는 form은 이렇게 생겼다.
   

2. 로그인 후 홈화면에서 위와 같은 화면이 렌더되게 하기 위해 routes/Home.js에 코드를 작성하면 된다.
   

3. useState()를 사용하여 input에서 사용자가 입력하는 value값을 받아오자.

• 이때 onChange 이벤트를 리슨하는 onChange 함수를 통해 사용자가 입력한 value값(트윗 내용)이 setTweet(value)로 업데이트된다.

  • "무슨 일이 일어나고 있나요?" input의 value 값을 state의 값과 동일하게 {tweet}로 설정하여 onChage이벤트 리스너를 통해 업데이트된 최신 state값을 받아오게 한다.

• form의 onSubmit 이벤트를 리슨하는 onSubmit 함수에 event.preventDefault();를 작성하여 사용자가 트윗 내용을 입력 후 트윙클하기를 클릭하여 submit 이벤트가 발생하더라도 페이지가 새로고침되지 않게한다.

📍 routes/Home.js

import React, { useState } from "react";

const Home = () => {
  const [tweet, setTweet] = useState("");
  const onSubmit = (event) => {
    event.preventDefault();
  };
  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    setTweet(value);
    //console.log(tweet);
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          type="text"
          placeholder="무슨 일이 일어나고 있나요?"
          maxLength={120}
          value={tweet}
          onChange={onChange}
        />
        <input type="submit" value="트윙클하기" />
      </form>
    </div>
  );
};

export default Home;

2. Cloud Firestore 데이터베이스 만들기

1. 데이터베이스 만들기를 클릭한다.
   

2. Cloud Firestore의 보안 규칙은 테스트 모드에서 시작을 선택한다.
   

3. Cloud Firesotre 위치를 설정한다. 제일 가까운 곳을 선택하면 된다.

• asia-northeast1: 도쿄
• asia-northeast2: 오사카
• asia-northeast3: 서울
  
  • 참고로 파이어베이스를 유료로 사용하는 경우 asia-northeast 중 asia-northeast3(서울)의 요금이 제일 비싸다고한다.

4. 데이터베이스 사용 준비 완료!
   

3. firebase에서 Database 가져오기

이제 Firebase의 데이터 베이스를 사용할 수 있도록 코드에 가져와야 한다.
fbase.js에 파이어베이스의 데이터베이스를 import하자.

📍 fbase.js

//파이어베이스에서 데이터 베이스 가져오기
import "firebase/database";