211112 TIL (Troubleshooting)

오늘 한 일 & 배운 것

일단 이번주에 맡은 기능은 다 하였고, 중간발표를 위해서 머지 후에 배포를 준비하였다.
어떤 어려운 점이 있었고 ,그것을 해결하는 과정을 정리 할 필요가 있었다.

이메일, 닉네임 중복확인

• 이메일,닉네임 중복체크를 자동으로 서버에 요청하는 기능을 만들었지만 이메일,닉네임을 입력시 발생하는 리랜더링으로 인해서 입력한 글 자 수만큼 요청이 생겼었다. 그래서 debounce를 이메일,닉네임에 줘서 서버의 요청을 최소화 하도록 수정하였음.

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

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

로그인한 사용자, 로그인 안한 사용자 구분

• 처음에는 리덕스에 initialState를 isLgoin = false로 정하고 useSelector를 사용해서 true,false를 체크하였다.

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

• 이런식으로 로그인한 사용자가 로그인,회원가입 페이지로 가게 되면 자동으로 메인으로 이동시켰다.하지만 이방식도 문제가 발생하였다.
• 어떤 문제가 생겼나?

1. 로그인 안한 사용자가 url(없는주소) 에 직접 입력 할 시 빈화면이 나타남.
2. 로그인도 하지 않았는데 체크를 하다보니 불필요한 서버요청이 많아짐.

• 해결을 위한 시도
  • Route를 PublicRoute(로그인 유저) PrivateRoute(로그인 된 유저) 로 나누어서 라우터 안에서 토큰의 유무를 판단해서 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페이지를 만들어서 Switch안에서 가장 마지막에 넣었는데, 그위에 바텀네비게이션 컴포넌트가 있는데 이 컴포넌트 때문에 작동을 안하는거 같았다. 바텀네비게이션을 좀 더 세분화를 하던지, 예외처리를 해야 될 꺼 같은데 당장 중간발표라서 일단 보류 하였다.

2. 모든 url을 입력할 시에 "/" 첫화면으로 보이게 끔 코드를 구성하였다. 이 경우에 로그인이 되어있으면 main페이지로 가게끔 처리를 하였다. 하지만 이런경우에 예를 들어서 "/main" ➡️ "/" ➡️ "/main" 이런식으로 페이지가 이동 되서 불필요한 랜더링이 발생되었다. 이건 임시방편이라 개선해야될 부분이다.

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

내일 할 일

• 중간발표 자료 정리 및 다른 조 발표,피드백 듣기
• 다음주에 할 일들 정리

오늘의 명언

걱정은 절대로 내일의 슬픔을 빼앗지 않으며 단지 오늘의 기쁨만을 약화시킬 뿐이다.

• 래오F.버스카글리아