axios

이미지 업로드가 느려 사용자에게 로딩 중임을 알려줄 로딩 UI가 필요했다. 이미지를 업로드하는 과정에서 시간이 걸려, 사용자가 이미지가 업로드되는 동안 아무런 표시가 없어 이미지가 업로드되고 있음을 인식하기 어려웠다. 그래서 사용자에게 업로드 중임을 명확히 알리기 위해서 로딩 UI가 필요했다. 나는 이미지 업로드 시 상단에 progressBar를 통해 업로드 진행률을 표시하기로 결정했다. spinner, skeleton 등 로딩 UI 중에 progressBar를 선택한 이유는 다른 UI를 가리지 않고 전역에서 로딩 상태를 관리하여 표시하고 싶었다. OnUploadProgress를 활용해 ProgressBar에 진행률 업데이트하기 ProgressBar 전역 상태관리 이미지 업로드뿐만 아니라 저장하기 등의..

처음 해보는 엑셀 다운로드다! ㅎㅎ 백앤드에서 엑셀 파일이랑 엑셀 파일명을 response에 담아서 보내주신다고 해서 프론트에서 받아서 다운로드하는 부분을 구현해 봤다 그전에! Blob (Binary Large Object) 대용량의 바이너리를 다룰 수 있는 객체로, 백앤드에서 엑셀 파일을 만들어서 프론트에 받을 때 Blob객체를 활용하면 된다 1. api 호출 axiosT.post('/test/excel-download', { ...form }, { responseType: 'blob', headers: { 'Content-Type': 'multipart/form-data', }, }, ) 2. 엑셀 다운로드 api로 호출 결과값으로 Blob 객체를 생성해 준다 a 태그를 생성해서 href에 Blob ..

현재 상황나는 jwt방식을 사용하며accessToken과 refreshToken을 모두 쿠키에 보관하고 있다.모두 httpOnly, Secure 옵션을 주어 안전하게 사용하고자 했다.httpOnly: document.cookie를 통해 자바스크립트에서 접근을 막는다. Secure: HTTPS로 통신하는 경우에만 쿠키가 전송된다. 전체적인 큰 그림은 아래와 같다.accessToken 재발급 시 refreshToken을 왜 갱신하느냐... 할 수도 있지만 서비스 상 로그인 상태를 최대한 오래 유지하기 위해 이렇게 진행했다. token을 어디에 저장하고 어떻게 관리할지에 대해 정답은 없고 주어진 상황에 맞게 사용하면 되는 거 같다.axios 인스턴스 생성프론트에서 쿠키를 직접 다룰 수 없어(httpOnly옵션..