Developer JS's It BLog

JwtAuthenticationFilter를 이용한 Spring Security JWT 인증 필터 설정 방법

Spring Boot와 Spring Security를 사용하여 JWT 토큰을 서버에서 인증하는 방법에 대해서 알아보도록 하겠습니다.1. JwtAuthenticationFilter 이해하기JwtAuthenticationFilter는 JWT 토큰을 검증하여 사용자를 인증하는 역할을 하는 필터입니다. 이 필터는 모든 요청을 가로채어, 요청 헤더에 JWT가 포함되었는지 확인하고 토큰이 유효한 경우 사용자를 인증합니다.2. JwtAuthenticationFilter 클래스 구성JwtAuthenticationFilter는 다음과 같은 주요 작업을 수행합니다:HTTP 요청에서 JWT 추출JWT 유효성 검증사용자 정보 로드 및 인증 처리3. SecurityConfig 설정Spring Security 설정에서 JwtAu..

MapStruct를 이용한 DTO 매핑 자동화(feat.관심사의 분리)

개발을 하다 보면 '관심사의 분리(Separation of Concerns)'라는 말을 자주 접하게 됩니다. 한 클래스나 컴포넌트는 가능한 하나의 책임만을 담당하도록 설계하는 것이 중요하다는 개념인데요. 프론트엔드 개발에서도 하나의 컴포넌트가 단 하나의 기능만 담당하도록 권장되고, 백엔드 역시 마찬가지 입니다.백엔드, 특히 JPA를 사용할 때 Entity는 도메인의 핵심 로직과 데이터 영속성 관리라는 역할에만 집중하는 것이 좋습니다. 때문에 실제 데이터를 주고받기 위해서는 Entity가 아닌 별도의 DTO(Data Transfer Object)를 만들어 사용하는 경우가 많습니다.DTO로 변환하는 귀찮음저 역시 처음에는 별도의 Mapper 클래스를 만들어서 Entity를 DTO로 변환하는 정적 메서드를 작..

귤톡 개발일지 - 채팅방 데이터 설계 변경 이야기

귤톡 개발일지 - 채팅방 데이터 설계 변경 이야기우리 팀은 요즘 귤톡이라는 심플(?)한 채팅 앱을 만들고 있다. 사실 심플하진 않다. 여러가지 생각들이 많지만 일단은 채팅 기능을 모바일로 구현하는 것을 목표로 개발중이다. 처음이라 최대한 간다하게 개발하는 것을 목표로 삼았기 때문에 데이터베이스 구조도 MongoDB를 활용해 아주 단순하게 만들었다.기존에는 Chat이라는 컬렉션을 생성했고, 필드는 다음과 같이 네 개로 구성했다.:idchatroomNamemessagesparticipants특히, participants는 처음에는 단순히 사용자들의 아이디를 문자열 리스트로 저장했다. 이 방식은 개발 초반에는 꽤 효율적이었다.그러나 간단한 구조에도 불고하고 예상치 못한 문제가 발생했다. 바로 채팅방에서 유저가..

React Native Expo에서 JWT 토큰 검증하기

React Native에서 JWT 토큰의 클라이언트 검증 로직 추가하기현재 프로젝트에서는 Redux를 통해 인증 토큰을 관리하고 있으며, 토큰이 없는 경우에만 로그인 화면으로 이동하는 간단한 로직을 사용 중이었습니다.const { token } = useSelector((state: RootState) => state.auth);if (token === null) { return ; }그렇지만 위와 같이 토큰을 검증하면 생기는 문제들이 있습니다.:이전에 로그인을 통해 발급받은 토큰이 아직 저장된 상태라면, 실제 로그인 여부나 토큰의 유효성에 상관없이 로그인 화면으로 이동하지 않고 메인 화면을 그대로 보여주게 됩니다.이로 인해서 개발을 하고 있는 팀원들이 지금 로그인 상태인지 확인이 제대로 안돼서 ..

securityFilterChain 설정

스프링 부트 Security 설정법스프링 부트의 Security 설정에 대해서 알아보자.나도 정확하겐 모른다. 그냥 내가 하고 있는 설정에 대해서 알아보자!{: .prompt-tip }먼저 security config의 security filter chain 코드입니다. 개발을 처음 시작했을때 고생한 결과로 얻은 이 필터체인 코드로 인해서 지금은프로젝트의 시작을 꽤 빠르게 할 수 있지만, 처음 security config를 작성했을 당시에는 스프링 부트의 버전이 무엇인지, Spring Security 의 버전이무엇인지 잘 몰라 그냥 최신 버전으로 생성을 했지만, 당시에 스프링 부트 3버전 이후, 그리고 그에따른 스프링 시큐리티 6에 대한 설정 코드를공유가 잘 되지 않고, 옛날 버전으로 세팅하면서 이해도 ..

