항해 99 - 2022.03.12.SAT (기술멘토링 & 로그인 유지)

이번 챕터 일정

• 02/26 기획 회의 ✅
• 02/28 알고리즘 스터디 발제 ✅
• 03/01 1차 기획멘토링 ✅
• 03/05 1차 기술 멘토링  ✅
• 03/09 2차 기획 멘토링 ✅
• 03/12 2차 기술 멘토링 ✅
• 03/16 3차 기획 멘토링
• 03/19 중간 점검
• 04/09 최종 발표회 

오늘 내가 할 일 

• 사이드바 로그인 회원가입 작업 완료 ✅
• 로그인 유지 ✅
• 디자인 나와서 전체 모달창 작업 완료 ✅

난 이제 정말 모달 창의 달인이 돼버렸다....
지난 클론 코딩 주차부터 쌓아왔던 경험이 한 번에 포괄 ㅋㅋㅋㅋ
모달 창은 이제 그냥 눈감고도 만드는 지경 
사실 첨엔 컴포넌트로 쪼개는 것도 무서워서 호 달달이었는데
이젠 너무 잘하는 중 

 

<로그인 유지>

• 로그인 시 서버에서 받아온 로그인 정보를 리덕스에 저장한다. 
• 하지만 리덕스는 휘발성이기 때문에 새로고침을 하면 로그인이 유지가 안된다. 
  • 방법 1 ) 지속적으로 서버에 로그인 유지가 되는지 요청한다
  • 방법 2 ) 로그인 시 전달받은 토큰 값을 로컬 스토리지에 저장해서 확인하는 방법

<지속적으로 서버에 로그인 유지 요청을 보내기>

  useEffect(()=>{
    dispatch(userActions.logInCheckDB())
  },[])

//로그인 체크 미들웨어
const logInCheckDB = () => {
  return function (dispatch, getState, { history }) {
    apis.loginCheck().then((res) => {
      if (!res.data.isSuccess) {
        alert('회원정보가 올바르지 않습니다.');
        history.replace('/main');
        return;
      }
      const user = res.data.data.user;
      dispatch(
        setUser({
          ...user,
        })
      );
    })
    .catch((err)=>{
      console.log(err.response)
      alert("로그인 후 이용 가능 합니다")
      history.replace("/main")
    })
  };
};

• 최 상위에 있는 App.js에 useEffect를 사용해서 페이지가 로딩될 때마다 로그인 체크 요청을 보내기로 하였다. 
• 서버에 요청을 보내서 로그인된 사용자 인지 아닌지 구분하도록 했다. 

 

<전달받은 토큰 값을 로컬 스토리지에 저장해서 확인하기>

//로그인 미들웨어
const logInDB = (origin, pwd) => {
  return function (dispatch, getState, { history }) {
    apis
      .login(origin, pwd)
      .then((res) => {
        alert("로그인에 성공하였습니다!")
        localStorage.setItem('login-token', res.data.data.token);
        dispatch(setUser({ origin }));
        window.location.reload('/main')
      })
      .catch(function (error) {
        console.log(error)
        alert(error.response.data.msg);
      });
  };
};

const is_login = localstorage.getItem("login-token")

is_login ? 로그아웃 : 로그인

• 저장된 토큰 값을 이용해서 사이드바, 메뉴바에 로그인과 로그아웃을 표시하고 유지하게 함 

 

• 나는 지금 이 두 번째 방식에서 좀 더 나아가 다른 방식으로 로그인을 유지하고 있다. 
• 어차피 최 상위 App.js에서 로그인 체크가 지속적으로 불리고 있다는 점을 활용해서 
• 차라리 useSelect의 리덕스의 값을 체크하는 게 어떨까라는 생각이 들었다. 
• 로그인 체크가 지속적으로 불리고 dispatch를 통해서 리덕스에도 저장되고 있기 때문이다. 
• 우리는 아이디가 user에 origin으로 들어오기 때문에 이렇게 작성해서 로그인 유지를 하고 있다. 

const user = useSelector((state) => state.user.user);

user.origin ? 로그아웃 : 로그인

 

 

 

 

<2차 기술 멘토링>

• 유지보수를 위해
  • 하나의 useEffect()에는 하나의 기능만 작동하도록 코드를 짜는 것이 좋다
  • +우리가 짠 코드는 하나의 useEffect에 여러 기능이 합쳐져 있었음
• 비디오의 key가 가장 바깥에 있어야 함?
• 오류 메시지: “Each child in a list should have a unique key prop.
• Check the render method of Detail.js.”
• +map 돌릴 때 Index 값을 같이 주는 방법은 어떤지?
• 👉 이후 다른 사용자로 바뀔 때는 Index 값도 바뀌어야 하는데 map을 돌릴 때  Index 값을 줘버리면 같은  Index 값이 고정되어있으므로 좋은 방법이 아님