React 및 Firebase와 메모 공유 앱 만들기

Hello 👋

데모





전제 조건


  • React JS에 대한 기본 이해
  • 노드 JS

  • 1단계 - 반응 앱 생성




    $ npx create-react-app@latest mynoteapp
    


    2단계 - TextArea 생성




    <textarea id="txt" cols="30" rows="10" placeholder="Enter some text!" value={text} onChange={e => setText(e.target.value)} onKeyDown={keySound}></textarea>
    


    *스타일링*🌈

    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      height: 100%;
      overflow: hidden;
    }
    textarea{
      width: 100%;
      height: 100vh;
      resize: none;
      margin: 5px;
      font-size: 25px;
      outline: none;
      border: none;
    }
    


    이제 Textarea는 윤곽선과 경계선 없이 전체 페이지를 덮습니다.

    3단계 - dat.gui를 사용하여 설정 메뉴 추가


  • 다음을 사용하여 data.gui 설치,

  • $ npm i dat.gui
    


  • Textarea.js로 가져오기

  • import * as dat from 'dat.gui';
    


  • 초기화dat.gui

  • const gui = await new dat.GUI({hideable: false});
    


  • 개체 만들기

  • const obj = {
                fontSize : 25,
                fontFamily : 'monospace',
                saveFile: () => {
                    const btn = document.querySelector('#saveBtn')
                    btn.click()
                }
            }
    


  • 옵션 추가
    1) 글꼴 크기

  •  gui.add(obj, 'fontSize').min(8).max(60).step(1).onChange(e => {
                document.querySelector('textarea').style.fontSize = `${e}px`
            })
    


    2) 폰트 패밀리

    gui.add(obj, 'fontFamily', {
                'Monospace': 'monospace',
                'Roboto': 'Roboto',
                'Poppins': 'Poppins',
                'Cursive': 'Cursive',
            }).onChange(e => {
                document.querySelector('textarea').style.fontFamily = e
            })
    


    3) 저장 버튼

    gui.add(obj, 'saveFile')
    


    그러면 페이지의 오른쪽 상단 모서리에 GUI 패널이 생성됩니다.



    4단계 - 데이터베이스 설정


  • Google Firebase Console로 이동
  • 새 프로젝트를 만들고 원하는 대로 이름을 지정하십시오
  • 새 웹 응용 프로그램 만들기

  • react 애플리케이션에 firebase를 설치합니다.

  • $ npm install firebase
    


  • 자격 증명을 복사하고 React 애플리케이션
  • fireabse.js 디렉토리에 src를 만듭니다.
    firebase.js
    import firebase from "firebase/compat/app"
    import "firebase/compat/firestore"
    
    const firebaseConfig = {
        apiKey: "YOUR_API_KEY",
        authDomain: "YOUR_AUTH_DOMAIN",
        projectId: "YOUR_PROJECT_ID",
        storageBucket: "YOUR_STORAGE_BUCKET",
        messagingSenderId: "YOUR_MESSAGING_ID",
        appId: "YOUR_APP_ID"
      };
    
    
    const app = firebase.initializeApp(firebaseConfig);
    
    const db = app.firestore();
    
    
    export default db
    


  • 이제 Firebase 프로젝트로 다시 돌아갑니다
  • .
  • Firestore Database로 이동

  • 데이터베이스 생성
  • 생산 모드 선택
  • 원하는 위치를 선택하세요
  • 데이터베이스를 생성한 후 대시보드의 규칙 탭으로 이동합니다.

  • 다음 코드를 규칙 놀이터에 붙여넣고 게시합니다.

  • rules_version = '2';
    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write: if true;
        }
      }
    }
    


  • 이제 React 프로젝트로 돌아가십시오
  • .
  • Textarea.js로 이동하여 database 가져오기

  • import db from '../firebase'
    


  • 만들기 save function

  • const handleSave = async () => {
            let slug = tinyid.unique()
            keySound()
            let today = new Date();
            const dd = String(today.getDate()).padStart(2, '0');
            const mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
            const yyyy = today.getFullYear();
            today =  dd + '/' + mm + '/' + yyyy
            await db.collection('notes').doc(slug).set({
                text: text,
                date: today,
            })
            navigate(`/${slug}`)
        }
    


    슬러그를 생성하려면 다음을 사용할 수 있습니다tiny-unique-id.
  • 생성된 메모 로드 중

  • useEffect(() => {
            const handleLoad = async () => {
                const doc = await db.collection('notes').doc(slug).get()
                setText(doc.data().text)
            }
            handleLoad()
        }, [slug])
    


    전체 소스 코드를 확인하십시오: https://github.com/codewithsnowbit/notes-share-react


    읽어 주셔서 감사합니다
  • Twitter에서 나를 팔로우하세요 -
  • YouTube에서 저를 구독하세요 -
  • 좋은 웹페이지 즐겨찾기