Java

[React] JWT 토큰과 localStorage 로그인

앞에서 JWT 토큰을 발급하는 방법을 살펴보았다. 여기서는 발급받은 JWT 토큰을 리액트에서 활용하는 방법을 작성해 보려고 한다. 사실 쿠키를 사용하여 구현하려고 했지만, 구현이 생각처럼 잘 되지 않아 localStorage로 일단 구현하였다. ✔ login.js onst loginProcess = async () => { const body = { id, password, }; const {response, data} = await postFetch('/api/admin/login',body); if (response.status === 200) { const result = data[0]; localStorage.setItem("accessToken", result.acc_tkn); localStor..

2022. 8. 8. 17:14

Java

[JWT 저장] localStorage vs Cookie 비교

🙌 서론 관리자 페이지의 로그인 기능과 로그아웃 기능을 만들게 되었다. 로그인 후 해당 사용자의 요청에 대해서만 응답하는 방법을 고민하게 되었다. 그러다 JWT 토큰 방식을 알게 되었다. 서버에서 JWT 토큰을 발급받고 난 뒤 클라이언트에서는 JWT를 어디에 저장해 두어야 가장 좋을까?라는 고민하며 서칭을 한 내용을 정리해 둔다. 📒 기본 지식 1. JWT Json Web Token의 약자로 모바일이나 웹의 사용자 인증을 위해 사용하는 암호화된 토큰을 의미한다. 서버에서 발급받은 JWT 토큰을 Request에 담아 사용자의 정보 열람, 수정 등의 작업을 수행할 수 있다. 2. JWT 로그인은 어떻게 이루어 지나? 유저가 로그인을 시도한다. 서버가 인증정보를 보내주는데, 암호화나 시그니처 추가가 가능한 데..

2022. 8. 4. 08:58

Java

[node.js] JWT 토큰 발급 & JWT 미들웨어 설정

JWT란? JSON Web Token 웹 표준으로써 두 개체에서 JSON객체를 사용하여 정보를 안전성 있게 전달한다. JWT가 사용되는곳 회원인증 (Authenticated) 유저가 로그인을 하면 서버는 유저의 정보에 기반한 Token을 발급해서 유저에게 전달하고, 유저는 서버에 요청을 할 때마다 Token을 전달하는 식으로 검증한다. 즉, 유저가 요청을 했을 때만 토큰을 확인하면 되니 세션 관리가 필요 없어서 서버의 자원을 아낄 수 있다. JWT 인증 절차 로그인 요청 시 JWT 발급 1. route.js - (id/pw로 client가 로그인 요청) router.post('/admin/login', LoginController.login); 2.loginController.js const expres..

2022. 8. 3. 10:46

Java

[JS] localStorage & sessionStorage 비교

웹 스토리지 객체인 localStorage와 sessionStorage는 브라우저 내에 key-value 쌍을 저장할 수 있게 해 준다. sessionStorage 새로고침을 하여도 데이터가 사라지지 않고 남아있다. localStorage 브라우저를 다시 실행해도 데이터가 사라지지 않고 남아있다. 그런데, 쿠키를 사용하면 브라우저에 데이터를 저장할 수 있는데, 왜 또 다른 객체를 사용해서 데이터를 저장하는 걸까요?라는 의문이 든다. 쿠키 이외에도 다른 방식을 사용하는 이유는 다음과 같다. 쿠키와 다르게 웹 스토리지 객체는 네트워크 요청 시 서버로 전송되지 않는다. 이러한 특징 때문에 쿠키보다 더 많은 자료를 보관할 수 있다. 대부분의 브라우저가 최소 2MB 혹은 그 이상의 웹 스토리지 객체를 저장할 수 ..

2022. 7. 29. 17:27

Java

[JS] JSON 값 넣는 방법

선언 시 초기화 var json = { key1 :value, key2: value, key3: value }; ※ key - value로 이루어진 object이지만, 아래와 같이 값을 넣을 때 배열형태의 key 값을 넣으면 인식 된다. 선언 후 값 입력 const sendData = {}; sendData["key1"] = 1; sendData["key2"] = 2; sendData["key3"] = 3; ▶ 결과 {key1: 1, key2: 2, key3: 3}

2022. 7. 29. 16:30

Java

[Spring] @Profile, @ActiveProfiles

@Profile 빈이나, 컴포넌트에게 프로필을 구분하여 빈을 로드할 수 있음 @ActiveProfiles 테스트 수행 시 특정 빈만 로드하면서 테스트를 수행할 수 있음 서론 서버를 실행할 때는 아래와 같이 모두 몇 가지의 목적 있고 각기 다른 설정을 주고 싶을 수가 있다. 로컬로 애플리케이션을 구동한다. (인 메모리 DB 연결 및 요청에 맞는 파라미터 값) 테스트를 구동한다. (인 메모리 DB 연결 및 요청에 맞는 파라미터 값) 실제 운영을 하기 위한 배포를 한다. (실제 실무에 사용하는 DB 연결 및 요청에 맞는 파라미터 값) 이런 경우 사용하는 것이 @Profile이다. 해당 어노테이션을 알아보기 이전에 properties/yml 설정 파일을 살펴보며 profiles가 무엇인지 간략히 보자. spri..

2022. 7. 28. 16:55