Develop/react16 [React] axios의 모듈화와 토큰 관리 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 취미공유 SNS인 모꼬지의 프로젝트를 진행하면서 만들어지는 많은 axios를 어떤식으로 관리했는지에 대해 적어보았다. 우리의 경우네는 사용되는 axios를 크게 두 분류로 정리해놓았는데, 토큰이 필요하지 않은 axios (비인증 api)와 토큰이 필요한 axios (인증이 필요한 api)로 나누어 사용했다. 토큰이 필요하지 않은 axios의 경우에는 일반적인 모듈화를 진행하여 import를 통해 불러와서 사용했으며, 토큰이 필요한 axios는 axios에서 제공하는 메서드인 interceptors를 사용하여, 실제 api 요청을 보내기 전, 프론트엔드에서 토큰의 만료를.. 2022. 8. 22. [React] FrontEnd JWT 토큰 관리 프로세스 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 프로젝트를 진행하면서 Frontend에서 로그인의 상태 유지를 어떻게 하고 (리액트 기준), JMT 토큰을 어떻게 다루어야 하는지 정리해보았다. 1. 로그인 / 로그인 유지 로그인 api에 id와 password를 가지고 post 요청을 보낸다. 응답으로 받은 데이터를 처리해준다. accessToken을 localstorage에 저장한다. ( 자동 로그인이 싫다면 sessionstorage에 저장한다. refreshToken은 Cookie에 저장한다. 액세스 토큰 만료 사전 확인을 위한 expiresAt을 만들어 localstroage에 저장함(현재 시간 + 1시간 -.. 2022. 8. 22. [React] 리액트의 유용한 기능 3가지 (automatic batching , useTransition, useDeferredValue) 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 최신 리액트인 React 18에서 추가된 여러 기능 중 유용하게 사용할 수 있는 기능 3가지를 알아보도록 하자. 1. automatic batching automatic batching에 대해서 알아보기 전 batch가 무엇인지 먼저 알아보자. 리액트에서의 batching은 리액트가 더 좋은 성능을 내기 위해 여러개의 state 업데이트를 하나의 재렌더링이 일어나도록 그룹화 하는 것을 의미한다. 쉽게 설명하자면 다음과 같다. automatic batching의 경우 다행이도, 이름에 걸맞게 자동적용 되므로, 다른 코드를 삽입하여 실행하거나 하지 않아도 된다. (최근의 .. 2022. 7. 9. [React 기본] 9. Delete (CRUD) 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 포스팅과 이어집니다. 2022.07.08 - [Develop/react] - [React 기본] 8. Update (CRUD) [React 기본] 8. Update (CRUD) 개인 공부 후 자료를 남겨놓기 위한 목적이므로, 생략되거나 오류가 있을 수 있음을 알립니다. 설명에 대한 지적은 언제나 환영입니다. :) 이 포스팅은 이전의 포스팅과 이어집니다. 2022.07.08 - [De tarra.tistory.com + 생활코딩의 react 강의를 기본 베이스로 이것저것 추가 작성 필기입니다. 영상을 보고싶다면 다음의 링크를 접속해 보시는 것을 추천합.. 2022. 7. 8. 이전 1 2 3 4 다음
