client(react)와 server(node.js) 연결하기 - 로그인 하기(클라이언트 부분)

* 인프런의 "따라하며 배우는 노드, 리액트 시리즈 - 기본 강의" 내용 중 정리

 

client 부분 : react를 이용해 로그인 부분 만들기

1) 리덕스(redux, redux-promise, redux-thunk, reducer 사용해 로그인 진행) 설치

2) index.js에 리덕스 연결하기

3) App.js에서 LoginPage 연결하는 링크 만들기

4) component/views단에 loginPage.js 만들기 - 강의에선 먼저 진행됨

5) _reducers 부분 - 로그인 여부 확인 만들기

6) _action 부분 - axios를 이용해 server의 로그인 여부 확인하기

7) 구글 크롬의 "Redux DevTools"로 확인하기

 

 

1) 리덕스(redux, redux-promise, redux-thunk, reducer 사용해 로그인 진행) 설치 - [터미널에서 진행]

//client 폴더 내 package.json에 설치할 것
npm install redux redux-promise, redux-thunk, reducer --save

 

2) index.js에 리덕스 연결하기 - [index.js]

* React 업데이트로 인한 오류 발생 시 참고 : https://ba-gotocode131.tistory.com/100

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { Provider } from "react-redux";
import { applyMiddleware, createStore } from "redux";
import promiseMiddleware from "redux-promise";
import ReduxThunk from "redux-thunk";
import Reducer from "./_reducers"; //index.js, user_reducer 둘 다 읽어옴

const createStoreWithMiddleware = applyMiddleware(
  promiseMiddleware,
  ReduxThunk
)(createStore);

const rootNode = document.getElementById("root");

ReactDOM.createRoot(rootNode).render(
  <Provider
    store={createStoreWithMiddleware(
      Reducer,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  >
    <App />
  </Provider>
);

 

3) App.js에서 LoginPage 연결하는 링크 만들기 - [App.js]

* 원문은 switch로 route를 감싸나 React 업데이트로 오류 발생 

- 해결책 : export 'Switch' (imported as 'Switch') was not found in 'react-router-dom 에러 해결

https://velog.io/@kcdoggo/Switch-is-not-exported-from-react-router-dom-%EC%97%90%EB%9F%AC

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import LoginPage from "./components/views/LoginPage/LoginPage";
const App = () => {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/login" element={<LoginPage />} />
        </Routes>
      </Router>
    </div>
  );
};

export default App;

 

 

4) component/views단에 loginPage.js 만들기 - 강의에선 먼저 진행됨 - [component/views/loginPage.js]

- useDispatch :

                   생성한 action을 useDispatch를 통해 발생시킬 수 있다

                    만들어둔 액션생성 함수를 import한다.

(자세한 설명 : https://juhi.tistory.com/23)

 

import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { loginUser } from "../../../_action/user_action";

function LoginPage(props) {
  const dispatch = useDispatch();

  const [Email, setEmail] = useState("");
  const [Password, setPassword] = useState("");

  const onEmailHandler = (event) => {
    setEmail(event.currentTarget.value);
  };

  const onPasswordHandler = (event) => {
    setPassword(event.currentTarget.value);
  };

  const onSubmitHandler = (event) => {
    event.preventDefault();
    console.log("Email", Email);
    console.log("Password", Password);

    let body = {
      email: Email,
      password: Password,
    };

    //로그인이 성공하는 경우 첫 페이지로 이동
    dispatch(loginUser(body)).then((response) => {
      if (response.payload.loginSuccess) {
        props.first.history.push("/");
      }
    });
  };

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        width: "100%",
        height: "100vh",
      }}
    >
      <form
        style={{ display: "flex", flexDirection: "column" }}
        onSubmit={onSubmitHandler}
      >
        <label>Email</label>
        <input type="email" value={Email} onChange={onEmailHandler} />
        <label>Password</label>
        <input type="password" value={Password} onChange={onPasswordHandler} />
        <button style={{ marginTop: "10px" }}>Login</button>
      </form>
    </div>
  );
}

export default LoginPage;

 

5) _reducers 부분 - 로그인 여부 확인 만들기

① _reducers/user_reducer.js

import { LOGIN_USER } from "../_action/types";

// eslint-disable-next-line import/no-anonymous-default-export
export default function (state = {}, action) {
  switch (action.type) {
    case LOGIN_USER:
      return { ...state, loginSuccess: action.payload };

    default:
      return state;
  }
}

 

②  _reducers/index.js

import { LOGIN_USER } from "../_action/types";

// eslint-disable-next-line import/no-anonymous-default-export
export default function (state = {}, action) {
  switch (action.type) {
    case LOGIN_USER:
      return { ...state, loginSuccess: action.payload };

    default:
      return state;
  }
}

 

6) _action 부분 - axios를 이용해 server의 로그인 여부 확인하기 

 

① _action/user_action.js

import axios from "axios";
import { LOGIN_USER } from "./types";

export function loginUser(dataToSubmit) {
  const request = axios
    .post("/api/users/login", dataToSubmit)
    .then((response) => response.data);

  return {
    type: LOGIN_USER,
    payload: request,
  };
}

 

②_action/types.js

export const LOGIN_USER = "login_user";

 

7) 구글 크롬의 "Redux DevTools"로 확인하기

① npm run dev로 시작하기

(참고 : https://ba-gotocode131.tistory.com/99) 

client(react)와 server(node.js) 연결하기

 

② /login 웹사이트에서 로그인 입력

③ Redux DevTools로 확인하기