Develope38 리액트 - refreshToken을 이용한 aceessToken 발급 로그인은 보안 상의 문제로 acceessToken의 만료 기간을 30분 ~ 1시간 정도로 유지한다.accessToken에는 사용자의 로그인 정보가 암호화 되어 저장하고 있는데, 이 정보를 탈취하면 사용자 외의 외부인도 로그인을 할 수 있다.하지만 30분마다 로그인을 해야하면 사용자의 불편함을 야기 시키기에, 로그인은 유지 되면서 보안을 높일 방법을 refreshToken을 이용하여 accessToken을 시간이 경과할 때 마다 새롭게 발급하여 로그인을 유지한다. 1. 리프레시 토큰 존재 확인const checkRefreshToken = () => { const refreshToken = localStorage.getItem('refreshToken')} 2. jwt-decode를 이용하여 acce.. 2024. 8. 2. 리액트 - JWT를 이용한 로그인 구현 이전 포스팅: 2024.07.31 - [Develope/REACT] - React - 로그인 페이지 구현을 위한 route 경로 설정 React - 로그인 페이지 구현을 위한 route 경로 설정최근 프로젝트를 진행하면서 로그인 기능을 구현하게 됐는데, 가장 먼저 막힌 부분이 로그인 후 화면 넘어가기 였다.진행 중인 프로젝트는 모바일 관리자 웹앱으로 관리자 페이지라는 특성 답deer-develope-diary.tistory.com 관리자용 사이트를 만들기 위한 로그인 구현 방법을 알아보자 1. 로그인 정보를 입력할 input과 핸들링을 추가한다.const [user, setUser] = useState({ userId: '', userPw: ''})const onChangeHandle = (e.. 2024. 8. 2. 리액트 - API 숫자 값에 ' , ' 추가 현재 리스트 화면인데, 금액 표시 시 가독성이 떨어져서 컴마를 추가하기로 했다. 구현 방법1. 카테고리 리스트의 금액 부분만 추출하기const [formattedList, setFormattedList] = useState([]); // 쉼표가 포함된 가격 리스트const getList = async () => { try { const data = await apiList(); const listFromApi = data.list; setList(listFromApi); setListModal(listFromApi.map(() => false)); // 모달 상태 초기화 // 금액 표시 시 쉼표 추가 const formatt.. 2024. 8. 2. 리액트 - API 기능을 이용한 리스트 검색 처음 구현한 방법은 리스트 배열을 map과 filter를 사용해서 input value 값을 includes로 필터링하여 남는 리스트만 호출 하는 방식으로 했었는데, api의 파라미터를 이용하면 훨씬!!! 쉽게 할 수 있었다. 기존 코드 // 검색 값 변동 시 마다 검색useEffect(() => { const searchApi = async () => { try { const data = await apiList(); const searchedList = data.list .filter(item => { return item.category_name && item.category_nam.. 2024. 8. 2. 리액트 API 리스트를 이용한 배열 값 검색 기능 현재 상단에는 검색 기능, 하단에는 api를 통해 카테고리 리스트를 불러오고 있다.지금은 카테고리 갯수가 많이 없어서 상관 없지만, 갯수가 많아 진다면 관리하기 어려울 것 같아 리스트 검색 기능을 추가했다. 구현 방법1. input value값을 변수 값에 담는다.const [searchValue, setSearchValue] = useState('');// input 값 변경const onChangeInput = (e) => { setSearchValue(e.target.value)} 2. api 리스트를 불러온 후 map과 filter 함수를 이용하여 변수 값이 포함된 리스트만 호출한다.const [searchList, setSearchList] = useState([]); // 검색 된 리스트.. 2024. 8. 2. React - 로그인 페이지 구현을 위한 route 경로 설정 최근 프로젝트를 진행하면서 로그인 기능을 구현하게 됐는데, 가장 먼저 막힌 부분이 로그인 후 화면 넘어가기 였다.진행 중인 프로젝트는 모바일 관리자 웹앱으로 관리자 페이지라는 특성 답게 로그인을 하지 않는 다면 기능을 사용할 수 없어야 했다.때문에 로그인 페이지가 없이 App.jsx에서 바로 라우팅 하여 넘어가던 페이지들과 달리, 로그인을 먼저 한 후 다른 페이지로 넘어가야 하는 기능 구현이 필요했다. 코드 구현하기웹은 html을 읽어 표시되며, 보통 react의 html은 한개이므로 웹은 index.html의 파일을 읽어 화면에 표시되는 것을 알 수 있다.해당 파일은 아래와 같이 쓰여있다. id값이 root인 div 화면을 불러오는 것을 알 수 있다. 이제 main.jsx 파일.. 2024. 7. 31. 이전 1 2 3 4 5 6 7 다음
