사이트에서 필수적인 요소인 '로그인'과 '회원가입'. 오늘의 주제를 통해 프론트와 백앤드의 통신하는 방법에 대해 알아보자.
access token
액세스 토큰은 성공적으로 로그인 했음을 증명하는 암호문 형태의 일종의 '입장권'이다.
프론트와 백은 서로 통신하기 위해 HTTP통신을 이용한다. HTTP의 특징 중 중요한 것이 'stateless',즉, '상태가 없다'는 것인데 이 특징때문에 'access token'이 필요하다. 예를들어, 로그인 페이지에서 로그인을 해서 유저인증을 받고, 다른 페이지로 이동을 했다 . 하지만 'stateless' 특징때문에 다음 HTTP통신에서 내 유저정보를 알 수가 없는 것이다. 이때 프론트가 access token을 통해서 로그인 유무의 여부에 대해서 저장하여 브라우저 관리를 한다. 이 액세스 토큰을 이용해서 많은 일들을 할 수 있어 ID와 비밀번호를 넘겨주는 것과 비슷하다.
access token 저장하기
회원가입한 정보로 로그인이 성공하면 백에게 jwt(Json Web Token의 약자로 access token을 만드는 방법 중 하나)로 만들어진 access token을 받는다. 프론트는 토큰을 저장했다가 사용자 정보가 필요한 api를 호출할 때 해당 토큰을 주어야 한다.
이때 브라우저에 access token을 저장해야하는데 저장하는 공간은 3가지가 있다.
첫번째, local storages는 해당 도메인에 영구 저장하고 싶을 때 사용한다.
두번째, Session Storage는 해당 도메인의 한 세션에서만 저장한다. 창을 닫으면 data가 날라간다.
세번째, cookie는 해당 도메인에 구체적으로 설정한 날짜까지만 저장한다.
fetch 함수
백앤드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답받는데, 이 때 자바스크립트 Web API fetch() 함수를 통해 작업을 실행할 수 있다.
loginAccess = (e) => {
e.preventDefault();
const { emailVal, password } = this.state;
if (emailVal && password.length > 0) {
fetch(`${apiAddress}/user/login`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
email: this.state.email,
password: this.state.password,
}),
})
.then((res) => {
if (res.status === 400) {
alert("다시 한 번 확인해주세요!");
} else if (res.status === 200) {
alert("로그인성공");
this.props.history.push("/");
}
})
.then(response => {
if (response.token) {
localStorage.setItem('wtw-token', response.token);
}
.catch((error) => console.log(error.message));
}
};
fetch함수의 기본 모양은
fetch('api 주소')
.then(res => res.json())
.then(res => {
// data를 응답 받은 후의 로직
});
api를 요청하고 응답이 들어왔을 때, .then이후가 실행된다. 응답이 오면 response.json()를 통해 json데이터를 js로 변환하기 위해 한번 더 요청한다. js변환 후 두번째 .then을 통해 응답을 받은 후의 로직이 실행된다.method: 데이터를 보낼 것인지(post), 받을 것인지(get), 삭제할 것인지(delete)의 형태를 알려준다.header: fetch에게 컨텐츠타입을 제이슨형태로 넘겨줄 것이라고 알려줘야 한다.body: 유저의 어떤 정보를 데이터로 넘길 것인지 알려준다. 이때 JSON.stringify메소드를 사용하여 인자로 전달된 자바스크립트의 데이터를 문자열로 변환한다.
-localStorage.setItem을 이용해 localstorage에 키 값을 access-token으로 access token을 저장한다.
-저장하고 있다가 사용자 정보가 필요한 api에 보내 그 페이지에서 필요한 정보를 서버로부터 받는다.
