1차 프로젝트 TIL - token, 스토리지, 구조분해 할당

TIL인데 막상 프로젝트 중에 작성하지 못했다. ㅜㅜ
시간이 부족하더라도 공부하는 입장에서 당일에 작성하는게 잊지 않고 머리에 보관하는 방법인데!
분발분발!

구조분해 할당!

const [loginInfo, setloginInfo] = useState({
    emailAddress: '',
    password: '',
  });

  const { emailAddress, password } = loginInfo;

쓸 때는 길지 않게 느껴져도 반복적으로 사용하기에 마지막엔 방대한 양이 줄어들었다.
머리가 안좋으면 몸이 고생한다는 말은 진리다

스토리지에 토큰 담기

const loginFetch = () => {
    fetch(api.fetchLogin, {
      method: 'POST',
      body: JSON.stringify({
        email: emailAddress,
        password: password,
      }),
    })
      .then(res => res.json())
      .then(res => {
        if (res.token) {
          sessionStorage.setItem('loginToken', res.token);
          sessionStorage.setItem(
            'username',
            JSON.stringify(res.username.username)
          );
          navigate('/');
        }
        if (res.message !== 'SUCCESS') {
          alert(ERROR_MESSAGE[res.message]);
        }
        return;
      });
  };

글로 읽으면 이해안되는 나, 멍청이
이 토큰을 담는 부분은 마지막에 추가했는데,
계속 걱정했었따. 어려울 것 같은데 후..
생각보다 어렵지 않았다고 느꼈다. username은 헤더.js에서 사용할 정보다!

const token = sessionStorage.getItem('loginToken');
const username = sessionStorage.getItem('username')

{token ? `Hello, ${username.slice(1, username.length - 1)} `
                      : 'Log In/Register'}
                      

요렇게 스토리지에 담긴 토큰, 유저네임을 가지고
토큰이 있다면 'Hello, $[username} '이 노출된다!
여기서 slice를 해준 이유는 백에서 받아오는 username에 ''가 있어서 빼주려고!!!

없으면, Login/Register가 노출!