React 및 Firebase와 메모 공유 앱 만들기
18747 단어 reactjavascriptfirebasewebdev
Hello 👋
데모
전제 조건
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단계 - 데이터베이스 설정
$ npm install firebase
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
Firestore Database
로 이동rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read, write: if true;
}
}
}
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
읽어 주셔서 감사합니다
Reference
이 문제에 관하여(React 및 Firebase와 메모 공유 앱 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dhairyashah/make-notes-sharing-app-with-react-and-firebase-5dle텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)