[항해99] 최종 프로젝트 서비스 개선

📌 이미지 렌더링 속도 개선

• compressorjs 라이브러리를 사용하여 사용자가 업로드한 사진을 압축 ➤ Browser Image Compression 라이브러리도 이미지의 사이즈를 줄이거나 용량을 압축해주는 라이브러리이지만 이미지의 사이즈 값을 조절하면 원본 이미지의 비율을 유지하지 못한다. 그래서 원본의 비율을 유지하면서 화질만 낮춰서(파일 크기를 줄여서) 압축할 수 있는 compressorjs 라이브러리를 사용했다.

• 원본 비율은 유지하고 사용자 입장에서 허용할 수 있는 최소 화질을 모바일/데스크탑에서 테스트하여 화질 60% 압축

const selectFiles = () => {
    const currentFile = fileInput.current.files[0];
    new Compressor(currentFile, {
      quality: 0.6,
      success(result) {
        setFile(result);
      },
    });

---

📌 페이지 이동시 Default 탭으로 탭위치 초기화되는 문제

• modules 에서 sortType action과 reducer를 새로 만들어서 탭의 state 값을 리덕스로 관리하여 해결완료!

// sortType action
const setDesignSortType = createAction(SET_DESIGN_SORTTYPE, (list) => ({
  list,
}));
const setMyDesignSortType = createAction(SET_MYDESIGN_SORTTYPE, (list) => ({
  list,
}));

// reducer
    [SET_DESIGN_SORTTYPE]: (state, action) =>
      produce(state, (draft) => {
        draft.design_sort_type = action.payload.list;
      }),
    [SET_MYDESIGN_SORTTYPE]: (state, action) =>
      produce(state, (draft) => {
        draft.mydesign_sort_type = action.payload.list;
      }),

// dispatch action
        <NewButton
          onClick={() => {
            setSortType("createdDate");
            dispatch(designAction.setDesignSortType("createdDate"));
          }}
          sortType={sortType}
        >
          최신순
        </NewButton>

        <LikeButton
          onClick={() => {
            setSortType("likeCnt");
            dispatch(designAction.setDesignSortType("likeCnt"));
          }}
          sortType={sortType}
        >
          좋아요순
        </LikeButton>
        <CommentButton
          onClick={() => {
            setSortType("commentCnt");
            dispatch(designAction.setDesignSortType("commentCnt"));
          }}
          sortType={sortType}
        >
          댓글순
        </CommentButton>
        <CheckButton
          onClick={() => {
            setSortType("viewCnt");
            dispatch(designAction.setDesignSortType("viewCnt"));
          }}
          sortType={sortType}
        >
          조회수순
        </CheckButton>

---

📌 페이지 이동시 이전 데이터가 잠시 남아있는 문제

• 페이지를 이동하는 이벤트 발생 시점에 기존 저장소를 비워서 해결완료!

  /// dispatch action
      <Modal
        isOpen={modalIsOpen}
        onRequestClose={() => {
          setModalIsOpen(false);
          dispatch(cakeAction.cakeImage({}));
        }}

  /// action
  const getCakeList = createAction(GET_CAKE_LIST, (list) => ({ list }));
  const cakeImage = createAction(CAKE_IMAGE, (img) => ({ img }));