211112 TIL (Troubleshooting)

今日やったこと&学んだこと

まず、今週担当した機能が完成しました.
何か困ったことがあったら、その解決過程をまとめる必要があります.
電子メール、重複ニックネームの確認

Eメールを作成し、サーバにニックネームチェックの繰り返しを自動的に要求する機能ですが、Eメール、ニックネームの入力時に発生した再ログインによるリクエスト数は入力した文字数と同じです.だから私はdebonseを電子メールにあげて、ネット名、サーバーの要求を最小化するように修正しました.

const debounceEmail = _.debounce((e) => {
    setUserInfo({ ...userInfo, email: e.target.value });
  }, 500);

  const debounceNick = _.debounce((e) => {
    setUserInfo({ ...userInfo, nickname: e.target.value });
  }, 500);

ログインユーザーと未ログインユーザーの区別

最初にRidexでInitialStateをisLgoin=falseに設定し、UserSelectorを使用してtrue、falseをチェックします.

const isLogin = useSelector((state) => state.user.isLogin);
React.useEffect(() => {
    dispatch(loginCheck());
    if (isLogin) {
      window.alert("로그인중입니다!메인화면으로 이동할게요. ");
      history.push("/main");
    }
  }, [isLogin]);

このように登録したユーザは、登録・会員登録ページに入ると自動的にホームページにアクセスする.しかし異郷の食道にも問題があった.

で何か問題がありましたか?

にログインしていないユーザーがurl(アドレスなし)に直接入力すると、空の画面が表示されます.

は登録されていませんが、チェックされた結果、不要なサーバリクエストが多くなりました.

ソリューションの試み

ルーティングを共通ルーティング(ログインユーザ)と専用ルーティング(ログインユーザ)に分け、ルータ内でトークンが存在するか否かを判断してtrue、false値に分け、トークンが存在する場合は登録ユーザに分け、トークンがない場合は未登録ユーザに分ける.
設定したユーザーがログインするページにログインすると自動的にログインページに入ります.

//PublicRoute
import React from "react";
import { Route, Redirect } from "react-router-dom";

// 로그인 안했을때 접근 할 수 있는 컴포넌트

const PublickRoute = ({ component: Component, ...rest }) => {
  // 로컬 스토리지 토큰 확인
  const isToken = localStorage.getItem("USER_TOKEN") ? true : false;

  return (
    <Route
      {...rest}
      render={(props) =>
        isToken ? <Redirect to="/main" /> : <Component {...props} />
      }
    />
  );
};

export default PublickRoute;

//PrivateRoute
import React from "react";
import { Route, Redirect } from "react-router-dom";

// 반드시 로그인을 해야만 접근 할 수 있는 컴포넌트

const PrivateRoute = ({ component: Component, ...rest }) => {
  // 로컬 스토리지 토큰 확인
  const isToken = localStorage.getItem("USER_TOKEN") ? true : false;
  return (
    <Route
      {...rest}
      render={(props) =>
        isToken ? <Component {...props} /> : <Redirect to="/login" />
      }
    />
  );
};

export default PrivateRoute;

2番の問題は解決しましたが、1番の問題はまだ解決していません.

メソッド
1.スイッチの最後に配置するNotFoundページを作成します.この構成部品のために動作しないようなデータムナビゲーション構成部品があります.さらにデータムナビゲーションを細分化するか、例外処理を行うかのいずれかであるが、中間発表であるため一時的に保留している.

のすべてのurlを入力すると、コードは「/」の最初の画面に整理されます.この場合、ログインを処理してホームページにアクセスさせる.しかし、この場合、例えば「/main」\\\/「/main」のようなページが移動し、不要なレンダリングが発生する.これは適当な方法で、改善しなければならないところです.

	</PrivateRoute>
  </Switch>
 <Redirect from="*" to="/" />

明日やること

期中発表整理とその他のグループ発表、聴取フィードバック

来週することを整理する

今日の名言

心配は明日の悲しみを奪うことはなく、今日の楽しみを弱めるだけだ.

レオF.バスカグリア