맨땅에서 프론트엔드

2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) [JWT] 로그인 세션 관리하기 2 (Session Storage, Local Storage, Recoil) 2024.02.01 - [javascript] - [JWT] 로그인 세션 관리하기 1 (JWT에 관하여) [JWT] 로그인 세션 관리하기1 (JWT에 관하여) 오늘이 아시안컵 16강이 있던 날인데, 축구를 보니 볼 차고 싶은 생각이 너무 들던 하루 mini-frontend.tistory.com 이번에는 실제 코드를 통해 로그인 세션에서 토큰이 어떻게 하면 처리되는지 알아보자. 토큰이 만료 등의 토큰 처리는 Axios 인터셉터(Intercep..

요즘 동심에 빠진 것 같아. 유튜브에 이런 플레이리스트가 자꾸 떠,, 프로젝트 진행 중에 좌측 여백 공간에 스크롤에 따라다니는 사이드 바를 넣어야 했다. 좌측 공간에 사이드 바 고정하기 position: fixed; left: 20px; /* 왼쪽 여백 */ top: 50%; transform: translateY(-50%); top: 50% - top 속성은 부모 요소에 대한 요소의 상대적 위치를 지정. - 요소의 상단이 부모 컨테이너의 높이의 50% 지점에 위치하도록 함. - 즉, 요소는 부모 컨테이너의 상단에서부터 시작하여 중간 지점까지 배치된다. transform: translateY(-50%); - transform 속성은 요소를 변형시키는 데 사용되며, translateY는 요소를 수직 방향으..

React 애플리케이션을 개발하다 보면, 다른 페이지로 네비게이션을 하면서 특정 데이터를 전달할 필요가 종종 있다. 이를 위해 useNavigate와 useLocation 이라는 두 React Router Hook을 사용할 수 있다. 01. useNavigate useNavigate Hook은 페이지를 다른 경로로 이동시키는 함수를 제공한다. 이 Hook의 장점은 단순히 페이지를 이동시키는 것뿐만 아니라, 이동할 때 추가적인 상태(state) 또는 데이터를 전달할 수 있다는 점이다. useNavigate의 형태 navigate( '/이동경로', { state: { 키: 값, 키: 값, ... } } ) useNavigate 사용법 먼저, react-router-dom 패키지를 설치해야 한다. npm in..