[하은] 음

[h1un]

제가 리얼 초보 쓰레기 코드를 가져왔어요
리액트로 따로 프로젝트 진행한게 없어서 요런 코드밖에 없습니다

그냥 음~ 이런 기능을 하네 ~ ㅎㅏ고 짠거라 매우 목적과 쓰임이 맞지 않을수도 있습니더

코드

로딩바 진행화면을 만들어야하는데 api를 6개를 순차적으로 호출해야합니다. (리뷰용으로 API 1~6 이라고 수정해서 올립니다.)

전달받은 퍼블리싱 동작이

root : 기본
root current : 실행중
root active : 완료

로 사용되어

저 상태를 어떤식으로 가지고 있어야할까 ? 고민을 하다
처음에는
null로 초기값을 주고,
false면 실행중,
action.status === 200(= 응답이 200일때 =true) 면 완료 라는 요상한 코드를 짰다가

이건좀 아니다 싶어 ;;

0 기본 (.
1 실행중
2 완료

로 상태를 저장해서 관리했습니다.

export interface InitialState {
    documentKey: null | string,
    isAPI1: null | number,
    isAPI2: null | number,
    isAPI3: null | number,
    isAPI4: null | number,
    isAPI5: null | number,
    isAPI6: null | number,
}

const initialState: InitialState = {
    documentKey: "",
    isAPI1: 0, // 0 대기 1 실행중 2 완료
    isAPI2: 0,
    isAPI3: 0,
    isAPI4: 0,
    isAPI5: 0,
    isAPI6: 0,
};

const apiReducer = (state = initialState, action: any) => {
    switch (action.type) {
        case 'API1':
            return {...state, isAPI1: action.status};
        case 'API2':
            return {...state, isAPI2: action.status};
        case 'API3':
            return {...state, isAPI3: action.status};
        case 'API4':
            return {...state, isAPI4: action.status};
        case 'API5':
            return {...state, isAPI5: action.status};
        case 'API6':
            return {...state, isAPI6: action.status};
        case 'SET_DOCUMENT_KEY':
            return {...state, documentKey: action.documentKey};
        default:
            return state;
    }
};


export default apiReducer;

api 호출하기전에 1 실행중 으로 바꾸고 응답값을 받으면 2 완료 로 변경하고

        const sendRequest = (url: string, actionType: string, formData: FormData, nextStep: (formData: FormData) => void) => {
            dispatch({type: actionType, status: 1});
            axios.post(url, formData)
                .then((response) => {
                        if (response.data.code === 0) {
                            handleSuccess(actionType, nextStep, formData)
                        } else {
                            modal("검사 실패", "통신 오류로 검사가 중단되었습니다. 다시 시도해 주시기 바랍니다. ", true);
                            return;
                        }
                    }
                )
                .catch(handleError);
        };


        const handleSuccess = (actionType: string, nextStep: (formData: FormData) => void, formData: FormData) => {
            dispatch({type: actionType, status: 2});
            if (nextStep) nextStep(formData);
        };


        const API1 = (formData: FormData) => {
            sendRequest(URL_API1, 'API1', formData, API2);
        };

        const API2 = (formData: FormData) => {
            sendRequest(URL_API2, 'API2', formData, API3);
        };

        // ...

3항연산자를 두개 쓰면서 className 변경해줬어요

<div  className={`root ${isUpload === 0 ? "" : API1 == 1 ? "current" : "active"}`}>

지금 생각해보니.
number가 아니라 string 으로 active current 로. 관리해서 굳이 3항 연산자를 두개 쓸 필요가 없어도 될것같다는 생각도 들고
apiReducer를 이런식으로 사용하는게 맞는건가 싶기도하고

질타부탁드립니더..

[regularPark]

하은님! 안녕하시렵니까?

로딩바 진행화면을 만들어야하는데 api를 6개를 순차적으로 호출해야합니다.

다수의 비동기 함수의 실행순서를 보장하고 싶으시다면 async/await 키워드를 사용해보면 어떨까요?🤗

async function

[Wisesaturn]

빠라바라밤 리뷰어 송재한입니다 🐣

우선 0,1,2로 상태를 관리한다면 추후에 유지보수가 어려웠던 기억이 있습니다 😂
그래서 보통 해당 값을 하나의 상수를 만들어서 리팩토링을 하였습니다

const WAIT = 0;
const PENDING = 1;
const COMPLETE = 2;

이런 값으로 관리한다면 WAIT, PENDING, COMPLETE라는 변수만으로 쉽게 유추가 가능합니다!

[KyuTae98]

어느 옛날에 지뢰찾기 개발을 하며 많은 레퍼런스를 참고하면서 아주 좋은 방법이 있었습니다.

constants로 고정 값을 따로 빼두어 사용하고 있었습니다.

export const CELL_SIZE = 42 as const;
export const CELL_MARGIN = 2 as const;

export const BOARD_SIZE = 8 as const;
export const BOARD_MINE_COUNT = 4 as const;

export const STATUS = {
  READY: 'ready',
  RUN: 'run',
  WIN: 'win',
  LOSE: 'lose',
} as const;

export const CELL_FLAG = {
  OPEN: 0,
  NOTHING: -1,
  FLAG: -2,
  MINE: -3,
  MINE_FLAG: -4,
} as const;

export const MINE_SWEEPER_RANK = 'minesweeper-rank' as const;

(재한님이 써주신 것 처럼 상태에 맞게 변수를 사용하는 방법입니다.)

그리고 network를 처리할 때 if로 처리하면 특정 예상하지 못하는 경우에 대처하지 못하는 경우가 생길 수 있다고 생각합니다.

그래서 nextErrorboudary를 이용해서 처리하는건 어떨까요??

[qhahd78]

앙녕하십니까 하은님? 저 코드도 이미 개고수입니다..... 리뷰 바로 가겠습니다

• 반면교사 코드를 보여드리겠습니다.

저도 저렇게 STEP1, 2, 3 .... 하는 순서가 보장되어야하는 상황을 만났었는데, 저는 successCallback, errorCallback을 선언해서 사용했습니다. 제가 해보니 이 방법은 매우 안 좋은 방법입니다.

가독성이 너무너무너무 안 좋아요.

보기 너무 어려워서 이미지로 첨부합니다 ㅋㅋㅋ

보시는 바와 같이 콜백 장풍을 만들 수 있습니다....

.... 후 그래서 저도 윗분들 의견과 같이 플래그를 상수로 선언해서 사용해보시는 것을 추천합니다. 그리고 async await 키워드를 쓰시면 비동기를 좀 더 쉽게 관리할 수 있으실 겁니다.

리액트의 꽃, 비동기 지옥에 오신 것을 환영합니다 하은님 ^ㅁ^

[bbearcookie]

안녕하세요 하은님!!
초기에 null과 boolean을 혼용해서 사용한 형태에서 리듀서를 활용하는 방식으로 변경된 느낌이군요!! 😊👍
저는 API 호출로 6번의 Round Trip을 동기적으로 수행해야 하는 상황으로 이해했는데, 맞게 이해한 것일지.. 하하 😅

API 호출의 로딩 및 에러 상태를 관리는 데이터 패칭 라이브러리를 활용하면 보다 손쉽게 처리할 수 있을 것 같은데, 만약 라이브러리를 활용하기 어려운 상황이라면, TanStack Query의 각 쿼리 데이터가 관리되고 있는 방식 과 유사하게 Map 객체를 활용하여 각 API의 상태를 관리하는 유틸 기능을 만드는 방법은 어떨지 싶은 생각이 들었어요.

(로딩 상태를 관리해야 하는 API가 늘어날 때마다 리듀서에 새롭게 유사한 액션을 등록해야 할 것 같은?)