[항해99 27일차] 2022.04.02 TIL /로그인, 회원가입 기능

<오늘 할 일>

 

1. 2-3 강의 듣기

2. 아침에 청소하기

3. 책 좀 읽기. (모던 자바스크립트)

4. 로그인 회원가입 기능 구현완료하기 ! (이해도 하기!!)

 

강의부터 들으러..고고 !

 

 토큰 기반 인증 [ OAuth2.0 / JWT / 웹 저장소 ] 👈토큰기반인증에 관한 내용과 웹저장소에 대한 내용을 이렇게 정리를 해두었당.

 

날짜를 담당하는 객체

date

let date = new Date();
//Sat Apr 02 2022 09:58:17 GMT+0900 (한국 표준시) {}
date.getTime()
1648861097466
date.setTime(date.getTime()+10000);
1648861107466

하루는

1000밀리초 * 60분 * 24시간

 

shared 폴더에 Cookie.js파일을 만들어서

쿠키 가져오는 거,

쿠키 삭제하는 거,

쿠키 저장하는 거를 만들었다.

 

const getCookie =(name)=>{
    let value= "; "+document.cookie; //가지고옴
    let parts = value.split(`; ${name}=`);

    if(parts.length ===2){ //이때만 실제로 있는 것
        return parts.pop().split(";").shift();
    }
   
};

const setCookie =(name,value,exp = 5)=>{ //이름, 만료일, 값
    let date = new Date();
    date.setTime(date.getTime()+ exp*24*60*60*1000);
    document.cookie= `${name}=${value}; expires=${date.toUTCString()}`;
};
const deleteCookie =(name)=>{
    let date = new Date('2020-01-01').toUTCString();
    console.log(date);
    document.cookie = name + "=; expires="+date;
};
export {getCookie,setCookie,deleteCookie};

 

리덕스 설치하기

# 이건 리덕스와 리덕스 모듈 내에서 경로 이동까지 하게 해줄 히스토리, 라우터와 히스토리를 엮어줄 모듈까지 한번에 설치.
yarn add redux react-redux redux-thunk redux-logger history@4.10.1 connected-react-router@6.8.0

yarn add immer redux-actions

=> 우리가 리덕스 사용할 때 리듀서를 만드는데, 생각보다 귀찮은 작업

액션타입 다 정해주는 데 엄청 길다. 중복되면 안되니까.. 다적고.,

액션 생성 함수 받아온 값으로 액션 객체에 넣어주는 별거 아니지만,, 코드가 길어지면 불편하다.

맨처음에는 생김새때문에 불편하지만, 쓰다보면 편한 아이다.

immer -> 불변성 유지를 편하게 해주는 것

 

덕스구조 

 

import {createAction,handleActions} from "redux-actions"; //액션을 편하게 만들어주는 것, 리듀서를 편하게 만들어주는 것.
import {produce} from "immer"; //불변성 관리

import {getCookie,setCookie,deleteCookie} from "../../shared/Cookie"

//actions 로그인, 로그아웃, 유저정보가져오기
const LOG_IN ="LOG_IN";
const LOG_OUT ="LOG_OUT";
const GET_USER ="GET_USER";

//action creators
// const logIn=(user)=>{
//     return{type:LOG_IN, user}
// }; 아래처럼 간단해짐 
const logIn = createAction(LOG_IN, (user)=>({user}));
const logOut = createAction(LOG_OUT, (user)=>({user}));
const getUser = createAction(GET_USER, (user)=>({user}));

//초기값
const initalState ={
    user:null,
    is_login:false,
};

//리듀서
export default handleActions({
    [LOG_IN] : (state,action)=>produce(state, (draft)=>{
        setCookie("is_login","success");
        draft.user = action.payload.user;
        draft.is_login=true;
    }),
    [LOG_OUT] : (state,action)=>produce(state, (draft)=>{
        
    }),
    [GET_USER] : (state,action)=>produce(state, (draft)=>{
        
    }),
},initalState);
//action creators export
const actionCreateors ={
    logIn,
    logOut,
    getUser,
};
export {actionCreateors};

스토어 만들기 1단계 import

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { createBrowserHistory } from "history";
import { connectRouter } from "connected-react-router";

