[모각소] 조금이라도 더 편한 개발을 위해

JWT(Json Web Token)란 정보 보호의 목적보다 사용자의 인증, 위조방지를 위해서 사용한다.

클라이언트에서 로그인을 진행하면, 서버는 토큰을 발급해준다. 이 토큰을 localstorage나 sessionstorage에 저장을 한 다음, 권한이 필요한 매 요청마다 header에 서버에서 원하는 key값으로 토큰값을 같이 보내며 권한을 확인하게된다.

코드를 작성하다 매 요청마다 localStorage나, sessionStorage에 저장해 놓은 토큰을 가져와 헤더에 담는 과정을 반복하다 보니, 이러한 과정을 하나의 함수화시키기로 하였다. 그러면서, 추가적으로 필요한 정보들또한 parameter로 받고 하다보니 "추상화"에 대해서 어느정도 알 것 같았다.

해당 함수를 만들 때, 먼저 왜? 라는 생각을 하게된다. 그리고 불편함을 인지하고 코드를 split하기로 했으니 어떠한 인자(argument)가 필요한가, 생각하게되고 해당 과정에서 필요한 부분만 가져가게 되며 가독성도 좋아지게 되었다.

const request = async(method, url, data) => {
	const header = {
    	access_token: localStorage.getItem("token");
    };
    
    return axios({
    	method,
        url,
        data,
        headers: header
    }).then((res) => {
    	return res.data;
    }).catch((e) => console.err(e));
}

이런식으로 서버에 요청하는 코드를 함수화 시키고 나니, 사용하기가 한결 편해졌다.

const res = await request("GET", "url/getData");

위와 같은 방법으로 서버에 요청을 보내게된다면 이전에 생성해놓은 request함수내에서 token값을 찾아 서버에 요청하기 때문에 기존에 매번 token값을 찾던 방법보다 백배는 편해진 기분이었다.