$03. Vanilla JS로 로그인 구현

$02. 모달 구현과 fetch API

 

이전 주차에서 fetch API를 사용하는 방법과 회원가입을 구현했다.

이번 주차에는 회원가입된 정보로 로그인을 구현해볼 생각이다.

 

로그인 정보를 fetch로 넘겨줄 때는 이메일과 패스워드만 필요하다.

 

  const inputUserData = {
    email,
    password,
  };

참고로 input 값을 JS로 가져올 때는 .value를 사용해주면 된다.

 

  const email = document.getElementById('email-field').value;
  const password = document.getElementById('password-field').value;

 

Login UI

한 가지 더 주의할 사항은 성공적인 Login의 경우 200을 출력한다는 것이다.

회원가입은 201이었다.

 if (response.status !== 200) {
   alert(data?.message?.[0]);
 }

정상적으로 동작하지 않으면 alert 처리를 해줬다.

 

동작을 확인해볼 임의의 이메일과 닉네임, 패스워드는 다음과 같다.

email : satchi@naver.com
password : satch!1234A
nickname : satchi

 

회원가입 시도

password 조건이 빡세서 처음엔 badrequest로 날라갔다.

대문자를 추가해서 넣어주었다.

 

12번째 아이디였으므로 postman으로 제대로 날라갔는지 확인해준다.

postman

제대로 확인되고 있으므로 이 정보로 로그인을 시행해본다.

 

로그인 시도

로그인 시도가 제대로 맞아떨어졌다.

성공했기 때문에 request.stauts가 200으로 출력됐으며 토큰을 뱉어냈다.

 

토큰은 로그인이 성공했다는 증거이다.

이걸 제대로 넘겨주면, User는 권한을 허용받을 수 있다.

 

이 토큰은 만료기간이 1일이며 다양한 웹 서핑 중에 다시 로그인을 시도해야하는 이유와도 같다.

토큰을 처음봐서 신기했다. 이걸 어떻게 넘겨주는지에 관해서는 다음 학기에 연구해볼 생각이다.