JS' 공부흔적

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (3) - Firestore를 사용하여 데이터 다루기 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (2) - Firebase를 사용하여 이메일 로그인 구 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 지금까지 만든 프로그램을 직접 배포하는 방법에 대해 다룬다. 우선, 콘솔에 들어가서 Hosting을 클릭한 후 시작하기를 누른다. 아래 명령어를 입력한다. npm i -g firebase-tools firebase login fire..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (2) - Firebase를 사용하여 이메일 로그인 구 [Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 Firebase에서 제공하는 DB인 Firestore를 사용하여 간단한 데이터를 저장하고 불러오고 삭제하는 것을 다룬다. Firestore 기본 설정 우선, 콘솔에서 Firestore Database를 클릭하여 데이터베이스를 만든다. 프로덕션 모드에서 시작을 선택하고 다음을 누른..

[Firebase] Firebase, React를 사용한 간단한 프로그램 만들기 (1) - Firebase와 React 연동하기 앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다. 이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다 2junsu.tistory.com 이전 글에 이어서 이번 글에서는 이메일을 사용한 회원가입 및 로그인 기능을 구현해 보자. 공식문서 링크는 여기 기본 설정 우선 전에 만들었던 test 프로젝트를 눌러서 콘솔로 이동한 후에 Authentication을 클릭하고, 이메일/비밀번호를 클릭한다. 그리고 이메일/비밀번호 사용 설정에 체크한 후 저장을 누른다. 이제 이메일로 회원가입/로그인을 구현하기 위한 준비..

앞으로 4편에 걸쳐서 파이어베이스와 리액트를 사용하여 아주아주 간단한 프로그램을 만들어보는 글을 작성할 예정이다. 이번 글에서는 파이어베이스와 리액트를 연동하는 것에 대해 다루겠다. 우선 리액트 프로젝트를 만들어 준다. npx create-react-app test 그리고 파이어베이스에 접속하여 로그인 후에 콘솔로 이동하여 "프로젝트 추가"를 누른다. 프로젝트 이름을 입력하고 넘어간다. 그 다음으로는 Google 애널리틱스 사용 설정이 나오는데, 나는 그냥 설정에 체크하고 넘어갔다. Google 애널리틱스 사용 설정을 했다면 Google 애널리틱스 구성이 나오는데, Default Account for Firebase를 선택한 후 넘어간다. "프로젝트 만들기"를 누르고 프로젝트 생성을 완료한다. 그러면 아..

Firestore에서 데이터를 불러오려고 하는데 아래와 같은 에러가 발생했다. 이를 해결하는 방법은 우선 해당 Firebase Console로 이동한다. 그리고 아래와 같이 Firestore Database를 클릭한다. 아래와 같이 규칙 탭에 들어간다. 아래 코드에서 false를 true로 바꿔주면 에러가 해결된다!

React에서 Firebase를 연결해 로그인 기능을 구현하던 중, API KEY가 유효하지 않다는 에러가 발생했다. auth/api-key-not-valid.-please-pass-a-valid-api-key. .env 파일을 생성하여 아래와 같이 관련된 값들을 저장한 후에 firebase-config 파일에서 불러다 쓰고 있었다. REACT_APP_FIREBASE_API_KEY = ... REACT_APP_FIREBASE_AUTH_DOMAIN = ... REACT_APP_FIREBASE_PROJECT_ID = ... REACT_APP_FIREBASE_STORAGE_BUCKET = ... REACT_APP_FIREBASE_MESSAGING_SENDER_ID = ... REACT_APP_FIREBASE_..