나의 로그인 페이지 코드와 백엔드가 만나는 로그인을 하는 경험을 했다! 상당히 기다렸던 세션이라 너무 재밌었고 신기했다.

로그인 과정

1. 사용자가 아이디를 입력하면 Email Input의 onChange 함수가 실행된다.
2. onChange 함수에서 Email Input의 value를 setState를 통해 업데이트한다.
3. 비밀번호 입력하면 Password Input의 onChange 함수가 실행된다.
4. onChange 함수에서 Password Input의 value를 setState를 통해 업데이트한다.
5. Button을 클릭하면 onClick 함수가 실행된다.
6. onClick시에 fetch 함수가 실행되어 server에 요청(Request)를 보낸다.
7. server에서 인증 / 인가 과정을 거친 후의 결과를 응답(Response)으로 보내준다.
8. 응답 결과에 따라 Main페이지로 가거나 에러 메세지를 리턴한다.

loginValid = () => {
  if( this.state.id.length > 5 
    && this.state.id.includes("@")
    && this.state.password.length > 5) {
    fetch("http://10.58.1.122:8000/account/login", {
 	method: "POST",
    	body: JSON.stringify({
            email: this.state.id,
            password: this.state.password
          }),
        })
        .then((response) => response.json())
        .then((res) =>  this.checkResult(res))
      }
      else {
        alert("다시 시도해주세요")
      }
    }

자바스크립트 fetch API를 이용하여 비동기 HTTP 요청을 보낼 수 있다.

fetch의 첫번째 인자는 API 주소, 두번째 인자는 http 통신의 관한 내용이 들어간다.

• method는 GET, POST 등 http method를 입력한다. 여기기서는 로그인 입력 정보를 body에 넣어서 보내기 위해 POST를 사용했다.

• 통신을 할 때 string 형태의 JSON으로 보내야 하기 때문에 JSON.stringify() 메소드를 통해 기존 Object에서 String으로 변환한다.

통신은 타 로직에 비해 오래 걸리기 때문에 비동기 처리되어 then 메소드를 사용한다.

.then((response) => response.json())

첫 번째 then에서 server에서 보내준 response를 JSON 형태로 변환하다.

.then((res) =>  this.checkResult(res))

두 번째 then에서 JSON으로 변환된 response를 checkResult() 콜백 함수를 통해 결과를 반환하다.

checkResult = (res) => {
    if(res.message === "SUCCESS") {
      localStorage.setItem("token", res.token)
      this.goToMain();
    } else {
      alert("우리 회원이 아닙니다.")
    }
  } 

백엔드로 부터 받은 response message가 "SUCCESS"라면 localStroage에 token 값을 저장한 후 메인페이지로 이동하고 이외의 메세지를 받았다면 alert를 리턴한다.

통신 후기

통신을 위한 코딩 이후 백엔드 동기들과 만났다. 기대했던 응답 코드 200은 역시 바로 만나지 못했다..! ㅋㅋ
별의 별 400, 401, 500 응답들을 다 받았다. 그래도 다양한 응답 메세지를 받아보고 서로 피드백 하면서 결국 200을 받았을 때 리얼 너무 좋았다.
★ 프/백 서로 통신을 위한 key 값이 똑같은지 체크하기!

모두 200 길만 걷자~~!!!