gywn9708/pre-onboarding-2-2-assignment

원티드 프리온보딩 프론트엔드 - Week 2 - 2

원티드 프리온보딩 프론트엔드 8팀의 팔팔한 형제들입니다.

📅 프로젝트 기간

기간 : 2022년 11월 5일 ~ 2022년 11월 7일 (총 3일)

팔팔한 형제들 팀 소개

FE

이주영(팀장)	심의석(부팀장)	장태희	최영준	송경용(공지)	강효주	권용현
Front-End	Front-End	Front-End	Front-End	Front-End	Front-End	Front-End

🛠 기술 스택

🏁 프로젝트 실행 방법

1. 의존성 패키지를 설치합니다.

$ npm install

2. 리눅스와 윈도우 husky 충돌 방지 후 사용을 위해 설치합니다.

$ chmod ug+x .husky/*

3. 프로젝트를 실행합니다.

$ npm start

🔗 배포 링크

베포 링크 보러가기

• 해당 프로젝트는 를 AWS S3통해 배포하였습니다.

👍 Best Practice 선정 이유

• 의존성 주입하여 코드의 유지보수성을 용이하게 만들었습니다.

const BASE_URL = process.env.REACT_APP_BASE_URL || '';
const axiosInstance = createAxiosClient(BASE_URL);
const adService = new AdService(axiosInstance);
const queryClient = new QueryClient();

const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <AdServiceProvider adService={adService}>
      <QueryClientProvider client={queryClient}>
        <ThemeProvider theme={Theme}>
	  <GlobalStyle />
	  <Router />
        </ThemeProvider>
      </QueryClientProvider>
    </AdServiceProvider>
  </React.StrictMode>
);

• React 라이브러리인 Date Picker을 이용하여 UI/UX를 향상시켜서 선정하였습니다.

✏️ 개선 부분

하루동안 함께 시행착오를 한 기록을 담았습니다!

1. 리액트 쿼리를 사용하여 코드 리팩토링

전)

const getAdList = useCallback(async () => {  
    listDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: true });  
     try {  
      const response = _await_ adService?.getAdList();  
      listDispatch({  
        type: DataActionEnum.SET_DATA,  
        data: response?.ads || [],  
      });  
    } catch (e) {  
      console.error(e);  
    } finally {  
      listDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: false });  
    }  
  }, [adService, listDispatch]);  
  const getAdTrend = useCallback(async () => {  
    trendDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: true });  
    try {  
      const response = _await_ adService?.getTrend();  
      trendDispatch({  
        type: DataActionEnum.SET_DATA,  
        data: response?.report.daily || [],  
      });  
    } catch (e) {  
      console.error(e);  
    } finally {  
      trendDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading: false });  
    }  
  }, [adService, trendDispatch]);

후)

const { isLoading, data: trendData } = useQuery(  
    ['trend'],  
    () => adService?.getTrend(),  
    {  
      staleTime: 1000 * 60 * 60,  
      cacheTime: 1000 * 60 * 60,  
    }  
  );  const { data: listData } = useQuery(  
    ['adList'],  
    () => adService?.getAdList(),  
    {  
      staleTime: 1000 * 60 * 60,  
      cacheTime: 1000 * 60 * 60,  
    }  
  );

useEffect(() => {  
    trendDispatch({  
      type: DataActionEnum.SET_DATA,  
      data: trendData?.report.daily || [],  
    });  
    trendDispatch({ type: DataActionEnum.SET_IS_LOADING, isLoading });  
  }, [trendData, isLoading]);  useEffect(() => {  
    listDispatch({  
      type: DataActionEnum.SET_DATA,  
      data: listData?.ads || [],  
    });  
  }, [listData]);