React

Firebase with React react에서 firebase를 활용하는 방법 firebase SDK를 설치하거나 웹상에서 설치없이 사용하는 방법은 firebase 기본을 참조 인증 (Auth) firebase 로 계정 생성 및 로그인 firebase API를 import하여 사용 <AppFirebase.js> import firebase from "firebase/compat/app"; import "firebase/compat/auth"; const firebaseConfig = { apiKey: process.env.REACT_APP_API_KEY, authDomain: process.env.REACT_APP_AUTHDOMAIN, projectId: process.env.REACT_APP_PROJECTID, storageBucket: process.env.REACT_APP_STORAGEBUCKET, messagingSenderId: process.env.REACT_APP_MESSAGINGSENDERID, appId: process.env.REACT_APP_APPID }; export default firebase.initializeApp(firebaseConfig); export const authService = firebase.auth(); AppFirebase.js 를 활용하여 business logic에 필요한 로그인 / 회원가입 기능을 구현 <Auth.js> import { authService } from "../components/AppFirebase"; const data = await authService.createUserWithEmailAndPassword(email, password) // email, passwd로 계정 생성 const data = await authService.signInWithEmailAndPassword(email, password) // email, passwd로 로그인 createUserWithEmailAndPassword / signInWithEmailAndPassword 실행 이후 authService.currentUser를 참조하면 user 정보를 받아올 수 있다. 하지만, authService.currentUser 정보를 갱신하는데는 시간이 걸린다. firebase API에서는 observer를 등록하여 currentUser의 변경 시점을 확인할 수 있다. currentUser 변경시점에 특정함수 동작 user 정보가 갱신된 시점에 특정 동작을 원한다면, 아래와 같이 onAuthStateChanged 함수를 사용하면 된다. authService.onAuthStateChanged((user) => { /* something to do */ }}); 로그아웃 authService.signOut() 함수를 호출하여 로그아웃이 가능하다. 참고로 크롬 웹 디버깅 화면에서 ‘Application’탭에 들어가서 IndexedDB -> firebaseLocalDb 안의 내용을 🚫버튼으로 삭제해 주면 로그인 정보가 사라진다. 에러 authService의 함수(createUserWithEmailAndPassword, signInWithEmailAndPassword, …) 사용시 에러가 발생할 수 있으므로, try, catch문으로 묶어서 사용한다. try { let data data = await authService.createUserWithEmailAndPassword(email, password) } catch(error) { console.log(error.code) // 에러의 원인이 코드 형태로 출력된다. console.log(error.message) // 에러의 원인이 메시지 형태로 출력된다. } ref) 오류발생 원인 ...

React basic 개발환경 설치 및 실행 node.js 로 만들어진 create-react-app 툴을 이용하면 손쉽게 react 앱을 생성할 수 있다. npm을 설치하고 아래 명령어를 수행하여 create-react-app을 설치한다. npm install -g create-react-app 원하는 경로에 들어가 프로젝트를 생성한다. create-react-app <NAME> : NAME 경로에 프로젝트 생성 주의 : 프로젝트가 생성되는 폴더명은 대문자를 사용할 수 없다. 실행 npm run start 를 수행하면 localhost:3000에서 웹페이지를 퍼블리싱한다. 기본 설정 실행 포트 package.json 파일에서 "proxy": "http://localhost:3000/" 과 같이 입력하면 실행시 포트를 3000으로 설정할 수 있다. 기본 구조 /public/index.html 에서 기본 화면 구성 ‘root’ 이름으로 된 division이 있는데, 이 division에 대한 설정은 javascript로 정의되어있다. src 경로에 javascript파일들 구성 ‘index.js’ 에 메인 화면에 사용된 객체가 정의되어 있다. 아래 내용은 id가 ‘root’ 인 division에 ‘App’을 적용하겠다는 의미이다. ...