import User from "./modules/user";

루트 리듀서 만들기

const rootReducer = combineReducers({
  user: User,
});

미들웨어 준비

const middlewares = [thunk];

// 지금이 어느 환경인 지 알려줘요. (개발환경, 프로덕션(배포)환경 ...)
const env = process.env.NODE_ENV;

// 개발환경에서는 로거라는 걸 하나만 더 써볼게요.
if (env === "development") {
  const { logger } = require("redux-logger");
  middlewares.push(logger);
}

리덕스 데브툴즈 설정 -> 안써도 되는데 쓰면 편하다.

const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

미들 웨어 묶기

const enhancer = composeEnhancers(applyMiddleware(...middlewares));

스토어 만들기

let store = (initialStore) => createStore(rootReducer, enhancer);

export default store();

스토어에 히스토리 넣어주기..

export const history = createBrowserHistory();

const rootReducer = combineReducers({
  user: User,
  router: connectRouter(history),
});

// const middlewares = [thunk];
const middlewares = [thunk.withExtraArgument({history: history})];

완성된 스토어 코드스니펫

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import { createBrowserHistory } from "history";
import { connectRouter } from "connected-react-router";

import User from "./modules/user";

export const history =createBrowserHistory();

const rootReducer = combineReducers({
    user: User,
    router:connectRouter(history),
  });

const middlewares = [thunk.withExtraArgument({history:history})];

// 지금이 어느 환경인 지 알려줘요. (개발환경, 프로덕션(배포)환경 ...)
const env = process.env.NODE_ENV;

// 개발환경에서는 로거라는 걸 하나만 더 써볼게요.
if (env === "development") {
  const { logger } = require("redux-logger");
  middlewares.push(logger);
};
const composeEnhancers =
  typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
      })
    : compose;

const enhancer = composeEnhancers(applyMiddleware(...middlewares));

let store = (initialStore) => createStore(rootReducer, enhancer);

export default store();

갑자기 길어져서 당황.

정신이 혼미해진다..나 잘할 수 있겠지?

 

스토어 주입하기

index.js

import React from 'react';
import ReactDOMClient from 'react-dom/client';
import './index.css';
import App from './shared/App';
import { Provider } from 'react-redux';

import store from "./redux/configStore"

const root =ReactDOMClient.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

app.js

import React from 'react';
import './App.css';

import {BrowserRouter, Route} from "react-router-dom";
import { ConnectedRouter } from 'connected-react-router';
import { history } from '../redux/configStore';
import PostList from '../pages/PostList';
import Login from '../pages/Login';
import Sign from '../pages/Sign';
import Header from './Header';
import {Grid} from "../elements"

function App() {
  return (
    <React.Fragment>
      <Grid>
        <Header></Header>
        <ConnectedRouter history={history}>
          <Route path="/" exact component={PostList} />
          <Route path="/login" exact component={Login} />
          <Route path="/sign" exact component={Sign}/>
        </ConnectedRouter>
      </Grid>
    </React.Fragment>
  );
}

export default App;

 

파이어베이스 인증 

 

firebase.js

import firebase from "firebase/app";
import "firebase/auth"

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

firebase.initializeApp(firebaseConfig);

const auth = firebase.auth();

export {auth};

이제 회원가입 기능 할 차례 !!!!

 

회원가입 기능

[React] - 파이어베이스 이용해서 회원가입 기능 구현하기 👈이렇게 정리를 해두었당.

 

로그인기능

[React] - 파이어베이스 이용해서 로그인 기능 구현하기👈이렇게 정리를 해두었당.

 

 

아무래도 한번 재빠르게 듣고 과제 제출한다음에..

한번 더 들어야될 것 같다.

 

허접하지만,

로그인,회원가입 기능 구현완료다..

스타일은 강의 다듣고 내가 수정해야겠당.ㅋㅋㅋㅋ

오늘은 여기까짘ㅋㅋㅋㅋㅋㅋ

오늘은 어머님이 오셨는데 ㅠㅠ난 방에서 공부만했당..

이제 거실로 나가서..대화좀 해야지 ..

 

힘들었다. 😁

 

 

<월요일에 할 일>

1. 2주차 숙제하기

2. 3주차-4주차 강의듣기