거니의 velog

3. 비동기 호출과 createAsyncThunk() * useSelector() 와 useDispatch() 로 애플리케이션 상태를 이용할 때 필요한 또 다른 기능은 비동기 처리이다. 위의 예제는 API 서버를 통해서 로그인/로그아웃을 처리해야 하는 작업과 로그인 시에 API 서버를 연동한 처리가 필요하다. * 과거 리덕스의 경우 redux-thunk나 redux-saga라는 추가적인 라이브러리를 사용해서 비동기 처리를 했지만, 리덕스 툴킷은 createAsyncThunk() 라는 기능을 사용해서 비동기 통신 상태에 따른 처리가 가능하다. * API 서버와의 통신을 위해 프로젝트 내에 api 폴더 내에 memberApi.js 파일을 추가한다. import axios from "axios"; import..

(2) 로그아웃 페이지와 로그아웃 * 애플리케이션 상태에 email 값이 존재하면 로그인한 상황이라고 가정하고, 로그인 상황에서는 로그아웃 페이지로 이동할 수 있는 링크와 컴포넌트가 필요하다. * pages/member/LogoutPage.js를 작성하고 components/member/LogoutComponent.js를 작성한다. * LogoutComponent는 화면 상에 LOGOUT 버튼을 만들고 클릭하면 loginSlice의 로그아웃을 호출한다. import React from "react"; import { useDispatch } from "react-redux"; import { logout } from "../../slices/loginSlice"; const LogoutComponent ..

2. useSelector() / useDispatch() * 애플리케이션 상태를 변경하기 위해서는 리듀서 함수인 login(), logout()을 호출하거나 변경된 상태를 전달(notify-통지) 받아야만 하는데 이를 위해서 useSelector(), useDispatch() 를 활용한다. * useSelector() 는 컴포넌트 내에서 애플리케이션 상태를 받아서 자신이 원하는 상태 데이터를 선별(select)하는 용도로 사용한다. 예를 들어 로그인 상태가 변경되는 것을 알아야 하는 컴포넌트는 useSelector() 를 이용하게 된다. * useDispatch() 는 리듀서를 통해서 만들어진 새로운 애플리케이션 상태를 반영하기 위해서 사용한다. 예를 들어 로그인 페이지에서 로그인이 처리되면 useDi..

* 컴포넌트로 개발할 때 가장 주의를 기울여야 하는 설계는 컴포넌트들의 전체적인 구조와 컴포넌트 간의 통신이라고 할 수 있다. 리액트의 컴포넌트는 고유한 상태를 유지할 수 있지만, 여러 컴포넌트 사이에서 발생하는 공유가 필요한 상태 데이터를 관리하기 위해서는 Context나 Redux(이하, 리덕스) 등을 활용한다. * 리덕스를 활용한 상태 관리는 개발을 좀 더 쉽게 할 수 있는 리덕스 툴킷(Redux toolkit)이라는 라이브러리를 활용할 수 있는데 예제에서는 이를 이용해서 사용자의 로그인 상태를 처리하고 JWT를 사용하는 API 서버의 접근 방식에 관해서 알아본다. * 이번 장의 개발 목표는 다음과 같다. 1. 리덕스 툴킷 설정 2. 컴포넌트 간의 상태 공유 3. 비동기 처리와 리덕스 툴킷 4. 쿠..

5. Refresh Token* Access Token은 일반적으로 짧은 유효시간을 지정해서 탈취당하더라도 위험을 줄일 수 있도록 구성한다. 그 때문에 일반적으로 Access Token이 만료되면 사용자는 Refresh Token을 활용해서 새로운 Access Token을 발급받을 수 있는 기능을 같이 사용하는 경우가 많다. * 프로젝트에서는 /api/member/refresh 라는 경로를 통해서 Access Token 과 Refrech Token 을 검증하고 Access Token이 만료되었고, Refresh Token이 만료되지 않았다면 새로운 Access Token을 전송해 주는 기능을 구현한다. * 구현하려는 기능은 다음과 같은 조건들을 만족시켜야 한다.- Access Token 이 없거나 잘못된..

