문제점

원티드 프리온보딩 챌린지 수업을 듣던 중 axios 라이브러리를 사용하다가 토큰이 저장되지 않아 많은 고민을 하게 되었다.

처음에는 setItem으로 저장하면 될 것이라고 생각했는데 계속 토큰이 저장되지 않았다.

알고보니 getItem(keyname)과 달리 setItem은 localstorage.setItem(keyName, keyValue)를 넣어야했다.

예전 2차 프로젝트에서 카카오 로그인을 진행했을 때 통신시 fetch를 사용했지만 localStorage.setItem('token', data.token); 코드를 넣은 경험이 있어 동일하게 코드를 쳤으나 토큰이 저장되지 않았다.

한참 검색을 한 뒤 stackoverflow의 글을 보게 되어 참고해서 코드를 치니 잘 해결되었다.

최종 작성한 코드

...
  const goToTodoList = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    axios
      .post(
        API.login,
        {
          email: id,
          password: pw,
        },
        {
          headers: {
            'Content-Type': 'application/json',
            Authorization: 'token',
          },
        }
      )
      .then(function (response) {
        localStorage.setItem('token', response.data.token);
        alert('성공적으로 로그인 했습니다');
        navigate('/todolist');
      })
      .catch(function (error) {
        alert('ID 또는 비밀번호가 틀립니다.');
      });
  };
...

느낀점

axios 를 사용하는게 아직은 어색해서 공식문서와 정리된 블로그를 많이 참고해야겠다는 생각이 들었다. axios가 장점이 많아 앞으로 더 많이 사용할 것 같다.

Reference
https://stackoverflow.com/questions/58737652/react-axios-storing-token-in-local-storage
https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem
https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem
https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9#axios-vs-fetch