만들어두었던 인스타그램 Login 페이지를 이용하여,
백엔드로 Request를 보내서 회원가입과 로그인을 하는 연습을 했다.
어떤 방식으로 통신이 이루어졌는지 간단한 흐름을 정리해보자.
1. handleLogin( ) 생성
아이디와 패스워드를 입력하고 버튼을 클릭했을 때, 서버로 아이디와 패스워드 값을 전송하게 된다. 따라서 버튼의 onClick 함수에 서버와 연결하는 로직이 들어가야 한다.
2. fetch( )로 서버와 연결
백엔드로부터 어떤 정보가 필요한가?
맨 처음에 프로젝트를 시작하면 백엔드 측에서 API를 정리한 파일을 준다.
API 파일에는 API 주소, HTTP 통신 방식(GET, POST, DELETE), key값 이름, 데이터 형태(String인지, Number인지, 조건은 어떻게 되는지)가 명시되어 있다.
이를 보고 fetch 함수를 구현하면 된다.
fetch 함수 구조
fetch함수의 첫번째 인자로는 api주소가 들어간다.
두번째 인자로는 통신 내용이 들어간다.
method에는 HTTP 통신 종류, body에는 key: value 형식으로 DB에 전송할 데이터를 적어준다. 이 때, key값은 백엔드와 같은 네이밍을 써야 한다.
JSON.stringify( )
body에서 전송할 데이터를 JSON.stringify( )로 감싸주는 이유는, 프론트에서 String 형태로 생성된 데이터를 JSON 형태로 변환하여 보내주기 위해서이다.
.then( )을 사용하는 이유
then은 영어로 '~한 뒤에' 라는 뜻을 가지고 있다.
Javascript는 비동기라는 특징 때문에, 우리가 데이터를 불러오는 시간을 기다려 주지 않고 나머지 코드를 먼저 불러와버린다. 데이터가 늦게 불러와진다면, 데이터를 제대로 받지 못한 상태로 나머지 코드가 실행되는 문제가 발생한다.
이를 해결하기 위해 fetch를 실행하고 나서 즉, 데이터를 완벽하게 보내거나 받고 나서 다음 동작을 실행해야 된다.
그래서 fetch().then().then()의 형태를 띠게 되고, 모든 로직이 위의 함수가 실행되고 나서 순서대로 실행되는 것이다.
첫번째 .then( )
서버와 통신에 성공한다면, fetch가 끝나고 첫번째 then으로 온다.
response.json( )은 서버에서 온 json 형태의 응답을 promise 객체를 반환한다. Promise 객체는 비동기 작업이 종료된 후, 실패했는지 성공했는지 그 결과값을 가지고 있는 객체이다.
두번째 .then( )
promise 객체가 무사히 반환되었다면 로그인에 성공한 것이다.
그러면 서버에서 token 값을 보내준다.
개발자도구 Network 탭에서 Preview에 들어가거나, console.log( )로 response 값을 찍어보면 확인 가능하다.
token값이 있으면 메인으로 가고, 없으면 alert를 띄워준다.
통신 여부 확인
서버에 아이디와 비밀번호 값이 잘 전달되어 DB에 저장되면,
200번대의 Status Code가 표시된다. 400번대가 뜬다면 뭔가 문제가 발생한 것이다.
에러 발생시켜보기
KEY Error
위에서 body에 들어가는 key값은 백엔드와 약속을 해서 동일한 네이밍을 가져야 한다고 했다. 만약 이 key값이 다를 경우, 해당 에러를 띄우게 된다.
Duplicated Error
유저가 이미 DB에 저장된 계정과 동일한 ID를 입력해서 보냈을 때 띄우는 에러이다. DB에서 사용자를 식별하기 위해서 유일한 값을 가져야하는 데이터는
중복되면 안되므로 해당 에러를 띄우는 것이다.
프론트에서는 이를 활용하여 Duplicated Error가 발생했을 때,
'다른 ID값을 입력해주세요'와 같은 알림을 띄워줄 수도 있을 것이다.