생업이 바쁘다는 이유로, 여러가지 이유로 잠시 글로부터 멀어져 있었다. 글을 쓴다라는게 생각보다 쉬운일이 아닌만큼 이런저런 이유를 핑계로 글을 쓰지 못했다. 이 블로그라는게 정말로 필요한 지에 대한 의문도 사실 약간 있었다. 사실 어떤 개발을 해갈때 글을 쓰면서 정리를 해가면서 한다는 건, 느낌상으로 아주 무거운 강철 가방을 메고, 뛰어가는 느낌이다. 분명 목표가 저기 앞에 보이고, 어떻게 가야하는지 보이지만, 내가 메고 있는 가방때문에 앞으로 가지 못한다는 답답함이 있다.   하지만, 최근에 개발을 하면서 생각했던 점은 그 답답함은 그냥 느낌이라는 것이다. 아주 무거운 가방을 메고 달리는 것은 분명 그 당시의 기록을 높이는 데 아주 큰 방해물이 된다. 하지만 그렇다고 해서 그 가방을 놓고 뛰는 것은 단..

리스트 아이템을 반복적으로 그리다 보면 마주치는 아주 큰 산이 하나 존재한다. 바로 아이템을 어떻게 정렬할 것인가를 생각하는 것이다.   아무 생각없이 아이템을 그냥 다 붙여넣다보면 이렇게 좌측으로 몰린 아이들을 만날 수 있다. 이게 마지막은 이렇게 나와야하는데 모든 리스트들이 이렇게 나오게 된다.  그럼 여기서 해결하는 가장 쉬운방법은 css로 이 리스트의 container div에 justify-content center를 주게 되면, 이 친구들은 정 가운데로 모이게 된다. .campaignItemContainer { width: 100%; display: flex; gap: 30px; flex-wrap: wrap; justify-content: center;} 그럼 나머지..

제가 웹 어플리케이션 개발을 배우면서 가장 먼저 배운 언어는 Java입니다. 당연히 Java를 먼제 배워서 메서드(Method)에 익숙해져있었습니다. 한참이 지난 후에야 JavaScript를 배우면서 함수(Function)을 배우게 되었습니다. 그럼 그렇게 배우는 과정에서 들게 된 생각은 무엇이었을까요? 함수와 메서드는 같은 것이라는 생각입니다. 물론 우리 선생님들은 그렇게 가르치지 않으셨지만, 배우는 사람이 가르치는 사람이 말하는 모든 것을 소화할 수 있다면 누군가를 가르친다는 것으로 돈을 버는 일은 불가능 했을 것입니다.  당연히 저는 가르침대로 이해하는 것이 아니라 그냥 제가 느낀대로 이해하게 되었고, 그 결과가 함수와 메서드의 차이가 도대체 무엇일까입니다. 같아 보이지만 같다고 할 수 없는 사이인..

const AuthInput = ({ name, ...props }) => { const dispatch = useDispatch(); const { signUpForm, signUpError } = useSelector((state) => state.signUp); const handleChange = (e) => { dispatch(updateSignUpForm({ field: name, value: e.target.value })); }; return ( {signUpError[name] && ( {signUpError[name]} )} );};AuthInput.propTypes = { name: PropTypes.string..

컴포넌트(Component)란?React를 사용할 때는 컴포넌트를 class 또는 함수로 정의할 수 있습니다. class로 정의된 컴포넌트는 아래에 자세히 설명하고 있듯 보다 많은 기능을 제공합니다. React 컴포넌트 class를 정의하려면 React.Component를 상속받아야 합니다.https://ko.legacy.reactjs.org/docs/react-component.html 리액트나 다른 프론트엔드 프레임워크를 사용하면 자주 나오는 단어 중 하나가 컴포넌트입니다. 그럼 컴포넌트는 무엇일까요?  컴포넌트의 영어 단어 뜻은 요소입니다. 즉, 컴포넌트는 요소를 말하는 것입니다. 그리고 지금 여기서 이야기 할 컴포넌트도 요소입니다. 간단하게 말해서 리액트와 같은 프론트엔드 프레임워크에서는 컴포넌트..