상황 Firebase 에 생성한 유저를 데이터베이스에 저장하기 위해 firebase/database 의 set 함수, ref 를 이용해 데이터베이스에 저장하는 도중 다음 오류를 만나게 되었다. RegisterPage.jsx const onSubmit = async (data) => { try { setLoading(true); const createdUser = await createUserWithEmailAndPassword(auth, data.email, data.password); console.log(createdUser); const updatedUser = await updateProfile(auth.currentUser, { displayName: data.name, photoURL: `ht..
사용 이유 react-bootstrap 은 css 프레임워크입니다. 리액트를 지원하는 CSS 프레임워크의 종류는 많은데요. Material UI React Bootstrap Semantic UI Ant Design Materialize 이런 CSS 프레임워크들을 사용하는 이유 중 가장 큰 이유는 좀 더 기능을 만드는 데에 집중하기 위해서가 아닐까 싶습니다. 왜냐하면, 훨씬 CSS 스타일링 작업이 편해지기 때문이죠. 사용하기 main.jsx (...) import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.createRoot(document.getElementById('root')).render( (...) ); 서비스의 가장 root 폴더가 되는 파일 main..
1. Firebase 사이트로 이동 https://firebase.google.com/?hl=ko Firebase | Google’s Mobile and Web App Development Platform 개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요. firebase.google.com 2. go to Consol 클릭 3. 프로젝트 생성하기 4. web 에 들어가 app 등록하기 5. SDK 복사 후, firebase.js 에 붙여넣기 firebase.jsx // Import the functions you need from the SDKs you need import { initializeApp } fr..
Firebase 사용하는 이유 파이어베이스의 프로젝트를 생성한 다음, 파이어베이스랑 현재 1인 프로젝트로 진행중인 채팅서비스, Slackbase 앱이랑 연결해줄 겁니다. 파이어베이스를 이용해서 아래와 같은 앱의 구조를 이용해 앱을 만들어 볼 예정입니다. 보통 실시간 앱을 만들 때, 파이어베이스를 사용하지 않고, 예를 들어 Node.js 와 socket.io 라이브러리를 사용한다면, 아래와 같은 구조가 될 것 같습니다. 하지만, 파이어베이스를 이용한다면, 더 간단하게 구현이 가능합니다. 그 이유는 파이어베이스를 보면, 파이어베이스는 여러가지 서비스를 제공합니다. 데이터베이스 노티피케이션 푸시기능 푸시알림기능 배포 스토리지 등등 대부분의 앱을 만들 대 필요한 부분들을 자동으로 만들어 주는 플랫폼입니다. 그렇..
