전체 글 (122) 썸네일형 리스트형 [React] Jotai로 상태 전역으로 관리하기 간단한 사이드 프로젝트를 진행하면서 기존에 사용하던 Zustand 말고 새로운 상태 관리 도구를 사용하고 싶은 생각이 들게 되어 Redux, Recoil, Jotai 중에서 고민을 하다 Jotai를 채택하고 진행하기로 하였다. 1. Jotai를 선택한 이유이유를 설명하기 전 Jotai 특징과 장단점에 대해 간략하게 알아보자. Jotai는 일본어로 '상태'라는 뜻이다. Recoil에 영감을 받아 만들어졌다고 하며, Recoil과 유사하게 아토믹(Atomic) 모델과 함께 bottom-up 방식으로 접근한다. 이러한 방식은 작은 아톰들을 차곡차곡 쌓아 큰 형태로 만들어 나가는 느낌으로 이러한 bottom-up 방식은 성능이 중요한 앱에서 많이 사용이 된다.Jotai는 매우 작은 번들 크기로 돌아가기에 부담 .. [프로젝트] 10. 자동 로그아웃 (feat. 타이머 기능) 레퍼런스로 참고하는 사이트에서 1분 뒤 자동 로그아웃 기능을 보고 나도 해당 기능을 만들어보고 싶어졌다.내가 구현한 페이지에선 로그인 시 JWT 토큰이 발급이 되고 여기서 Access Token은 30분 정도의 만료 시간을 가지고 있다. 이를 이용하여 자동 로그아웃 기능을 만들어보겠다.굳이 토큰을 사용하지 않더라도 서버에서 로그인 유지 시간의 만료 기한 기준을 정해놓고 기준이 되는 만료기한을 클라이언트로 보내주는 식으로 구현을 해도 된다. 구현할 내용은 setInterval 타이머를 통해 시간을 계산하고 1분이 남았을 때 로그인 연장 또는 로그아웃 버튼이 있는 모달창을 띄어준다. 만일 모달 이벤트에 사용자가 반응을 하지 않으면 1분 뒤 자동으로 로그아웃이 되는 식으로 구현을 해주었다. 우선 로그인 시 A.. [프로젝트] 9. Spring Security + OAuth2.0 (feat. JWT)로 간편 로그인 구현하기 (2) 이제 본격적으로 구현을 해보자 우선 각 플랫폼 별로 로그인 페이지를 호출하는 코드는 아래와 같다.// naver "http://localhost:8080/oauth2/authorization/naver"}>네이버// kakao "http://localhost:8080/oauth2/authorization/kakao"}>카카오 버튼을 누르면 로그인 페이지로 이동이 되고 로그인에 성공을 하면 서버에 로그인 관련 정보를 넣어주고 다시 본인이 구현한 페이지로 리다이렉트 하는 식으로 동작한다. 그럼 제일 먼저 로그인에 성공을 하고 로그인 정보를 가져와 가공을 해주는 부분을 만들어주자// CustomOAuth2UserService.java@RequiredArgsConstructor@Servicepublic cla.. [프로젝트] 8. Spring Security + OAuth2.0 (feat. JWT)로 간편 로그인 구현하기 (1) 이전에 Spring Security + JWT를 이용해 로그인을 구현해 보았다. 이제 여기에 추가로 간편 로그인 기능도 구현해 보자. 간편 로그인은 사실상 어느 웹사이트를 가든 공통적으로 존재하는 요소이다.사용자들이 로그인을 편하게 하고 해당 서비스를 이용할 수 있게 해 주기에 사용자의 편의성이 좋고 접근성 또한 매우 훌륭하기에 꼭 필요한 기능이라 생각한다. 간편 로그인은 OAuth2.0를 이용해 구현하였다. OAuth2.0를 통해 해당 플랫폼의 로그인 정보를 가져와 내쪽에서 회원가입과 로그인이 이루어지고 일반 로그인과 똑같이 로그인에 성공하면 JWT를 발급하는 형식으로 구현하였다. 우선 OAuth2.0에 대해 간략하게 알아보자. OAuth2.0 OAuth2.0은 인증을 위한 개방형 표준 프로토콜로 제삼.. [프로젝트] 7. Spring Security + JWT로 로그인 구현하기 (3) 앞서 Spring Security와 JWT 관련 설정들을 모두 끝냈다면 이제 관련 로직들에 기능들을 적용하여 사용해 보겠다. 로그인 시 JWT 토큰을 발급해 줄 것이고 페이지 새로고침 및 로그인 연장 시 토큰 재발급을 하게 해 줄 것이다.페이지 새로고침 시 재발급을 해주는 이유는 이제 AccessToken은 RequestHeader에 담겨서 서버로 보내지게 되는데 이때 새로고침 이벤트가 발생하게 되면 헤더에서 인증 토큰이 사라지게 된다. 그래서 새로고침을 하면 즉시 토큰을 새로 재발급해서 헤더에 넣어주는 방식으로 구현하였다. 우선 로그인 시 JWT 토큰을 발급하는 로직을 작성해 보자.// MemberAuthService.java@RequiredArgsConstructor@Servicepublic clas.. [프로젝트] 6. Spring Security + JWT로 로그인 구현하기 (2) 이전에 Spring Security 설정을 대략적으로 끝냈다면 이제 JWT를 설정해 보겠다. 우선 JWT dependencies를 작성해 주자// build.gradleplugins { id 'java' id 'org.springframework.boot' version '3.0.4' id 'io.spring.dependency-management' version '1.1.0'}group = 'com.cac'version = '0.0.1-SNAPSHOT'java { sourceCompatibility = '17'}configurations { compileOnly { extendsFrom annotationProcessor }}repositories { mavenCentral()}dependencies.. [프로젝트] 5. Spring Security + JWT로 로그인 구현하기 (1) 로그인, 회원가입 개발을 하다 보면 제일 많이 접근하고 자주 구현하게 되는 기능이 아닐까 싶다.예전 막 개발을 시작했을 때는 아무런 기능 없이 회원가입 때 아이디와 비밀번호를 DB에 넣어주고 로그인할 때 회원가입 시 입력한 아이디, 비밀번호와 일치한 지 체크 후 로그인이 되는 단순한 방식으로 구현했던 기억이 있다.하지만 이젠 레벨업이 어느정도 된 만큼 다양한 기능들을 통해 회원가입, 로그인을 구현하고자 한다. Spring Security Spring Security는 인증, 권한 부여 및 보호 기능 등을 제공하는 스프링 하위 프레임워크이다.Spring 내에서 효과적으로 보안과 관련된 기능들을 효율적이고 신속하게 지원하고 구현할 수 있게 해 준다. Spring Security는 보통 인증과 인가 절차를 거.. [프로젝트] 4. React 상태 관리 라이브러리 - Zustand 이전 다크모드를 구현할 때 사용했던 전역상태 관리 라이브러리 Zustand에 대해 알아보자. React의 상태관리 라이브러리는 다양하게 존재한다. 대표적으로 Context API, Redux, Recoil, MobX 등 많기도 하다.나 역시 첫 번째로 Redux를 사용해 볼까 했었지만 문법이나 사용하는 방법이 익히는데 어렵고 난해하다는 말을 많이 들어 비교적 최소한의 코드로 상태를 관리하는 Recoil과 Zustand 중 고민을 하다 Zustand를 사용하기로 했다. Zustand란? Zustand란 독일어로 '상태'라는 뜻을 가진 라이브러리로 React의 전역상태 관리 라이브러리 중 하나로써 Redux와 같이 flux 패턴을 활용하는 기술 중 하나이다. Zustand는 아래와 같은 특징을 가진다... 이전 1 2 3 4 5 6 7 ··· 16 다음
