Large Rainbow Pointer
반응형
[Next.js] 세션 스토리지, 이전 페이지 저장해서 뒤로 가기 구현 (feat. app router)
💜 프로젝트 구현2024. 9. 2. 23:34[Next.js] 세션 스토리지, 이전 페이지 저장해서 뒤로 가기 구현 (feat. app router)

시작하며...이번 프로젝트에서 자유게시판(모집게시판)을 구현하게 되었다.  게시물 상세페이지에 "목록으로" 버튼이 있는데이를 눌렀을 때, 주소의 param 값이 유지되기 위해 router.back() 을 사용하여 구현하였다. 그러나!!! 게시물 상세페이지를 다른 페이지에서 주소창으로 들어오면 router.back() 이 원하는 의도대로 동작하지 않게 된다. 😭얘 때문에 그냥 "/boards?page=0" 으로 보낼 수도 없어 고민이 많았다.. 🤔 그래서 이전에 접근했던 페이지를 저장해 가면서 이전 페이지를 확인하여 동작하는 방식을 선택하였다. 이전 페이지 저장하기어디에 저장할까?이전 페이지 정보를 어디에 저장할 지 많은 고민을 했다.로컬 스토리지세션 스토리지Jotai쿠키 등등.....각 저장소의 장단..

[React] axios 로그인 유저 기능 구현 (feat. 토큰)
💜 리액트/React2024. 6. 17. 21:46[React] axios 로그인 유저 기능 구현 (feat. 토큰)

시작하며...프론트엔드에서 React, Axios 를 사용하면서 로그인/회원가입 기능을 구현할 때 서버에서 쿠키로 refresh token 과 access token 을 받아 유저 기능를 하는 방법에 대해 알아볼 것이다. 로그인 기능 구현React 와 axios 로 서버에 로그인 요청을 하는 코드를 작성해서 실행을 하면응답으로 서버에서 쿠키로 access token 과 refresh token 를 보내주게 된다.서버에서 전달해준 쿠키를 클라이언트 측에서 저장하기 위해 withCredentials 를 true 로 설정한다.다시 로그인 요청 후 개발자 도구 → 애플리케이션 탭 → 쿠키 를 확인해보면 서버에서 전달받은 토큰이 쿠키에 제대로 저장되는 것을 확인할 수 있다. 그러면 이제 서버에 요청을 보낼 때도 ..

반응형
image
loading