내마음대로만들어보자/React 프로젝트 만들기 이해20 [React] 회원가입 구현하기 1. 회원가입 구현하기 적용 순서 firebase.js에 만들어둔 auth 가져오기 리덕스에서 signupFB 함수 만들기 auth.createUserWithEmailAndPassword()로 가입 시키기 Signup 컴포넌트에서 signupFB를 호출! 가입한 후, display_name 바로 업데이트하기 사용자 정보 업데이트 후에 메인 페이지로 이동하기 2. user.js import { createAction, handleActions } from "redux-actions"; import { produce } from "immer"; import { setCookie, getCookie, deleteCookie } from "../../shared/Cookie"; import { auth } fr.. 2021. 11. 28. [React]Firebase Authentication 1. Firebase Authentication 파이어베이스에서 제공하는 인증기능이다. 구글로그인, 페이스북 로그인과 같은 소셜 로그인 뿐만 아니라 파이어베이스에 직접 사용자를 추가, 관리 하는 기능 2.Authentication 설정하기 2-1) 파이어베이스 대시보드 "Authentication" 이메일/비밀번호 항목을 사용설정으로 해준다. 2-2) 파이어베이스 설치하기 # 패키지 설치 yarn add firebase 2-3) shared/firebase.js auth설정하기 import firebase from "firebase/app"; import "firebase/auth"; const firebaseConfig = { // 내 파이어베이스 내 인증정보를 넣어줘야한다. }; firebase.in.. 2021. 11. 28. [React]스토어 주입하기 1. 리덕스와 컴포넌트 연결하기 스토어를 주입할때는 Provider를 쓴다. (index.js 에 주입) 그 다음에는 App.js에서 원래 BrowserRouter와 Route를 써서 컴포넌트에 주입하던 history를 ConnectedRouter를 써서 리덕스랑 같은 history를 사용하도록 해줘야 히스토리를 공유할수있다. 1-1) index.js 에 스토어 주입하기 ... import store from "./redux/configureStore"; import { Provider } from "react-redux"; ReactDOM.render( , document.getElementById("root") ); ... 1-2) App.js ... import { ConnectedRouter } .. 2021. 11. 28. [React]리덕스 스토어 만들기 1. 리덕스 스토어 만들기(rotuer) : configureStore.js * 스토어 만드는 순서 - combineReducers()를 사용해서 export한 reducer를 모아 root reducer를 만들고, (combineReducers()는 reducer를 모아 하나의 reducer로 관리할 수 있게해준다.) - 미들웨어를 적용해주고, - createStore()를 사용해서 root reducer와 미들웨어를 엮어 스토어를 만든다 1-1) import 하기 import { createStore, combineReducers, applyMiddleware, compose } from "redux"; import thunk from "redux-thunk"; // 미들웨어를 사용하면 액션 객체가 .. 2021. 11. 28. 이전 1 2 3 4 5 다음