4. Access Token 체크 필터 * Access Token 은 말 그대로 API 서버의 특정한 경로를 '접근'하기 위해서 사용한다. Access Token은 HTTP 헤더 항목 중에서 Authorization 항목의 값으로 전달해서 서버에서 이를 체크해서 사용한다. Authorization 헤더는 , 의 형식으로 중간에 공백 문자로 구분된 값으로 구성되는데 일반적으로 JWT를 활용하면 Bearer 라는 타입으로 지정된다. * 서버에서는 보호하고자 하는 자원에 대해서 Access Token을 체크해서 유효한 경우에 접근을 허용하는 구현이 필요한데 필터나 스프링 MVC의 인터셉터, 스프링 시큐리티의 필터를 활용해서 구현할 수 있다. 예제에서는 시큐리티를 이용하고 있으므로 필터를 추가해서 /api/to..

3. JWT 문자열 생성 * API 서버는 API 호출에 대해서 상태를 유지하지도 않고, 세션이나 쿠키를 사용할 수도 없기 때문에 API 호출 시에 인증된 사용자를 확인하는 방법으로 JWT(JSON Web Token) 문자열과 같은 문자열 토큰 기반의 인증 방식을 사용한다. * JWT는 '헤더 + 페이로드 + 서명'으로 구성된 문자열이지만 서명과 유효시간을 지정할 수 있기 때문에 이를 이용해서 사용자의 인증 정보를 활용하는 경우가 많다. API 서버는 사용자의 상태를 유지하지 않기 때문에 JWT와 같은 토큰을 매번 같이 전송해서 인증을 확인하는데 이러한 용도로 사용하는 토큰을 흔히 Access Token이라고 한다(Access Token을 JWT로 만들어야 한다는 규칙은 없지만, 여러 장점 이 있어서 많..

2. DTO와 인증 처리 서비스* 엔티티 처리를 확인했다면 서비스 계층을 만들어서 로그인 기능을 구현해 놓는다. 가장 먼저 dto 패키지에 MemberDTO 클래스를 추가한다. MemberDTO는 기존의 DTO와는 달리 스프링 시큐리티에서 이용하는 타입의 객체로 만들어서 사용하기 위해서 org.springframework.security.core.userdetails.User 클래스를 상속하는 구조로 생성하고, User 클래스의 생성자를 사용할 수 있는 구조로 작성한다(상속하는 부모 클래스의 생성자 함수 때문에 생성자 방식을 사용한다).package com.unlimited.mallapi.dto; import java.util.List; import java.util.ArrayList; import ja..

* API 서버는 기본적으로 지난번 호출에 대해 기록하지 않는 무상태(stateless) 서비스이다. 무상태(stateless) 서비스란 서버가 클라이언트의 이전 요청에 대한 정보를 기억하지 않고, 각각의 요청을 독립적으로 처리하는 특성을 말합니다. 다시 말해, 서버는 각각의 클라이언트 요청을 별개의 이벤트로 취급하며, 이전 요청의 상태나 정보를 저장하지 않습니다. 무상태 서비스의 특징은 다음과 같습니다. 1. 상태 저장 없음(Stateless): 서버는 클라이언트의 상태를 저장하지 않습니다. 클라이언트의 각 요청은 독립적이며, 이전 요청의 상태에 영향을 받지 않습니다. 이는 서버에서 세션 정보나 쿠키를 사용하지 않는다는 것을 의미합니다. 2. 성능 향상: 무상태 서비스는 서버 측에서 클라이언트의 상태를..

5. 수정/삭제 페이지와 컴포넌트 처리 * 수정/삭제를 위한 페이지는 pages/products/ModifyPage.js 파일로 작성하고, router/productsRouter.js 파일을 수정해서 라우팅 설정을 추가한다. import React from "react"; const ModifyPage = () => { return ( Products Modify Page ); }; export default ModifyPage; * router/productsRouter.js 내 ModifyPage 설정을 추가한다. import React, { Suspense, lazy } from "react"; import { Navigate } from "react-router-dom"; const product..