TIL. login 이대로 괜찮은가?

아무것도 모르고 그냥 fetch만 주구장창 했었던 적이있었다.

작동하니까! response message 에서 SUCCESS 가 떴으니까!
이런마음으로 로그인과 회원가입을 했었다. 그러면서 매번 프로젝트를 할때마다 회원가입 로그인을 얼른 끝내고 다른 멋진 기능들을 구현하고 싶었다.

주니어 개발자로서 뭐가 중요할까 곰곰히 생각을 해봤는데 엄청난 기능을 개발하고 구현하는것도 기본을 할 줄 아는 주니어 개발자가 더 중요하다고 생각이들었다.

지금까지 총 3개의 프로젝트를 하면서 공통적으로 했던게 로그인 회원가입인데 지금까지 잘 했다고 말할 수 있을까? 재미없으니까 빨리 해치우고 넘겨야겠다 라고 했던 내 자신이 창피해졌다.

다시말해 내 기준에서 가장 기본이라고 느끼는 로그인 회원가입을 제대로 못했다면 지금까지 했던게 의미가 있을까? 하는 생각이 들었다.

이전까지 로그인을 위해 구현한 코드는 아래와 같다.

  const fetchLogin = () => {
        fetch(`${BASE_URL}/signin`, {
          method: 'POST',
          body: JSON.stringify({email,password}),
        })
          .then(res => res.json())
          .then(res => {
            localStorage.setItem('access_token', res.access_token);
            alert('로그인에 성공했습니다');
            return goToMasterPage();
          })
          .catch(err => console.log(`err`, err));
    }

이 전에는 이 코드에 이상함을 못느꼈다. access_token이 왔고 저장해서 로그인이 되었다고 생각했다. 이때 넘어왔던 status code를 생각해보면 201였다.
무지했던 나는 201이면 성공이야! 라고 생각하며 로그인이 끝났다고 생각했다.
물론 프로젝트 기간이 2주뿐이고 구현해야할 기능이 많아서 넘어갔다고 하지만 그래도 많이 놓치고 있었다.

201코드는 MDN에서 'HTTP 201 Created성공 상태 응답 코드는 요청이 성공하여 리소스를 생성했음을 나타냅니다' 라고 나온다. 즉, 로그인에 성공한게 아니라 요청을 성공적으로 했다는 뜻이다.

치킨 배달을 시키고 주문이 성공적으로 접수되었다는 메세지를 치킨이 집까지 배달 완료되었습니다로 착각하고 진행했던것이다.

그럼 결국 201 코드는 내가 받아야할 코드가 아닌 좀 더 기다렸다가 200코드를 받아야하는건데 어떻게 받야하는걸까

response 의 status code 를 이용하면 된다. 아니면 async await 를 사용하면된다.
즉, 뭔가 조건이 더 필요하다는뜻이다. 조건에 충족이되었을때 비로소 로그인 성공 처리를 해야하는것이다.

const fetchLogin = async () => {
    const { employee_number, password } = userInfo;

    try {
      const res = await axios.post(
        `${BASE_URL}/signin`,
        {
          employee_number,
          password,
        },
        {
          headers: {
            'Content-Type': 'application/json',
          },
        }
      );
		if (res.status === 200) {
        localStorage.setItem('token', res.data.token);
        history.push('/calendar');
      }
    } catch (err) {
      switch (err.response.status) {
        case 401:
          alert('You do not have permission to access.');
        default:
          alert('Please check the employee number and password.');
          break;
      }
    }
  };

이렇게 두가지를 사용하면 진짜 로그인을 할 수있다.