[개인프로젝트] 개발 공부 (10) 썸네일형 리스트형 [프로젝트] 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는 아래와 같은 특징을 가진다... [프로젝트] 3. React 다크모드 구현하기 오랫동안 밝은 모니터 화면을 들여다보면 눈이 쉽게 피로해진다.나 역시 모니터 기본 밝기와 명암을 기본값보다 많이 내려놓은 상태로 설정하고 웹사이트에 다크모드가 있다면 무조건 사용하는 편이다.그래서 현재 진행하는 프로젝트에 다크모드를 넣으면 좋지 않을까 생각을 하게 되어 ThemeProvider와 전역 상태관리 라이브러리를 사용하여 다크모드를 구현할 것이다. ThemeProvider란 Styled-Component에 들어있는 컴포넌트로써 ThemeProvider를 사용하면 하위에 있는 모든 태그들의 스타일에 영향을 줄 수 있어 전역적으로 스타일링을 해줄 수 있다. • 환경설정styled-componentnpm install --save styled-components# with tsnpm i --save.. 이전 1 2 다음
