no image
[API 비동기 통신! 이렇게 해보자] 02 - axios interceptor로 토큰 재발급 받기
웹 개발을 할 때 사용자 인증을 위해 서버로부터 token을 발급받는 방식을 많이 사용하게 됩니다. 사용자가 로그인한 상태에서 무언가 요청을 보낼 때, 사용자 권한이 필요한 요청이라면 token을 header에 실어 api 호출을 하게 되죠. 이 때, 유효하지 않은 token을 보내거나, 서버에서 설정한 token 만료 시간이 지났을 때 에러가 납니다. 그 중, 필연적(?)으로 맞딱뜨릴 수 밖에 없는 에러가 ‘토큰 인증 만료’입니다. 보통 토큰을 사용하여 사용자 인증을 처리할 때는 서버에서 Access Token과 Refresh Token이 두 가지를 발급합니다. 보안의 목적을 위해 Access Token의 만료 기간은 짧게 설정하여 자주 재발급 받아야 하지만, 그 때마다 사용자를 로그아웃 시키고 사용자..
2023.11.01
no image
[API 비동기 통신! 이렇게 해보자] 01 - Axios instance 만들기
프론트엔드 개발 시, 서버 API 호출이 필요한 경우 Fetch와 Axios 중 무엇을 더 많이 사용하시나요? 저는 개발 공부를 시작했을 코린이 시절부터 지금까지 Axios를 쓰고 있습니다. Fetch()는 자바스크립트에서 제공해주는 메소드로 따로 외부 패키지를 설치할 필요가 없습니다. Axios는 브라우저와 node.js 환경에서 비동기 통신을 위한 라이브러리로 따로 패키지 설치가 필요합니다. 개발을 할 때 보통 라이브러리를 최대한 많이 안쓰자는 주의이지만 Axios는 항상 쓰고 있습니다. 하지만 처음에는 그냥 Axios가 좋다는 말을 주워듣고 막 쓰기 시작했습니다. Axios의 강점을 효율적으로 사용하지도 못하면서요. 아래가 예전에 제가 작성했던 방식의 코드로 참 비효율적입니다..😅 //React 컴..
2023.05.12