나다김강니

5. AccessToken이 만료되었을때 - 만료응답을 클라이언트에 반환//토큰이 유효하지 않을 경우if (!jwtService.validateToken(jwt, userDetails.getUsername())) { response.sendError(HttpServletResponse.SC_UNAUTHORIZED, "Access token expired"); return;} 만료된 토큰을 받은 서버는 HTTP상태 코드와 함께 "Access token expired"메세지를 클라이언트에 반환  6. AccessToken이 만료되었을때 - 만료응답을 받은 클라이언트api.interceptors.response.use( response => response, async error => { ..

1.  JWT 토큰 발급 메소드 수정public Map getToken(String email) { User user = userRepository.findByEmail(email) .orElseThrow(() -> new IllegalArgumentException("User not found")); String role = user.getUserType().toString(); Long userId = user.getUserId(); String refreshToken = Jwts.builder() .setSubject(email) .claim..

ReactReact는 우리가 웹 애플리케이션을 만들 때 사용하는 프론트엔드 라이브러리로, UI를 효율적으로 구성해준다. 우리가 React 앱을 만들 때 단순히 브라우저에서 코드가 실행되는 것이 아니라, Node.js 기반의 개발 환경이 필요하다. Node.jsReact 앱을 만들 때, Node.js기반의 개발 환경이 필요하다. 1. 로컬 개발 서버 제공 React 프로젝트를 만들고 npm run start 명령어를 실행하면, Node.js가 로컬 환경에서 웹 서버를 실행한다.이 서버는 localhost:3000에서 동작함. 기능실시간으로 React코드를 브라우저에 표시코드 변경 시에 자동으로 페이지 새로고침API요청 프록시 등 개발에 필요한 기능 제공 2. 개발 도구 및 편의성 제공npm(Node Pac..

Refresh Token?유효기간이 길다Access Token이 만료되어 갱신될 때만 사용한다.재발급에 관여하는 토큰 Access Token?유효기간이 짧다API 통신에 사용된다.접근에 관여하는 토큰 왜 이렇게 토큰을 두개로 나눌까?JWT는 탈취의 위험성이 있다!!토큰을 탈취당하면 탈취한 사람이 특정 권한에 대한 인증을 통과할 수도 있다....서버는 실제 주인과 탈취한 사람을 구분 못함그래서 토큰의 유효기간을 짧게 두는게 보안상 좋은데 유효기간이 짧으면 유효시간마다 로그인을 다시해야한다.이런 문제를 해결하기 위해 Access Token과 Refresh Token을 나눠두는 것!  토큰 발급과 인증 방식1. 로그인시에 서버가 Access Token과 Refresh Token을 동시에 발급2. 서버는 Ref..

JWT? Json Web Token의 줄임말로 JSON 객체를 사용해 정보를 안전하게 전송하는 토큰 기반 인증 방식 Stateless 방식으로 서버가 클라이언트의 상태를 저장하지 않고, 클라이언트가 요청을 보낼때 제공한 JWT를 기반으로 인증을 처리무상태(stateless): 클라이언트와 서버 관계에서 서버가 클라이언트의 상태를 보존하지 않음을 의미장점 - 특정 DB/서버에 의존하지 않아도 인증 가능- 서버의 확장성이 높기 때문에 대량의 트래픽 발생 시에도 대처가 수월단점  - 클라이언트의 요청에 상대적으로 Stateful 보다 더 많은 데이터가 소모- 데이터 노출로 인한 보안적인 문제사용자 인증, 정보 교환에 사용유효 기간과 서명을 포함하여 변조되지 않았음을 보장 ⬇️⬇️ Stateless의 반대는??..

JwtRequestFilter란?JwtRequestFilter는 JWT 토큰을 이용해 사용자를 인증하는 스프링 시큐리티 필터클라이언트가 서버에 API 요청을 보낼 때마다 이 필터가 실행되어 Authorization 헤더에 포함된 JWT 토큰을 검증 JwtRequestFilter는 클라이언트가 제공한 토큰이 유효한지 확인하고, 유효하다면 사용자의 인증 정보를 SecurityContext에 저장하여 인증 상태를 유지한다. JWT 토큰 인증 과정 1. 요청의 Authorization 헤더에서 JWT 토큰 추출final String authorizationHeader = request.getHeader("Authorization");if (authorizationHeader != null && authoriza..

프로젝트에서 Redux 상태를 로컬 스토리지에 저장하고 새로고침 후에도 유지되도록 하기 위해 redux-persist를 사용했다.근데 알림은 제대로 저장되고 데이터가 유지되는데 유저의 정보가 계속 null로 저장되거나 아예 안뜨거나 이런 상태인거임....사실 유저정보는 로컬 스토리지에서 바로 가져와 사용하고있어서 그냥 한번 reducer만들어본거라 신경안쓰다가 방금 문제 발견한건 안비밀임ㅋㅋ 문제의 유저 정보... 아니 근데 분명 데이터는 userReducer에 잘 들어오고 있는걸 콘솔에서 확인했단말임...이거봐..... 이게 확실히 redux-persist 설정문제인지는 잘 모르겠는데.... Redux에서 여러 개의 reducer를 사용하는 경우, 각각의 reducer에 대해 개별적으로 persist ..

Redux-persist를 사용해 알림 데이터를 로컬 저장소에 저장하여, 새로고침 시에도 기존 알림을 보존하는 것은 잘 작동했지만, 알림 구독(SSE)가 끊기는 문제가 발생했다....페이지를 새로고침할 때 서버와의 연결이 끊기면서 발생하는 것으로, 알림 시스템을 다시 구독하지 않으면 실시간으로 알림을 받을 수 없게 되었음.. SSE(서버 전송 이벤트)는 서버가 클라이언트로 연결을 유지하면서 실시간으로 데이터를 푸시할 수 있는 방식이다. SSE 구독은일회성 연결이라서 페이지가 새로고침되거나 브라우저가 닫히는 경우에는 서버와의 연결이 끊기게 된다. 이런 경우 새로 페이지를 로드할 때 서버와의 구독을 다시 설정해줘야 한다..!! 즉, 아무 설정도 하지 않은 상태로 페이지를 새로고침하게되면 새로운 알림을 받을 ..

그때 구현할때도 어려웠는데 다시 봐도 어려워..... 우선Redux의 기본 사용 방식은createStore로 Store를 생성하고, 리듀서를 통해 상태를 관리하는 방식을 사용한다. 기본 Redux 사용 방식에서는 다중 리듀서를 관리하거나, 상태를 로컬 저장소에 영구적으로 저장하려면 추가적인 설정이 필요함. 🔍 상태 영속화 없음: 기본적인 Redux 설정에서는 상태를 로컬 저장소(localStorage)나 세션 저장소에 영구적으로 저장하지 않으며, 애플리케이션을 새로고침하면 상태가 초기화된다. -> 이거때문에 내가 뒤에서 설명하는 방식을 선택했다.import { createStore } from 'redux';import alarmReducer from './alarmReducer';// Store 생성..

직존만들때 Redux 사용해서 실시간 알림을 저장했었는데 가물가물해서 다시 정리하면서 정확히(?)기억하려고 한다.ㅋㅋ Redux란?Redux는 JavaScript 애플리케이션에서 상태 관리를 위한 라이브러리여러 컴포넌트 간에 상태를 공유해야 할 때 애플리케이션의 모든 상태를 하나의 저장소에서 관리해준다! Redux의 특징은 단방향 데이터 흐름이다. (Action -> Reducer -> Store저장 -> View: UI에 보이게 됨) 이런 단방향 흐름 덕분에 상태 관리가 투명하고, 예측 가능한 방식으로 이루어질 수 있다.이로 인해 대규모 애플리케이션에서도 상태 관리를 일관되게 유지할 수 있게 된다!(이건 몰랐잔아) 1. Action: 상태 변경을 요청하는 ‘명령’이다. 보통 type 속성(액션 타입)과..