TIL no.37 - 로그인 API 통신
나의 로그인 페이지 코드와 백엔드가 만나는 로그인을 하는 경험을 했다! 상당히 기다렸던 세션이라 너무 재밌었고 신기했다.
로그인 과정
- 사용자가 아이디를 입력하면
Email Input
의onChange
함수가 실행된다. onChange
함수에서Email Input
의value
를setState
를 통해 업데이트한다.- 비밀번호 입력하면
Password Input
의onChange
함수가 실행된다. onChange
함수에서Password Input
의value
를setState
를 통해 업데이트한다.- Button을 클릭하면
onClick
함수가 실행된다. onClick
시에fetch
함수가 실행되어 server에요청(Request)
를 보낸다.- server에서 인증 / 인가 과정을 거친 후의 결과를
응답(Response)
으로 보내준다. - 응답 결과에 따라 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 길만 걷자~~!!!
Author And Source
이 문제에 관하여(TIL no.37 - 로그인 API 통신), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@playck/TIL-no.37-로그인-API-통신저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)