Redux Toolkit
Flux 패턴
: React의 상태 관리 아키텍처 패턴. 데이터 흐름을 단방향으로 유지해 어플리케이션 상태를 예측 가능하게 만든다. (중앙 집중식 상태 관리)
- Action -> Dispatcher -> Store(Model) -> View
- Action : 데이터를 변경하는 행위. Dispatcher에게 전달되는 객체
- Dispatcher : 데이터 흐름을 관리하는 중앙 허브
- Store : 상태 저장소. 상태와 상태를 변경할 수 있는 메서드
- View : 리액트 컴포넌트
Flux 패턴을 사용하는 대표적인 상태 관리 라이브러리 : Redux
반대되는 개념인
Atomic 패턴을 사용하는 대표적인 상태 관리 라이브러리에는zustand등이 있다.
Redux Toolkit
: Redux를 개량한 것. 코드는 더 적게, Redux를 더 편리하게 사용하기 위해 만든 라이브러리
axios
instance
: axios.create()로 생성하는 커스텀 axios 객체
공통 설정(baseURL, headers 등)을 사전 정의해두고, API 요청 시 재사용하기 위한 용도로 사용한다. (interceptor 설정 가능)
import axios from "axios";
export const api = axios.create({
baseURL: "https://api.example.com",
timeout: 5000,
headers: {
"Content-Type": "application/json",
},
});
// 사용 예시
import { api } from "./axiosInstance";
const getUser = async () => {
const res = await api.get("/users/1");
return res.data;
};
interceptor
: 요청 혹은 응답을 가로채어 로직을 삽입할 수 있는 기능
- 요청 헤더 추가 및 공통 헤더 설정
- 인증 관리
- 로그 관련 로직 삽입
- 에러 핸들링
등의 작업을 인터셉터를 통해 처리할 수 있다.
// 요청 가로채기
api.interceptors.request.use(
(config) => {
const token = localStorage.getItem("accessToken");
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
// 응답 가로채기
api.interceptors.response.use(
(response) => {
// 응답 데이터 구조 단일화
return response.data;
},
(error) => {
const { status } = error.response;
if (status === 401) {
// 토큰 만료 처리 등
console.warn("인증 만료 - 로그아웃 필요");
}
return Promise.reject(error);
}
);
// api/client.ts
import axios from "axios";
const client = axios.create({
baseURL: import.meta.env.VITE_API_URL,
timeout: 7000,
});
client.interceptors.request.use((config) => {
const token = sessionStorage.getItem("accessToken");
if (token) config.headers.Authorization = `Bearer ${token}`;
return config;
});
client.interceptors.response.use(
(res) => res.data,
(err) => {
if (err.response?.status === 401) {
// refreshToken 로직 수행 가능
}
return Promise.reject(err);
}
);
export default client;
Thunk
: Redux에서 비동기를 다루기 위해 사용되는 리덕스 미들웨어
Thunk 함수를 반환하는 함수, 즉 객체가 아닌 함수를 반환할 수 있도록 허용해주는 미들웨어
- dispatch를 할 때 객체가 아닌 함수를 dispatch 할 수 있게 해준다.
- 따라서 중간에 하고자 하는 작업을 함수를 통해 넣을 수 있게 된다.
dispatch(함수) → 함수실행 → 함수안에서 dispatch(객체)
Custom hook
: 기본 hook 만으로는 중복되는 로직을 효율적으로 관리하기 어렵기 때문에, 개발자가 직접 Hook을 만들어서 사용하게 되는데, 이를 Custom hook 이라고 한다.
- React 기본 hook (useState, useEffect 등)을 조립, 확장해서 만든 사용자 정의 함수
- 상태 로직을 컴포넌트 바깥으로 추출해 재사용하기 위한 구조
재사용 가능 로직을 구현하기 위해 사용됨.use로 시작해야하며 hook 규칙을 준수해야 한다. (컴포넌트 최상위에서 호출 등등)
throttling & debouncing
: 짧은 시간 동안 연속해서 같은 이벤트가 발생했을 때 과도한 이벤트 핸들러 호출을 방지하기 위한 기법
구현 시
setTimeout,setInterval,클로저를 사용하는데, 이때 정리(clean up 함수 작성)가 제대로 이루어지지 않으면메모리 누수가 발생할 수 있다.
- 메모리 누수 : 필요하지 않은 메모리를 계속 점유하고 있는 현상
throttling
: 짧은 시간 동안 연속해서 같은 이벤트가 발생했을 때, 이벤트들을 일정 시간 단위로 그룹화하여 그룹의 처음 or 마지막 핸들러만 호출되도록 하는 것. 일정 시간 간격으로 이벤트 핸들러 호출
무한 스크롤에 많이 사용
debouncing
: 짧은 시간 동안 연속해서 같은 이벤트가 발생했을 때, 마지막 이벤트로부터 일정 시간이 경과한 후에 한 번만 호출하도록 하는 것
resize 이벤트, 입력값 실시간 검색에 많이 사용
인증/인가
인증(Authentication): 서비스를 이용하려는 유저가 등록된 유저인지 확인하는 절차인가(Authorization): 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차
http 프로토콜 통신의 특징
- 무상태 (stateless) : 서버는 클라이언트의 상태를 기억하지 않으므로, 각 요청마다 서버에서 요구하는 모든 상태 정보를 담아서 요청해야 한다.
- 비연결성 (connectionless) : 서버와 클라이언트는 연결되어 있지 않다. 서버 입장에서는 매번 새로운 요청이다. 따라서 최소한의 서버 자원으로 서버를 유지할 수 있게 해준다.
쿠키, 세션, 토큰
-
쿠키(cookie): 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 key-value 형식의 저장소.
- 별도로 삭제하거나 유효기간이 만료되지 않는 이상 서버와 통신할 때 자동으로 주고 받게 된다- 서버에 특정 API 요청을 했을 때 서버가 응답 시 header 안에 set-cookie 속성으로 쿠키 정보를 담아주면 응답을 받은 브라우저는 쿠키를 브라우저에 자동으로 저장한다.
- 서버에 http 요청을 할 때마다 브라우저에 저장되오 있는 쿠키는 자동으로 서버에 보내진다. (동일한 Origin 혹은 CORS를 허용하는 Origin에만 쿠키를 보냄)
-
세션(sesstion): 사용자와 서버 간의연결이 활성화된 상태를 의미한다. (인증이 유지되고 있는 상태 -
토큰(token): 클라이언트에서 보관하는암호화된 인증 정보를 의미한다.
- 서버에서 사용자 인증 정보를 보관할 필요가 없기 때문에 서버 부담을 줄일 수 있다.- 웹에서 인증 수단으로 사용되는 토큰은
JWT (JSON Web Token)이 있다.
- 웹에서 인증 수단으로 사용되는 토큰은
JWT
: JSON Web Token. 웹에서 인증 수단으로 사용되는 토큰
- header, payload, signature 형식 3가지 데이터로 구성되어 있다.
- 암호회된 토큰을 누구나 복호화하여 payload를 볼 수 있다. (토큰의 용도는 인증정보(payload)에 대한 보호가 아니라
위조 방지) - 정보(payload)를 토큰화할 때 signature에 secret key가 필요하고, secret key는 복호화가 아닌 토큰이 유효한지 검증하는 데 사용됨.
리소스 접근 인가를 받기 위해 사용되는 토큰을
Access Token,Refresh Token으로 만료된 Access Token을 재발급.
Refresh Token도 만료된 상태라면 재인증 필요
S3
: Amazon S3는 확장성, 데이터 가용성, 보안 및 성능을 제공하는 스토리지 서비스. 쉽게 말해 구글 드라이브처럼 파일 저장 서비스
- FTP 서버처럼 단순 파일 저장 영역으로 사용하거나 AWS 서비스의 사용 로그 저장, 정적 웹 사이트 호스팅에 사용할 수 있음.
