TIL #32 - React 로그인 회원가입 api 연동

Sarang Lee·2021년 2월 9일
7

React

목록 보기
7/9
post-thumbnail

HTTP 통신은 stateless한 특성을 갖고 있기 때문에 api를 호출할 때 상황에 따라 사용자의 정보를 보내주어야 한다. 그러므로 로그인 여부에 대해 지속적으로 알기 위해서는 access token이 필요하다.


왜 아이디와 비밀번호를 직접 들고 있지 않을까?

보안이 필요한 정보이기 때문에 직접 쓰는 것이 아닌 비밀번호, 이메일, 핸드폰 번호 등이 제외된 유저 정보로 가공된 형태의 token을 사용한다. (JWT - json web token)


백엔드에서 token을 보냈을 때 받을 수 있는 공간에는 세 가지 종류가 있다.

Storage 종류

  • Local Storage : 해당 도메인에 영구 저장

  • Session Storage : 해당 도메인의 한 세션에만 저장

  • Cookie : 해당 도메인에 시간 설정하여 이후 파기되도록 저장

이때 기간 설정 및 관리가 꼭 쿠키에서만 가능한 것은 아니며 access token의 기한을 백엔드에서도 설정할 수 있다. 또한 백엔드에서 기간이 지난 token을 받은 경우 프론트엔드에 기간으로 인한 응답을 줄 수 있다.

이렇게 토큰은 특정 저장소에 localStorage.setItem('access_token'), localStorage.getItem('access_token') 과 같이 JS method를 이용해 storage에 저장하고 저장된 토큰을 다시 꺼내온다.


만약 mypage 등 유저 정보가 없을 경우 페이지 진입 자체가 불가능하거나 관련 데이터를 불러올 수 없는 경우 클라이언트 쪽에서 token을 보내주게 된다. 그럼 백엔드에서 token을 받아서 해독을 한 후 해당 유저의 정보를 json 형태로 보내주게 된다.



HTTP 통신을 이용한 회원가입, 로그인 구현

보통 유저가 회원가입을 할 경우 자신의 정보를 입력한 후 버튼을 이용해 submit을 하게 된다. 이때 클라이언트 (front-end)가 서버에 해당 정보를 body에 담아 리퀘스트를 보내면 리스폰스가 오게 되는데 이때 사용되는 함수가 바로 fetch이다.

fetch method

서버에 요청을 보낼 때 쓰이는 method에는 GET, POST, PUT, DELETE 등이 있다. (GET은 fetch의 default method이기 때문에 생략이 가능하다.)


로그인과 회원가입을 할 때 사용되는 method는 바로 POST이다. POST method는 body에 사용자의 데이터를 담아 보내주게 된다. 이때 body는 객체 형태로 되어 있기 때문에 백엔드에 필요한 정보를 제대로 보내주기 위해서는 key값을 서로 맞추어 주고 받아야 한다. 그리고 HTTP 통신 규약에 따라 body에 데이터를 넣을 때에는 JSON 파일을 string 형태로 변환하는 stringify를 이용해 보내주어야 한다.


이렇게 보내진 데이터는 비동기 처리 .then을 통해 데이터가 보내진 후 돌아왔을 때 어떻게 할 것인지 설정해주어야 한다.

  1. 우선 프론트에서 stringify해서 데이터가 보내졌던 것과 마찬가지로 response로 온 데이터는 string 형태이기 때문에 json 데이터로 변환해주어야 한다.

  2. 그 후 변환된 json을 result라고 봤을 때 돌아온 값의 message가 "SUCCESS"이면 회원가입이 성공된 것이고 그렇지 않다면 회원가입 실패라고 뜨게 된다.


실전

회원가입 fetch 함수

로그인 fetch 함수


백엔드 분과 통신을 시도할 당시 fetch가 제대로 이루어지지 않아서 계속 확인해보았는데 결과적으로 문제는 2가지였다.


1. 서로 주고자 하는 / 받고자 하는 데이터의 갯수가 달랐다.

실무적으로 그런 일은 없겠지만, 그 당시 각자 공부해온 내용을 토대로 만들다보니 프론트와 백이 합의 하에 만들어진 것이 아니었기 때문에 백엔드에서 필수로 요구하는 데이터 갯수와 프론트에서 보내는 데이터의 갯수가 달랐다.

그렇기 때문에 처음 그 갯수 값에 문제가 있었을 때, 차이가 있음에도 불구하고 DB에서 null값을 주어 회원가입이 가능했지만, 다음 사람이 연결하게 되며 이미 null값을 사용했기 때문에 DB에서 데이터를 더 이상 받아주지 않았다..ㅜㅜ 해당 문제를 발견 후 백엔드분께서 한명씩 연결해볼 때마다 데이터를 삭제해주셔서 시도해볼 수 있었다.


2. 로그인할 때 받은 result의 token을 받는 과정에서 key 이름을 백엔드와 동일하게 쓰지 않아서 로그인을 실패했었다.

body의 key값 뿐만 아니라 돌아온 데이터의 내부 key값도 꼭꼭 신경써서 맞추어야 한다는 점을 다시 한번 상기할 수 있었다.


그리고... 스타벅스와 같은 공공 wifi에서는 api통신을 하지 말자. 왜 될거라고 생각한거지..? 처음에는 왜 안되는지 모르고 이것 저것 시도해보다가 핫스팟을 이용해 연결해봤더니 됐다.



첫 통신으로 받은 나의 소중한 토큰들...

profile
UX에 관심 많은 개발 초보 Front-end Developer

0개의 댓글