카테고리 없음

상태관리 & 결제

vonvon56 2024. 10. 10. 16:39

Pt 1. 상태 관리 - Redux Toolkit

1. 정의

Redux Toolkit이란, Redux를 간편하고 빠르게 활용할 수 있도록 하는 공식 툴이다. 이름대로 Redux의 여러 툴들이 포함되어 있어서, 개발을 편하게 해준다!

 

2. 필요성

1. Redux 설정의 복잡함

 

Redux는 전역 상태 관리를 훌륭히 수행할 수 있지만, 설정법이 너무 어렵다. 

학습에 비용이 좀 들어간다고 할 수 있다.

 

2. 추가 도구 설치 필요

 

1번과도 연결되는 내용인데, Redux만으로는 불충분해서 redux-thunk 같은 미들웨어가 필요하다. 

이런 설정들이 꼬이면 관리하기가 힘들어지는 것!

 

3. 코드 반복 작성 필요

 

Redux는 액션이나 리듀서를 정의할 때, 반복되는 코드가 많고 플젝 규모가 커질수록 관리가 어렵다.

 

 

이러한 단점들을 극복하기 위해 Redux Toolkit이 등장하게 되었다~

 

 

3. Slice란?

 

Redux toolkit의 개념으로, 여러 구성 요소들을 하나로 묶은 조각이다.

// Redux Toolkit에서 createSlice라는 함수를 가져옵니다.
import { createSlice } from '@reduxjs/toolkit';

// createSlice 함수를 사용해 counterSlice라는 슬라이스를 만듭니다.
const counterSlice = createSlice({
    // 이 슬라이스의 이름을 'counter'로 정합니다.
    name: 'counter',
    // initialState는 상태의 초기값을 설정합니다. 여기서는 count를 0으로 초기화했어요.
    initialState: { count: 0 },
    // reducers는 상태를 변경할 수 있는 방법들을 정의하는 곳입니다.
    reducers: {
        // 'increase'라는 이름의 액션을 정의합니다.
        // 이 액션이 호출되면 state.count의 값을 1 증가시킵니다.
        increase: (state) => {
            state.count++;
        },
        // 'decrease'라는 이름의 액션을 정의합니다.
        // 이 액션이 호출되면 state.count의 값을 1 감소시킵니다.
        decrease: (state) => {
            state.count--;
        },
    },
});

// 여기서는 increase와 decrease라는 액션을 export(내보내기)합니다.
// 외부에서 이 액션들을 사용할 수 있게 해줍니다.
export const { increase, decrease } = counterSlice.actions;

// counterSlice.reducer를 기본으로 내보내서
// 외부에서 이 슬라이스의 리듀서를 사용할 수 있게 해줍니다.
export default counterSlice.reducer;

 

4. Redux Toolkit의 주요 기능들

1. configureStore()

  • Redux의 createStore()와 비슷하지만, 더 사용하기 쉽게 만든 함수.
  • Redux 저장소를 만들 때 쓰이며, redux-thunk나 redux-devtools 같은 편리한 도구들이 자동으로 내장되어 있다.
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';

const store = configureStore({ reducer: rootReducer });

 

2. createSlice()

  • 앞서 설명한 Slice를 쉽게 생성할 수 있는 함수.
  • 액션과 리듀서를 한 번에 처리할 수 있어서, 코드를 짧고 깔끔하게 유지할 수 있다.
const counterSlice = createSlice({
    name: 'counter',
    initialState: { count: 0 },
    reducers: {
        increase: (state) => {
            state.count++;
        },
        decrease: (state) => {
            state.count--;
        },
    },
});

 

3. createReducer()

  • 리듀서를 더 간단하게 만들어주는 함수예요.
  • Redux Toolkit은 내부적으로 immer.js를 사용해서, 복잡한 상태 관리를 쉽게 처리해준다.
  • 덕분에 불변성 관리에 신경 쓸 필요가 없다. 
import { createAction, createReducer } from '@reduxjs/toolkit';

const increase = createAction('counter/INCREASE');
const decrease = createAction('counter/DECREASE');

const initialState = { count: 0 };

const counterReducer = createReducer(initialState, (builder) => {
    builder
        .addCase(increase, (state) => {
            state.count++;
        })
        .addCase(decrease, (state) => {
            state.count--;
        });
});

 

 

Pt 2.  PG(Payment Gateway)

정의

PG사(Payment Gateway)는 온라인 결제를 돕는 중개업체다. 쉽게 말해, 온라인 쇼핑몰의 계산대 역할이라고 비유할 수 있다! (이미지 참조)

카드 결제, 계좌이체, 간편결제 등 다양한 결제 방식을 제공하고,

이 모든 과정에서 카드사와 고객, 서버 간의 중간 다리 역할을 한다.

직접 결제를 처리하는 건 카드사지만, PG는 그 과정을 연결해 주는 역할을 담당한다고 할 수 있다.

Pt 3. 결제 준비-요청-승인

<결제 플로우>

  1. 결제창 호출 (결제 준비)
    • 고객이 결제 버튼 누름 -> 서버로 결제 요청 전송 -> 서버가 이 요청을 PG사에 전달
    • PG사가 결제창 URL을 클라이언트에 전달 -> 클라이언트가 URL을 통해 결제창 띄움 -> 결제 과정 시작
  2. 카드 정보 입력 및 인증 (카드사 인증 요청)
    • 고객이 결제창에서 결제 수단을 선택
    • PG사가 고객 정보 카드사로 전달
    • 카드사는 이 정보를 바탕으로 고객 인증 절차 진행
  3. 결제 승인 요청 (결제 승인)
    • 카드사 인증 절차 완료 -> PG사가 pg token을 클라이언트에 전달
    • 클라이언트는 이 인증 정보를 서버로 전송
    • 서버가 이를 받아 PG사에 결제 승인 요청 전송
    • PG사는 카드사와 협력해 실제 결제를 처리한 후, 서버에 결제 완료 결과를 반환